Ars Informatica
August 19, 2017
Home
Health Care Informatics
Web-based MySQL/PHP Databasing
Programming
Web Development
Favourite Software
Hardware for the Frugal Fanatic
Graphic Design and Image Processing
Free Scripts and Software
About Us
Contact Us
Links
 
 

 Article Feed for this site

Rollover Images: CSS, Flash, or Javascript?

August 25, 2008

Rollover images - you know, those links on a web page that change in appearance to let you know you're hovering over them - are now a de facto web design standard. Done right, they add to an already classy site design. But, on the implementation side, they throw up a difficult question:

How do you build them? CSS, Flash, or Javascript?

Each method has advantages. Each method has tens of thousands of adherents. Each works.

I've used each method, more than once or twice - so I will attempt to present a relatively balanced review of their pros and cons. And I'll tell you why I mostly use and recommend Javascript.
 

CSS

CSS, or Cascading Style Sheets, are used to define how HTML elements should be displayed: sizing and positioning, fonts and colors, etc. Using external style sheets helps produce web sites that are consistent in design, with a minimal amount of code written. CSS is extremely helpful to a web developer, and yes, CSS can be used to create image rollovers.

It's tempting.

Biggest advantage: all decent browsers handle CSS code - this includes effectively all browsers in current use.

I do use CSS for graphical but non-image-based links, i.e.

Home Projects 3D SketchUp Models Sources

(part of the page navigation bar on woodwork.ars-informatica.ca, and pure CSS.)

It's perfect.

But for image-based rollovers, I have several objections. One, an obvious and distracting flicker that occurs whenever Internet Explorer swaps images using this technique. There's no way around it, and it looks very unprofessional.

Two, the somewhat variable interpretation of CSS code by different browsers. Variable positioning or sizing of the elements in question, or their parent elements, can create a page that looks great in one browser, and looks strange or even completely broken in another.

Finally, it's a little trickier than a Javascript rollover, but that's not really an objection.
 

Flash

First - I will confess that Flash is my least-preferred way of coding rollover images. I have a love-hate relationship with Flash. My own web sites do not use Flash elements, though third-party sites we've developed sometimes do, to great effect.

Well-done Flash is slick, beautiful, seamless. Too often, though, Flash sites are just flashy. Busy "look what we can do" animation trumps good design. That's a simple, philosophical objection, and easily countered. Quality Flash and good design are not mutually exclusive.

My biggest concern: not all browsers have Flash installed - though Internet Explorer does. Firefox, used by 42.6% of your site visitors at this writing, does not. To show Flash, a special download must be installed. This is not difficult, but many folks don't. Some can't be bothered. Others have been burned before, installing apparently-legitimate downloads they shouldn't have.

Simply: if they don't have the Flash plug-in, your site won't work. The rollovers won't appear, and the site navigation links won't be there.

A secondary, significant concern with Flash is that web search engines like Google, Yahoo and others won't see the links embedded in the Flash animations. These are often to your most important pages, and search engines may not even see them! let alone credit them for their relative importance on your site. What search engines can't see, or judge unimportant, is unlikely to ever be found ...

Final objections: Flash requires more work to create, it requires the purchase of third-party software, and often produces larger files that take longer to download.

For content-rich, movie-like presentations that you simply can't deliver in HTML, please use Flash. For image rollovers, please don't.
 

Javascript

As I noted above, I recommend Javascript rollovers. 95% of web visitors have Javascript enabled, as of this writing.

The nice thing - even if Javascript is disabled - the rollover may not work, but the page does. It displays properly. The link is functional. And web search engines have to trouble following your link and indexing your pages.

There are different ways to implement Javascript rollovers. I prefer as simple as possible. However, I insist that the rollover occurs instantly when a user hovers over the rollover link - and that means the browser must have already loaded the image into memory. The following example comes from my woodworking site at woodwork.ars-informatica.ca.

Step one - load Javascripted image variations into memory when the page loads. This code goes in the <HEAD> section of the web page, together with the very simple rollover() function.

<script type="text/JavaScript">
	if (document.images) {
		img_resources = new Image
		img_resources_white = new Image

		img_resources.src = "index_menu_resources.jpg"
		img_resources_white.src = "index_menu_resources_white.jpg"
	}

	function rollover(refName, img) {
		if (document.images) document.images[refName].src = img.src
	}
</script>

Step two - create the basic image reference.

<a href="http://woodwork.ars-informatica.ca/sources.php"
onmouseover="rollover('href_resources', img_resources_white)"
onmouseout="rollover('href_resources', img_resources)">
<img name="href_resources" src="index_menu_resources.jpg"></a>

Onmouseover and onmouseout are Javascript events that trigger replacing the image identified by the name="" statement in the <IMG> tag. The rollover function takes two arguments. The first, in single quotes, is the target image name; the second, without quotes, is the name of the new image to be displayed, as defined in the Javascript declaration from step one, i.e.

rollover('href_resources', img_resources_white)

Here's the result:

And again, you can view the full page at woodwork.ars-informatica.ca.

The downside: you rely on Javascript being enabled. As explained above, this is not a big concern. And feel free to use and adapt my code, should you chose.

Copyright © 2017 Ars Informatica. All Rights Reserved.