Image show on rollover

I have a page that has several links that are coming from a db.

Link1
Link2
Link3
etc...

I want to be able to rollover them and have a corrisponding image appear below.

Link1 - onMouseOver - Show image for link1
Link2 - ''              ''        ''          ''        link2
etc...

How can I do this?

I need to code this quickly...

LVL 8
alexhoganAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Lord_McFlyConnect With a Mentor Commented:
If the link doesn't actually link to anywhere maybe you could do the following...

<html>
<head>
<title>Example</title>
<script language="Javascript">
<!--
function ChangeImage(ImageName,NewImage)
     {
          eval("document.images."+ImageName+".src=NewImage")
     }
//-->
</script>
</head>
<body>
<%Do while not rs.EOF%>
   <span onMouseOver="ChangeImage('Image','<%=rs("ClassCode")%>.gif')"><%=rs("ClassCode")%></span>
   <%rs.MoveNext
Loop%>
<img name="Image" src="noimage.gif">
</body>
</html>
0
 
Lord_McFlyCommented:
The following example has a single image which changes according to the link you are mousing over...

<html>
<head>
<title>Example</title>
<script language="Javascript">
<!--
function ChangeImage(ImageName,NewImage)
      {
            eval("document.images."+ImageName+".src=NewImage")
      }
//-->
</script>
</head>
<body>
<a href="#" onMouseOver="ChangeImage('Image','Image1.gif')">Link 1</a>
<a href="#" onMouseOver="ChangeImage('Image','Image2.gif')">Link 2</a>
<img name="Image" src="noimage.gif">
</body>
</html>
0
 
GwynforWebCommented:
Try some thing like this, use a blank .gif instead of null.

<script>
function setIm(imName){
document.getElementById('theImage').src=imName
}
</script>

<a href='http://google.com' onmouseover='setIm("http://experts-exchange.com/images/pe/143475.jpg")' onmouseout='setIm(null)'>Google</a>
<br><a href='http://Yahoo.com' onmouseover='setIm("http://experts-exchange.com/images/pe/344311.jpg")'  onmouseout='setIm(null)'>Yahoo</a>
<p>
<img id='theImage'>
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
alexhoganAuthor Commented:
I'm sorry it's taken a few days to get back to this quesiton.  Pulled in many directions.., you know.

How can I take those static image references and make them dynamic?  I have the links coming from a database and I won't know which links are going to be displayed to the browser.

The links are derived from product class codes and the images have been named the same as the class code for simplicity.

Because of the wait and need I am increasing the points.
0
 
Lord_McFlyCommented:
What information comes from the DB - in the example below I have assumed that the link, image name and a description are coming from the db.

<html>
<head>
<title>Example</title>
<script language="Javascript">
<!--
function ChangeImage(ImageName,NewImage)
     {
          eval("document.images."+ImageName+".src=NewImage")
     }
//-->
</script>
</head>
<body>
<%Do while not rs.EOF%>
   <a href="<%=rs("LinkName")%>" onMouseOver="ChangeImage('Image','<%=rs("ImageName")%>')"><%=rs("LinkDescription")%></a>
   <%rs.MoveNext
Loop%>
<img name="Image" src="noimage.gif">
</body>
</html>

Hope that helps :)
0
 
alexhoganAuthor Commented:
On these rollovers there is no link, just a number.  (it's not my call.., client request)

These numbers are the class codes I mentioned.  When the user rollsover the link the image will appear at a predetermined location.

The images are in a dir underneath the calling file.  They are numbered the same as the class codes.
0
 
alexhoganAuthor Commented:
You are absolutely right.  Thanks...
0
All Courses

From novice to tech pro — start learning today.