Cynthia <cy********@hotmail.com> wrote in message news:<4a08d.3229$Xk1.2463@trnddc02>...
Even better would be one where I can swap the menu image and display an
image elsewhere on the page.
You may do rollovers in CSS or in javascript. I'll write out a
javascript way.
Rollovers are rather simple when you get down to it. Here is the
logic:
1) When you mouse pass over the edge of an image, the image is
replaced with a new image. Here is an example replace image:
document.images["image1"].src = "mynewhouse.jpg";
2) When the mouse pass outside of the image, the image is replaced
with the orginal image. Here is an example restore image:
document.images["image1"].src = "myoldhouse.jpg";
3) To improve performance on the first rollover, the images are
preloaded in the page. Place something like this at the end of your
page:
<script type="text/javascript">
var selimage = new Image();
selimage.src = "mynewhouse.jpg";
</script>
Fortunately, the Img tag tells you when the mouse passes over the
image and when the mouse pass back out of the image.
<img
id="image1"
src="http://spaceplace.nasa.gov/en/educators/images/solarsystem/Venus_T.jpg"
onmouseover='over()'
onmouseout='out()'>
</a>
When the mouse passes over the image edge, the javascript fuction
over() gets invoked. When the mouse passes out of the image, the
javascript fuction out() gets invoked. These function may change any
number of images.
I written up an example of this.
Watch for word wrap.
Robert
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Swap images</title>
<style type="text/css">
#footer{
clear: both;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
background: #eee;
}
</style>
<script type="text/javascript">
var nasaPath = "http://spaceplace.nasa.gov" +
"/en/educators/images/solarsystem/";
function changeImg(name)
{
document.images["big_image"].src =
"http://spaceplace.jpl.nasa.gov/en/_images/common/nasa_header/logo_nasa.gif";
if (arguments.length == 1)
{ document.images["big_image"].src = nasaPath + name; }
}
function setThumb(id,name)
{
document.images[id].src = nasaPath + name;
}
</script></head>
<body>
<h1 style="text-align: center;">Solar System</h1>
<table>
<tbody><tr>
<td valign="top" width="110">
<a href="http://spaceplace.nasa.gov/en/educators/images/solarsystem/Mercuryglobe1_L.jpg">
<img id="image0"
src="http://spaceplace.nasa.gov/en/educators/images/solarsystem/Mercuryglobe1_T.jpg"
onmouseover='setThumb("image0","Mercuryglobe2_T.jp g");changeImg("Mercuryglobe1_L.jpg");'
onmouseout='setThumb("image0","Mercuryglobe1_T.jpg ");changeImg();'>
</a>
<br>
</td>
<td rowspan="2" align="center" height="800" valign="top" width="600">
<img
id="big_image"
src="http://spaceplace.jpl.nasa.gov/en/_images/common/nasa_header/logo_nasa.gif">
</td>
</tr>
<tr>
<td valign="top" width="110">
<a href="http://spaceplace.nasa.gov/en/educators/images/solarsystem/Venus_L.jpg">
<img
id="image1"
src="http://spaceplace.nasa.gov/en/educators/images/solarsystem/Venus_T.jpg"
onmouseover='setThumb("image1","venusglobe_T.jpg") ;changeImg("Venus_L.jpg");'
onmouseout='setThumb("image1","Venus_T.jpg");chang eImg();'>
</a>
<br>
</td>
</tr>
</tbody>
</table>
<div id="footer">
<p>These image are from NASA. See:<br>
http://spaceplace.jpl.nasa.gov/en/ed...s_images.shtml
</p>
</div>
<script type="text/javascript">
// Proloading all the images will take awhile.
// Preload the rollover images for the thumbs.
var selimage1 = new Image();
selimage1.src = nasaPath + "Mercuryglobe2_T.jpg";
var selimage2 = new Image();
selimage2.src = nasaPath + "venusglobe_T.jpg";
// Preload the rollover images for the large images.
var selimage3 = new Image();
selimage3.src = nasaPath + "Mercuryglobe1_L.jpg";
var selimage4 = new Image();
selimage4.src = nasaPath + "Venus_L.jpg";
</script>
</body
</html>
