creating a page with rollovers to show images and text

kilo3000 · Apr 16, 2004

I want to create a page that has a set of button rollovers; so that when each is hovered over they would show a different set of text and images in the same area of the page.

I've seen this done using dynapi, and obviously it can be done in flash. I was just wondering what other ways I can achieve this, and what is the best and easiest way??

Thanks!

MichiganRon · Apr 19, 2004

kilo3000,

You might have received a better response to this question in the javascript forum. Anyway, here's my stab at a solution. It just gives you the basics, you'll need to modify it to suit your needs. Also, I only tested it in IE 6, so be sure to test it in other browsers.

Try this:

Code:

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
[COLOR=green]//Pre-load the images[/color]
if (document.images){
	image1 = new Image();
	image1.src = "images/1.gif";

	image2 = new Image();
	image2.src = "images/2.gif";

	image3 = new Image();
	image3.src = "images/3.gif";

	image4 = new Image();
	image4.src = "images/4.gif";

	image5 = new Image();
	image5.src = "images/5.gif";
}

function Show(img){	[COLOR=green]//This function will display the image and text[/color]
	if (document.images){
		TextSpan = eval("document.all.text" + img); [COLOR=green]//Assign the correct span element to be displayed[/color]
		TextSpan.style.display = ""; [COLOR=green]//Display the span element[/color]
		imgSource = eval("image" + img + ".src"); [COLOR=green]//Declare which of the pre-loaded images above to use[/color]
		document.all.picture.src = imgSource; [COLOR=green]//Assign the displayable image to the pre-loaded image's source[/color]
		document.all.ImageDiv.style.visibility = "visible"; [COLOR=green]//Make everything visible[/color]
	}
}

function Hide(img){ [COLOR=green]//This function will hide the image and text
	if (document.images){
		document.all.picture.src = "images/blank.gif"; [COLOR=green]//Change the image to a blank image[/color]
		document.all.ImageDiv.style.visibility = "hidden"; [COLOR=green]//Hide the entire block[/color]
		TextSpan = eval("document.all.text" + img); [COLOR=green]//Assign the correct span element to be hidden[/color]
		TextSpan.style.display = "none"; [COLOR=green]//Hide the span element[/color]
	}
}
//-->
</script>
					
</head>
<body>
<table summary="" border="1">
  <tr>
    <td onmouseover="Show('1');" onmouseout="Hide('1');">Show "image 1"</td>
    <td rowspan="5"><div id="ImageDiv" style="visibility:hidden;"><img src="images/blank.gif" name="picture"><br />
			This is "Image 
			<span id="text1" style="display:none;">1</span>
			<span id="text2" style="display:none;">2</span>
			<span id="text3" style="display:none;">3</span>
			<span id="text4" style="display:none;">4</span>
			<span id="text5" style="display:none;">5</span>
			"</div></td>
  </tr>
  <tr>
    <td onmouseover="Show('2');" onmouseout="Hide('2');">Show "image 2"</td>
  </tr>
  <tr>
    <td onmouseover="Show('3');" onmouseout="Hide('3');">Show "image 3"</td>
  </tr>
  <tr>
    <td onmouseover="Show('4');" onmouseout="Hide('4');">Show "image 4"</td>
  </tr>
  <tr>
    <td onmouseover="Show('5');" onmouseout="Hide('5');">Show "image 5"</td>
  </tr>
</table>
</body>
</html>

Good luck,
-Ron

We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are. -Me

murof siht edisni kcuts m'I - PLEH

petey · Apr 19, 2004

You should be able to do it with just CSS:

Code:

<style type="text/css">
a img { display: none; }
a:hover img { display: block; position: absolute; left: 10px; top: 10px; }
</style>
...
<a href="...">Link 1<img src="img1.png" alt="" /></a>
<a href="...">Link 2<img src="img2.png" alt="" /></a>
<a href="...">Link 2<img src="img3.png" alt="" /></a>

This technique can be altered and extended, but hopefully it illustrates the point. A demo page I made uses a similar technique:

http://www.drpeterjones.com/gchdemo/

Hope it helps!

http://www.drpeterjones.com/

News and views of some obscure guy

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

creating a page with rollovers to show images and text

kilo3000

Programmer

MichiganRon

MIS

petey

Programmer

Similar threads

Part and Inventory Search

Sponsor