Seeking javascript image displayer

**Robert** · Jul 23 '05, 02:28 PM

Re: Seeking javascript image displayer

Cynthia <cynthiasog@hot mail.com> wrote in message news:<4a08d.322 9$Xk1.2463@trnd dc02>...
[color=blue]
> Even better would be one where I can swap the menu image and display an
> image elsewhere on the page.[/color]

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='ov er()'
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.leng th == 1)
{ document.images["big_image"].src = nasaPath + name; }
}

function setThumb(id,nam e)
{
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='se tThumb("image0" ,"Mercuryglobe2 _T.jpg");change Img("Mercuryglo be1_L.jpg");'
onmouseout='set Thumb("image0", "Mercuryglobe1_ T.jpg");changeI mg();'>
</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='se tThumb("image1" ,"venusglobe_T. jpg");changeImg ("Venus_L.jpg") ;'
onmouseout='set Thumb("image1", "Venus_T.jpg"); changeImg();'>
</a>
<br>
</td>
</tr>
</tbody>
</table>
<div id="footer">
<p>These image are from NASA. See:<br>

http://spaceplace.jpl.nasa.gov/en/educators/teachers_ss_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.j pg";

// 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.jp g";

</script>

</body
</html>

**Seth Flowers** · Jul 23 '05, 02:29 PM

Re: Seeking javascript image displayer

Cynthia <cynthiasog@hot mail.com> wrote in message news:<4a08d.322 9$Xk1.2463@trnd dc02>...[color=blue]
> I'm looking for javascript code that when I mouse over a menu item will
> display a picture elsewhere on the page. I know it exists, but the ones
> I've found so far just swap out the menu item in place.
>
> Even better would be one where I can swap the menu image and display an
> image elsewhere on the page.
>
> Many thanks![/color]
<html>
<head>
<style type="text/css">
..nav a {background:url ('someimg.gif') no-repeat center center #fff;}
..nav a:hover {background:url ('otherimg.gif' ) no-repeat center center #fff;}
</style>
<script type="text/javascript">
function changeImg(id)
{
var myImage = document.getEle mentById("myIma ge");
if(id=='a')
myImage.src="so mePic.gif";
else if(id=='b')
myImage.src="ot herPic.gif";
else if(id=='c')
myImage.src="ye tanotherPic.gif ";
}
function out()
{
document.getEle mentById("myIma ge").src="defau lt.gif";
}
</script>
</head>
<body>
<p class="nav">
<a href="1.htm" onmouseover="ch angeImg('a');" onmouseout="out ();">Link 1</a>
<a href="2.htm" onmouseover="ch angeImg('b');" onmouseout="out ();">Link 2</a>
<a href="3.htm" onmouseover="ch angeImg('c');" onmouseout="out ();">Link 3</a>
</p>
<img id="myImage" src="default.gi f" alt="" />
</body>
</html>

seth flowers - www.charlottewebdev.com

Seeking javascript image displayer

Seeking javascript image displayer

Comment

Comment