foobar on computers, software and the rest of the world

Image roll-over effects without code clutter

, posted: 27-Apr-2009 14:08

To make web-pages appear more dynamic and interactive, it has long been established practice to add mouseover effects to links and link-images: Hover with the mouse over a link and the link will optically change to provide the user additional feedback and indication that this is indeed something to click on. It's a nice touch.

Recently, I had to add such mouseover effects for a client. Since normally I don't work a lot on the front-end of web-pages, I'm really not much of of a JavaScript or CSS expert. So, I searched around to refresh my memory on how those mouseover effects are done. What I found was straight forward enough. It usually looked something like this (for example found here):

Code snipped for standard way to do mouseover image effects

[ My apologies: These code snippets are images, not text, since the editor for this blog software can't seem to handle quoting code very well. Especially HTML code. If someone knows how to put text as code here, please let me know and I will fix this. ]

Too much to type for every image: Code maintainability suffers

A couple of things bothered me about this code:

  1. You need to give the image a unique ID ('sub_but') and then need to refer to that ID in the anchor tag code. So, you need to type the name of the ID multiple times. And since the image is directly enclosed by the anchor tag, it is also annoying to have to do that. It seems like there should be a better way.

  2. You also need to spell out the image names in three different locations. Once in the image tag ('moveup.gif') and twice in the anchor tag ('movedown.gif' and 'moveup.gif' again).

If you have somewhat longer image names then all that typing can easily lead to typos. And the image IDs can be confused when code is being copied and pasted. Generally, it doesn't make for nice coding if you have to type the same thing multiple times, just to accomplish a single thing.

A slight modification on t his is also a commonly used pattern: A JavaScript function is used, to make it more universally applicable. But it still has the same problems:

Using a function doesn't really help much in this case: I still need to refer to the image ID and filenames just as often as before.

The solution: Inspecting the DOM tree

I wanted to change this. I didn't want to have to type image IDs and image names multiple times. I didn't want the surrounding anchor tag to have attributes that carefully and accurately need to refer to something contained within it (the image tag).

After a little bit of JavaScript hacking, I finally arrived at this here, which I like much better:

Improved HTML for image mouse overs

Note that now the image tag does not require a unique ID. Also the image name now only needs to be typed once. In addition, the JavaScript code for onmouseover and onmouseout is identical and does not require any image specific parameters. Thus, this is code that is easily copied and pasted and used in different places of your page and site without any modification, except that one image source. You can change the name of the image that is being referred to, and the surrounding HTML doesn't have to be modified. Less maintenance and less chance of introducing errors. Nice.

How does it work? Well, the imageRoll() function takes this as an argument, a reference to the surrounding object, in this case that is the anchor tag object. It then finds the first image object that is enclosed by the anchor tag. It extracts the filename from that image object. From that, it changes the name of the image source to either refer to the special hover image, or vice versa, as needed. Thus, the button image changes.

A few important assumtions are made: Let your non-hover link/button images end simply in .gif or .png while your hover images should have THE SAME filename, except that they end in something like ..._hover.png. That's reasonable enough, right? If you can fulfill these prerequisites then you are ready to go. All you need to do is to include this piece of JavaScript somewhere and modify the two variables imageRoll_hoverSuffix and imageRoll_nonHoverSuffix to reflect the naming scheme you have chosen for your button images:

Complete JavaScript for improved image rollover code.

Ok, so as I said: I'm not much of a JavaScript or CSS expert. And maybe what I wanted to accomplish can be done in much simpler ways. If so, please let me know.

Otherwise, enjoy!

Other related posts:
Apple demonstrates: With great marketing even the crappiest product can be sold

Comment by stuartm, on 27-Apr-2009 20:25

You can avoid javaScript altogether if you use css with the ":hover" tag and background images.

Comment by Cd-MaN, on 28-Apr-2009 01:03

A simpler way to do this (without any JS at all) would be to use the :hover CSS pseudo-selector. However it might have issues with older browsers like IE 6.

Author's note by foobar, on 28-Apr-2009 09:06

@stuartm, Cd-MaN: If I use the CSS :hover tag, would I not need to specify specific styles for each image link I want to use? The nice thing with the JavaScript solution, I though, was that you don't need to have specific styles per image or link, and that you don't have to specify any parameters of any kind.

Comment by Alexander Mikhalev, on 1-May-2009 01:21

Use a:hover, to set up such behaviour for all links.

Javascript for on mouse over is an old solution, CSS is much better tool for it.

foobar's profile

New Zealand

  • Who I am: Software developer and consultant.
  • What I do: System level programming, Linux/Unix. C, C++, Java, Python, and a long time ago even Assembler.
  • What I like: I'm a big fan of free and open source software. I'm Windows-free, running Ubuntu on my laptop. To a somewhat lesser degree, I also follow the SaaS industry.
  • Where I have been: Here and there, all over the place.

Google Search

Recent posts

Attack on net neutrality right...
Munich already saved millions ...
Iceland's public administratio...
More Apple madness (follow up)...
Apple demonstrates: With great...
Smooth sailing with the Karmic...
Censorship in New Zealand: Wid...
How about: Three strikes and Y...
UK government supports open so...
Blackout to demonstrate agains...

Top 10

How to write a Linux virus in ...
(11-Feb-2009 06:33, 480362 views)
Follow up: How to write a Linu...
(12-Feb-2009 08:10, 67595 views)
A truly light-weight OS: Writt...
(3-Feb-2009 10:39, 47993 views)
The 'Verified by Visa' fiasco ...
(20-Jun-2008 09:59, 34028 views)
11 reasons to switch to Linux...
(4-Feb-2009 09:24, 21413 views)
EEE PC with XP is cheaper than...
(9-May-2008 06:50, 21372 views)
Censorship in New Zealand: Wid...
(16-Jul-2009 12:11, 21111 views)
Would you use Google App Engin...
(8-Apr-2008 20:02, 21042 views)
Clippy for VI: What we all hav...
(22-Aug-2008 08:52, 17890 views)
Django Plugables: Tons of plug...
(11-Apr-2008 03:24, 17615 views)