PDA

View Full Version : Image swap mouse-over


Agent007
12-06-2006, 05:22 PM
on www.faceofrochester.com/gallery.html, when someone mouses over one of the 100x100px thumbnail images, i want a 300x200px version to appear in the bigger 300x200 box that sits among the thumbnails in the table ive created. The large image is inside a div tag. It needs to swap that image for the larger version of whatever is moused over.

davidj
12-06-2006, 05:59 PM
javascript function


function swap(p){
var pc = document.getElementById("pic");
switch(p){

case "pic1": pc.innerHTML = '<img src="Images/125sclinton100.jpg" width="300" height="300" />'; break;
case "pic2": pc.innerHTML = '<img src="Images/lgpictriver100.jpg" width="300" height="300" />'; break;
case "pic3": pc.innerHTML = '<img src="Images/Rochester-NY-skyline100.jpg" width="300" height="300" />'; break;
case "pic4": pc.innerHTML = '<img src="Images/rochester100.jpg" width="300" height="300" />'; break;
case "pic5": pc.innerHTML = '<img src="Images/rochester_water_scene100.jpg" width="300" height="300" />'; break;
case "pic6": pc.innerHTML = '<img src="Images/rochesternight100.jpg" width="300" height="300" />'; break;
case "pic7": pc.innerHTML = '<img src="Images/rochsky100.jpg" width="300" height="300" />'; break;
}
}

</script>


HTML table


<table width="327" height="334" border="1">
<tr>
<td height="44">

<img src="Images/125sclinton100.jpg" width="100" height="100" onclick="swap('pic1')" /></td>
<td><img src="Images/lgpictriver100.jpg" width="100" height="100" onclick="swap('pic2')"/></td>
<td><img src="Images/Rochester-NY-skyline100.jpg" width="100" height="100" onclick="swap('pic3')"/></td>
<td><img src="Images/rochester100.jpg" width="100" height="100" onclick="swap('pic4')"/></td>
<td><img src="Images/rochester_water_scene100.jpg" width="100" height="100" onclick="swap('pic5')"/></td>
<td><img src="Images/rochesternight100.jpg" width="100" height="100" onclick="swap('pic6')"/></td>
<td><img src="Images/rochsky100.jpg" width="100" height="100" onclick="swap('pic7')"/></td>
</tr>
<tr>
<td height="222" colspan="7"><div id="pic"></div></td>
</tr>
</table>

Agent007
12-06-2006, 06:58 PM
Your script doesn't call for the large version of any of the images at any time. Or am I missing something?

domedia
12-06-2006, 07:33 PM
As long as you have all the images made, you can use the image swap function inside Dreamweaver to do this. Just make sure you define that your other area (the one where the larger image should go) get's changed instead of the image you're mousing over.

davidj
12-06-2006, 07:43 PM
int he javascript function...

case "pic1": pc.innerHTML = '<img src="Images/125sclinton100.jpg" width="300" height="300" />'; break;

replace Images/125sclinton100.jpg with your image you want. do this for each image