By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,763 Members | 1,609 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,763 IT Pros & Developers. It's quick & easy.

Seeking javascript image displayer

P: n/a
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!

Jul 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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>
Jul 23 '05 #2

P: n/a
Cynthia <cy********@hotmail.com> wrote in message news:<4a08d.3229$Xk1.2463@trnddc02>...
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!

<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.getElementById("myImage");
if(id=='a')
myImage.src="somePic.gif";
else if(id=='b')
myImage.src="otherPic.gif";
else if(id=='c')
myImage.src="yetanotherPic.gif";
}
function out()
{
document.getElementById("myImage").src="default.gi f";
}
</script>
</head>
<body>
<p class="nav">
<a href="1.htm" onmouseover="changeImg('a');" onmouseout="out();">Link 1</a>
<a href="2.htm" onmouseover="changeImg('b');" onmouseout="out();">Link 2</a>
<a href="3.htm" onmouseover="changeImg('c');" onmouseout="out();">Link 3</a>
</p>
<img id="myImage" src="default.gif" alt="" />
</body>
</html>

seth flowers - www.charlottewebdev.com
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.