...

View Full Version : Defining the "active" image src. in Javascript?



shauntho
07-21-2011, 02:53 PM
Hi all,
I have an <img> place holder in my HTML, and when users 'onclick' different button's, a javascript function is called that makes different images appear within the <img> place holder. ie. the src changes. See below:



<body>
<img id="image_space" src="" />

<button type="button" onclick="imageChange(/image1.jpg)">Image 1</button>
<button type="button" onclick="imageChange(/image2.jpg)">Image 2</button>

<script>
function imageChange(image){
document.getElementById("image_space").src=image;
}
</script>
</body>


Strait forward enough. I also have a third button, which activates a different javascript function to display an image within a different <img> place holder. BUT, I only want this button to work IF "/image2.jpg" is the ACTIVE image within the original <img> place holder (with id="image_space").
How can I write some javascript code that will identify that image as being ACTIVE? The final code with the missing "link" is described below:



[CODE]
<body>
<img id="image_space" src="" />
<img id="image_space2" src="" />

<button type="button" onclick="imageChange(/image1.jpg)">Image 1</button>
<button type="button" onclick="imageChange(/image2.jpg)">Image 2</button>
<button type="button" onclick="thirdImageChange(/image3.jpg)">Image 3</button>

<script>
function imageChange(image){
document.getElementById("image_space").src=image;
}

function thirdImageChange(thirdImage){
if (missing code here that says "/image2.jpg ACTIVE in <img id="image_space">)
{
document.getElementById("image_space2").src=thirdImage;
}
}
</script>
</body>

Sorry it's so long winded! I hope I made it clear enough. Your help would be GREATLY appreciated. Thanks for reading!

nomanic
07-21-2011, 04:27 PM
how about something like this?



<body>
<img id="image_space" src="" />
<img id="image_space2" src="" />

<button type="button" onclick="imageChange(1)">Image 1</button>
<button type="button" onclick="imageChange(2)">Image 2</button>
<button type="button" onclick="thirdImageChange(1)">Image 3</button>

<script>
var cimg=0;

function imageChange(i){
document.getElementById("image_space").src=((i==1)?'image1.jpg':'image2.jpg');
cimg=i;
};

function thirdImageChange(thirdImage){
if (cimg==1) {document.getElementById("image_space2").src='image3.jpg';}
};
</script>
</body>

shauntho
07-22-2011, 11:10 AM
YES!!! Thankyou soooooo much!, worked a treat!! :):):)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum