Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1207
  • Last Modified:

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...

0
alexhogan
Asked:
alexhogan
  • 3
  • 3
1 Solution
 
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
 
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
Lord_McFlyCommented:
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
 
alexhoganAuthor Commented:
You are absolutely right.  Thanks...
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now