Solved

asp mouseover image

Posted on 2008-10-26
3
284 Views
Last Modified: 2009-02-02
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
Comment
Question by:dcass
3 Comments
 
LVL 9

Accepted Solution

by:
Shahzad Fateh Ali earned 250 total points
ID: 22810392
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
 
LVL 7

Assisted Solution

by:Garve
Garve earned 250 total points
ID: 22817909
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
 

Author Comment

by:dcass
ID: 23534075
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Multiflying 2 Input Text On a Table 7 31
Create an automated page index 9 51
Html Table Looping (part 2) 5 27
Possible propagation problem 1 25
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question