Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

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

asp mouseover image

I've used mouseover and hover for a long time, but over text, not on an image.
I'm thinking you have to have as many images as you do menu options that you want to change color on mouseover, but don't have a clue how to code it  I'm using an image map for href now.  It's in simple asp and javascript/vbscript.
Any examples would be appreciated - looking for cleanest, easiest to understand so anyone can maintain.
I know it's probably easier in AJAX, knowing how it works, but haven't used it yet.  Maybe this is the time.
0
dcass
Asked:
dcass
2 Solutions
 
Shahzad Fateh AliWeb Solutions Architect & Technical Project Manager- VentureDive (Pvt) LtdCommented:
Hi,

Try this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple Roll Over</title>
<script type="text/javascript" language="javascript">
	function rollover(el, img){
		el.src = img;
	}
</script>
</head>
<body>
<img src="ad.gif" onmouseover="rollover(this,'af.gif')" onmouseout="rollover(this,'ad.gif')" />
</body>
</html>

Open in new window

0
 
GarveCommented:
Rather than using javascript, this can all be done with one image and CSS - A List Apart has the code.

See
http://www.alistapart.com/d/sprites/ala-buttons1.html

You presumable already have your image for your image map.
In an image editor, make it twice as deep, and add your hover states below.

This shows the image in the above demo - it'll help you understand much more quickly.
http://www.alistapart.com/d/sprites/icons.gif

You use the image as the background to each of the links, moving it using CSS as required. On hover the CSS 'jumps' the image up.

The full article is
http://www.alistapart.com/articles/sprites

0
 
dcassAuthor Commented:
Turns out I didn't end up having to do this but will award the points because from what I know, the solution looks quite good.
0

Featured Post

Independent Software Vendors: 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!

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