PDA

View Full Version : Having problems with an image swap - please help


css5
04-10-2004, 12:41 AM
I cannot get this to work - I've tried everything.

I have a column of three images and one large image right next to it. I want the user to be able to click the small thumbnail and have it enlarge in the large image box next to it.

Here is my global script:

function swapImage(strElement, objImage) {
// this function swaps the image identified by strElement for a new one preloaded as objImage
if (document.images && objImage && objImage.src && objImage.src != "") {
if (document.images[strElement] && document.images[strElement].src != objImage.src) {document.images[strElement].src = objImage.src;
}
}

Here it is in the html:

The large image:

<td><img src="images/single_fin/1_lg.jpg" width="400" height="300" border="0" name="enlargeImage"/></td>

The small image:

<td><a href="#" onclick="return enlargeImage('images/single_fin/1_lg.jpg', 'Single Fin', 1);"><img src="images/single_fin/2_sm.jpg" alt="" width="130" height="90" border="0"/></td>

All I'm getting in the browser is the reference on the status bar "#", not swap.

Thanks for any help.
}

alex@fior-cryst
04-10-2004, 10:29 AM
I use the image swap with the <div></div> tags from HTML 4.. it allows you to step away from tables and frames. These tags allow you to position images or text exactly where you want them on the page. Check my page at www.fior-crystal.com/contact.htm. You may also use this technique for rollovers.

Garadon
04-10-2004, 10:42 AM
you calling a function enlargeImage that u haven't posted the code for.

Mr J
04-10-2004, 01:09 PM
Please try the following

<script>
<!--
function show_image(pic){
document.getElementById("mypic").src=pic
}
// -->
</script>

<P><img src="pic01_small.jpg" width="50" height="50" onmouseover="show_image('pic01_large.jpg')">
<P><img src="pic02_small.jpg" width="50" height="50" onmouseover="show_image('pic02_large.jpg')">
<P><img src="pic03_small.jpg" width="50" height="50" onmouseover="show_image('pic03_large.jpg')">
<P><img src="pic04_small.jpg" width="50" height="50" onmouseover="show_image('pic04_large.jpg')">
<P><img src="pic05_small.jpg" width="50" height="50" onmouseover="show_image('pic05_large.jpg')">


<div style="position:absolute;left:200px;top:100px"><img id="mypic"src=""></div>