Discuss: JavaScript Image Replacement
by Christian Heilmann
- Editorial Comments
2 Why not the ALT attribute?
Maybe I haven’t been following FIR enough, but I don’t understand what this method solves that the ALT attribute on images doesn’t.
What are the weaknesses of specifying ALT text that make needing to insert the text explicitly necessary?
posted at 04:37 pm on November 21, 2003 by Pete Hopkins
3 Safari and the missing ALT
The issue of Mozilla not showing the ALT text when showing images is toggled off also occurs in Safari. Interesting approach though.
posted at 06:00 pm on November 21, 2003 by Shaun Inman
4 Re: Why not the ALT attribute?
Pete, the reason FIR could be considered preferable to alt text specification has to do with display in PDAs, mobile phones, etc. Imagine you have a header image 600 pixels wide but a web enabled cell phone only has 300 pixels of horizontal real estate. You will be using twice you allotted horizontal space and get a horizontal scrollbar. With the FIR technique the cell phone/PDA user will see your header text instead of the genormous image with no horizontal scroller.
posted at 12:20 am on November 22, 2003 by Matt Ripley
5 Welcome to the future
It is the year 2003, and we are still trying to figure out the best way to swap an image on a web page?
I’m a big fan of web standards, mind, but it seems like maybe we missed something….
posted at 01:03 am on November 22, 2003 by Chris Perkins
6 CSS
I think this is a good script, but Matt Ripley hit it on the head. The beauty of using XHTML and CSS is it’s simplicity and wide audience.
In my opinion, adding an extra [span][/span] to layer my image over text is the best way. Overall, wether images off or CSS off, the page is still readable and, for the most part, usable in all browser types.
posted at 08:45 am on November 22, 2003 by Ryan Gasparini
7 Other method
Instead of creating a replaceImages array (which need to be updated all the time), wouldn’t it be better to replace images based on their name? For example if the image is foo.png, then you’d replace it with foo2.png. You’d need to use the string methods, but that would allow you to skip on the javasctipt script maintenance.
posted at 09:25 am on November 22, 2003 by Jean-François Bastien
8 My opinion
In my opinion JavaScript should add behaviour to the browser, instead of doing what CSS is capable of. But, the idea described in this article sounds a lot better than the cluttered CSS normally used to achieve this effect.
However, I don’t like the JavaScript code used in this article. I realize that this is because of how I’m used to code. I certainly won’t use this code on my own website, though chances are that I’ll write my own version/interpretation of it one day.
Jean-François Bastien: I think you’ve missed the point. This isn’t about swapping different images, it’s about replacing a textnode by an image.
posted at 11:32 am on November 22, 2003 by Mark Wubben
9 Nice thought, but...
I work with JavaScript on a regular basis in lots of situations and it has some great uses, but I don’t think that this is a good one. A couple things:
1. The script is poorly constructed. There are no local variables used, just globals, so this script has the potential to kill other scripts running at the same time.
2. It’s not pretty: It runs onload, so you are going to have to wait for the entire page to load (including images and media) and then your titles will change. This is going to look bad, especially on pages that are more than just text. Adding to the problem, if your title images aren’t tiny, you’re going to have to wait for them to load as well. Some of the problem could be solved by putting the function call at the end of the body, but I don’t think that’s an elegant solution either.
3. It isn’t properly debugged. If you have any whitespace before or after the title, the script won’t work in Mozilla.
I don’t mean to tear things apart, but it’s a bit disappointing to see these problems with something published here.
posted at 12:54 pm on November 22, 2003 by David S
10 ALA: promoting standards?
Why o why is this published? Simulating CSS effects (element{content:url()}) with JS is truly evil if the intended effect is not dynamic. This can even be done with valid XHTML 1.0 Strict (or 1.1), without even touching the CSS.
posted at 02:28 pm on November 22, 2003 by Anne
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)




1 Mozila and the missing ALT
The issue of Mozilla not showing the ALT text when showing images is toggled off is a known bug. The problem is that you have to restart the browser to get the ALT to show.
Bug: http://bugzilla.mozilla.org/show_bug.cgi?id=202904
posted at 02:16 pm on November 21, 2003 by Bill Mason