I have the next code:
<p>
<img alt="" src="imagini/slide1.png"
style="height: 64px; width: 64px" id="imgClickAndChange"
onclick="changeImage()" />
</p>
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "imagini/slide1.png")
{
document.getElementById("imgClickAndChange").src = "imagini/platform.png";
}
else
{
document.getElementById("imgClickAndChange").src = "imagini/platform.png";
}
}
</script>
That is changing an image (phase 1) after clicking on it into another image(phase 2). I want to link the second image (phase 2) to an index.php page. How do I do that? Is there a way of altering or interfering in the changeImage function.
Use the else block of the if statement you already have to change window.location.
function changeImage() {
if (document.getElementById("imgClickAndChange").src.indexOf("imagini/slide1.png") !== -1) {
document.getElementById("imgClickAndChange").src = "imagini/platform.png";
} else {
window.location = "index.php";
}
}
You could use jQuery to easily attach a click event on the second image only. Or you could have 2 images in the page (one alone and one inside a link) and then hide and show one image or another.
Try something like this:
var myEl = document.getElementById("imgClickAndChange");
var parent = myEl.parentNode();
var link = document.createElement('a');
link.href = 'http://www.google.com';
link.appendChild(myEl);
parent.removeChild(myEl);
myEl.src = "imagini/platform.png";
parent.appendChild(link);
try this
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "imagini/slide1.png")
{
document.getElementById("imgClickAndChange").src = "imagini/platform.png";
}
else
{
document.location.href="index.php";
}
}
Related
I am trying to make my website responsive and have added some jQuery to remove and insert HTML. I am trying to display a popup box when an anchor tag around an image is clicked.
The window appears the first time the page is loaded, but when it has been resized the link no longer works and doesn't display the popup.
// Call hidePopup function upon clicking element with class ".close"
$(function() {
$('.close').click(hidePopup);
});
function hidePopup() {
if (this.id == 'hideP1') {
$('#popup1').addClass('hidePopups');
} else if (this.id == 'hideP2') {
$('#popup2').addClass('hidePopups');
} else if (this.id == 'hideP3') {
$('#popup3').addClass('hidePopups');
}
}
// Call showPopup function upon clicking element with class ".imgClick"
$(function() {
$('.imgClick').click(showPopup);
});
function showPopup() {
if (this.id == 'imgEms') {
$('#popup1').removeClass('hidePopups');
} else if (this.id == 'imgPas') {
$('#popup2').removeClass('hidePopups');
} else if (this.id == 'imgTs') {
$('#popup3').removeClass('hidePopups');
}
}
var LinkedHtml = [
'<img src="assets/img/festival-big.jpg" title="Event Medical Services">',
'<img src="assets/img/ambulance2.png" title="Private Ambulance Services">',
'<img src="assets/img/training_1.jpeg" title="Training Solutions">'
];
var nonLinkedHtml = [
'<img src="assets/img/festival-big.jpg" title="Event Medical Services" id="emsImg">',
'<img src="assets/img/ambulance2.png" title="Private Ambulance Services" id="pasImg">',
'<img src="assets/img/training_1.jpeg" title="Training Solutions" id="tsImg">'
];
$(window).resize(function() {
windowSize = $(window).width();
var anchorIds = ['#imgEms','#imgPas','#imgTs'];
var imageIds = ['#emsImg','#pasImg','#tsImg'];
if (windowSize < 740) {
for (var i = 0; i < imageIds.length; i++) {
$(imageIds[i]).replaceWith(LinkedHtml[i]);
}
} else if (windowSize > 740) {
$(".overlay").addClass("hidePopups");
for (var i = 0; i < anchorIds.length; i++) {
$(anchorIds[i]).replaceWith(nonLinkedHtml[i]);
}
}
});
I do not have much experience with JavaScript nor jQuery and I have been struggling with this issue all day.
Thank you!
What happens if you try to use a delegate instead?
$(function() {
$(document.body).on('click', '.imgClick', showPopup);
});
If this works, then you should try to find a parent element that always exists for the imgClick elements, that is never replaced, and use that as a selector instead of document.body.
I'm trying to swap two imgs in my webpage and can't wrap my head around why this code doesn't work. Any help would be appreciated.
This is in the HTML file:
<img onclick="swap(); "src="LaptopThin.jpg" id="LaptopPicture" />
while this is in a seperate javascript file:
function swap()
{
var picture = document.getElementById('LaptopPicture').src;
if (picture === 'LaptopThin.jpg') {
picture.src = 'ServerRack.jpg';
} else {
picture.src = 'LaptopThin.jpg';
}
I changed the code to:
function swap()
{
var picture = document.getElementById('LaptopPicture');
if (picture.src === 'LaptopThin.jpg') {
picture.src = 'ServerRack.jpg';
} else {
picture.src = 'LaptopThin.jpg';
}
}
and the picture is still not changing at all in the html file. The img stays on Laptopthin.jpg
You can't set the src property of picture because you set picture to the src property of an element already.
Change these lines:
var picture = document.getElementById('LaptopPicture').src;
if (picture === 'LaptopThin.jpg') {
to these:
var picture = document.getElementById('LaptopPicture');
if (picture.src === 'LaptopThin.jpg') {
It is because, the src property will give the absolute value of the image source not just the value set by the src attribute
function swap() {
var picture = document.getElementById('LaptopPicture');
if (picture.src.indexOf('LaptopThin.jpg') > -1) {
picture.src = 'ServerRack.jpg';
} else {
picture.src = 'LaptopThin.jpg';
}
}
Another option to try is to use getAttribute
function swap() {
var picture = document.getElementById('LaptopPicture');
if (picture.getAttribute('src')== 'LaptopThin.jpg') {
picture.src = 'ServerRack.jpg';
} else {
picture.src = 'LaptopThin.jpg';
}
}
I've written a simple html and js code to toggle between two images on click but relative url is not working in js code. code which is not working:
<img id="demo" src="one.jpg" ></img>
<script>
var pic = document.getElementById("demo");
function change()
{
if (pic.src == "one.jpg")
{
pic.src="two.jpg";
}
else
{
pic.src="one.jpg";
}
}
</script>
When I changed relative url to absolute its working fine:
<script>
var pic = document.getElementById("demo");
function change()
{
if (pic.src == "file:///D:/javaScript_tut/one.jpg")
{
pic.src="file:///D:/javaScript_tut/two.jpg";
}
else
{
pic.src="file:///D:/javaScript_tut/one.jpg";
}
</script>
replace
if (pic.src == "one.jpg")
with
if(pic.src.indexOf("one.jpg") >= 0)
I have an image defined as following:
<div id="logo" class="exhibit-flowingFacet">
<div class="wrapper">
<img src="path/to/the/image/logo.png">
</img>
</div>
</div>
I want with a javascript get the image by its src and hide it.
function hideImage() {
if (document.getElementById()
{
if (document.getElementById('logo').getElementsByClassName('wrapper').src=="path/to/the/image/logo.png")
{
document.style.visibility = 'hidden';
}
}
};
hideImage();
But the code didn't work!! any idea?
With jQuery you could write
$('img[src="path/to/the/image/logo.png"]').hide();
Try this script:
function hideImage() {
var path = 'path/to/the/image/logo.png';
var img = document.getElementById('logo').getElementsByTagName('img')[0];
if (img && img.getAttribute('src').indexOf(path) > -1) {
img.style.visibility = 'hidden';
}
}
if (window.addEventListener) {
window.addEventListener('load', hideImage, false);
} else if (window.attachEvent) { // for older IE8-6 compatibility
window.attachEvent('onload', hideImage);
}
JSFiddle
You can try this:-
$('img[src="path/to/the/image/logo.png"]').css("display","none");
or try this:-
this.style.display = "none";
getElementsByClassName('wrapper') is an array, which is why you have to access the src-attribute of the first element - at least in your case.
if (document.getElementById('logo').getElementsByClassName('wrapper')[0].src=="path/to/the/image/logo.png")
You have to make sure you have a link to jquery library in your header using this code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
You could diplay:none in css if you wanted it not to render on the screen, just pass the image source into the function
function hideImage(imageSrc) {
$('img[src=" + imageSrc + "]').css("display","none");
}
and turn it back on using
$('img[src="path/to/the/image/logo.png"]').css("display","block");
I had a html page where I was using java script to collapse and expand Gridview. However, I had to switch to a asp:content page(part of a master page) where I don't have head tag.
I tried specifying the java script inside the asp:content but it is not working.
Also, I tried specifying itmy master page still its not working.
How to deal with it any ideas?
Here is the script.
<script type="text/javascript">
function collapseExpand(obj) {
var gvObject = document.getElementById(obj);
var imageID = document.getElementById('image' + obj);
if (gvObject.style.display == "none") {
gvObject.style.display = "inline";
imageID.src = "~/ims/Images/bullet_toggle_minus.jpg";
}
else {
gvObject.style.display = "none";
imageID.src = "~/ims/Images/bullet_toggle_plus.jpg";
}
}
</script>
You can specify script at any place in your page. As soon as browser sees script tag it executes script inside it.
But in this case I think you should execute your code inside window.onload event handler because you need to wait until you markup is loaded and then you need to call your function. For example:
<script type="text/javascript">
window.onload = function(){
function collapseExpand(obj) {
var gvObject = document.getElementById(obj);
var imageID = document.getElementById('image' + obj);
if (gvObject.style.display == "none") {
gvObject.style.display = "inline";
imageID.src = "~/ims/Images/bullet_toggle_minus.jpg";
}
else {
gvObject.style.display = "none";
imageID.src = "~/ims/Images/bullet_toggle_plus.jpg";
}
}
collapseExpand("yourOfYourElement");
}
</script>
Or you can register calling your function after some event raises. For example:
document.onclick = function(){
collapseExpand("yourOfYourElement");
}