|
dpf -> RE: How Did They Do Tat? (8/28/2005 11:04:26)
|
Larry the example caz gave, while lengthy, is a wonderful introduction to doing it with css. if you want to do it with javascript, here is how (simple)
1. use the wysiwyg to build the table with the thumbnails in place and the large cell where the images changes will go - be sure to give a name and id to that square (can be done in fp). for the sake of argument, lets say the name you gave was name="center".
2. as always with mouseovers, you want to preload the images so that when you mouseover, they are already in cache and browser doesnt have to request from server thus ruining the illusion. to build preload, put a script in the head section:
<script language="javascript" type="text/javascript">
<!--
//for each image that will be displayed when mouseover, //add these two lines giving the image a unique name
var img1= new Image(); //img1 is the unique name
img1.src="actualimage.jpg"; //here you are saying that the source of img1 is some file - dont forget the semi colons! you do this for each of the large images that gets mouseovered - dont need to do it for the thumbnails
now add one more for the image that is to be replaced
img centerimg();
centerimg.src = picturename.jpg;
when you have all the images listed with 2 lines and unique names, close the script:
-->
</script>
3. now, in the html for each thumbnail, add this mouseover code:
<a href=""
onMouseOver='document.center.src=img1.src'
onMouseOut='document.center.src=centerimg.src'><img
src="thumb1.gif"></a>
lets look at this code. you place the image thumb1.gif in the cell with the wysiwyg and the code looked like this:
<img src="thumb1.gif">
in order to get the mouseover to work, we have to add and anchor < href="" and the mouseover calls. it is using dot syntax to describe where to perform the action and document.center refers to the image that you named center - so it is saying "on mouseover change the image - not the one here but one in another place"
see how that works?
|
|
|
|
