JavaScript Image Replacement

by Christian Heilmann

57 Reader Comments

Back to the Article
  1. PPK -I respect you, but am amazed at your ‘unprofessional reaction’. You have unnecessarily chosen the moral high ground. I am looking for a teacher, one who will guide us through the crazy technical imperfections of web techniques and web browsers and the difficulties faced by programming. You have the capability to teach and teach well. When a teacher approaches with respect, he gains immeasurable esteem. I don’t see the ‘zeldmans’ of this world flinging mud when I do something stupid or imperfect. They sit down and patiently re-explain… and hope that this time the penny will drop. (By the way: when in their shoes I usually chirp “why do I bother!” – not ideal either).

    No one way to Rome: The way we thought about image replacement is different now to six, months ago, last year, next year, whatever. Mobile devices and the publics use of them still have to really come of age. We struggle to understand new concepts all the time and adjust our perception of reality constantly. My cristal ball says we will use sever side sniffers to recognize the device and then serve the documents on the fly with xslt. White papers or protocols will tell us what the device wants to see. Hopefully (I know, I’m being over optimistic) there will be a handful of generic devices and generic xslt files to get get the stuff on da street.

    Copy & paste the code below to embed this comment.
  2. >> Why not just use the “text-indent:-100px” method which does all this

    > Unless there is an enhancement I don’t know of, this fails in Win IE5. It applies the negative indent to the background image and therefore displays nothing

    Can’t say I’d seen that bug reported anywhere and I just tried my site ( on the IE5 test machine at work (IE5 on Windows NT SP6) and it works perfectly.

    That’s not to say there’s not a problem in certain circumstances, but certainly in on my site and on that machine, all works fine.

    Feel free to take a look at the source.

    Copy & paste the code below to embed this comment.
  3. >PPK, I agree with what Patrick just said. I
    >don’t disagree that the errors were present. >QC could have been better on the article.
    >It was definitely your handling of the issue
    >though, that has sparked many of the comments
    >above. I still say you could reflect on it a
    >bit and re-write your response.

    Ah, hell, Tom, maybe you and Patrick are even right, I don’t know any more.

    It’s just that there is so bloody much JavaScript trash floating around the Web, and ALA may be turning into the umpteenth JavaScript junkyard, deceiving the innocent newbies who come here for guidance.

    Yes, I feel defensive about my idea. I think it’s important, not in itself but for the fundamental issues it reveals. I’ve never been shy about sharing my ideas, though. Anyone who wishes to extend or criticize it, please go ahead.

    But when someone writes an article about my idea on ALA, of all places, and he doesn’t even notice that there are fundamental issues to be considered, or that his script is just plain bad, and his editor doesn’t notice either, I get angry and sad.

    Unjustified, maybe, but human.

    I feel I’m fighting a losing battle for using JavaScript responsibly, while dozens of script kiddies mangle it up beyond recognition because they can’t look beyond the wow-factor. And if even ALA actively supports this irresponsible behaviour out of sheer ignorance, what am I to do?

    I lash out. Not particularly constructive, true, but I had to get this off my mind. And I still feel that, though I may have been too harsh on Heilmann, if anything I’ve been too soft on ALA.

    Copy & paste the code below to embed this comment.
  4. When I first learned of, I said “Wow!  This is EXACTLY what I’ve been looking for.  The guy behind this knows exactly what he’s doing.”

    Now I’ve seen the real guy behind  Peter-Paul, you have acted in a manner that no matter how you look at it is unprofessional.

    This may be a lost cause, but I’ll continue anyway. 

    Yes, you may be the best javascript coder out there.  Your ideas may be truly unique and you may be the guy who pioneers things most of us could only dream about.

    However, there is a trait that commands much, MUCH more respect than simply being an innovator.  That, my friend, is humility.  In my opinion arrogance will get you nowhere. 

    I read the ALA article and agreed with you, the author’s code is not up-to-snuff.  I will not use the technique on my site nor do I think Christian is an advanced Javascript developer or quality technical author.  These, however are traits that can be developed with practice and time. 

    For the technique itself, yes, your code is about as good as it gets for JIR.  I would use it in a heartbeat, if I agreed with JIR in the first place.

    The bottom line though, as many have stated, is not your code nor your comments on Christian’s abilities as a Javascript developer or author.  The problem here is a serious lack of respect for another individual and the lack of humility that, as I said earlier, commands much greater respect than unique thought. 

    I strongly encourage you to take the high road and end the ongoing flame war.  Rethink how you’ve worded your article.  Everything in there is “my code is better than yours (which sounds very similar to a ‘my daddy could beat up your daddy’ argument I heard on the playground in third grade.” 

    Yes, you back it up with facts, but a simple statement (as I think someone commented elsewhere) of “A better option would be to…” would make your article a much friendlier read and I guarantee would receive a much friendlier response from those of us in the development community who enjoy learning from innovators such as yourself.

    Honestly, I have learned a great deal from  As soon as I visited, I learned something that I implemented on a client site that very day. 

    However, it is very difficult to trust and learn from a person who it is hard for me to respect.

    Copy & paste the code below to embed this comment.
  5. Just to repeat the best solution ever made:

    I was close to post this link and saw that moose did it by himself. The only real solution. Congrats moose.

    Sorry to Helmann – I didn’t know the case background but it is also your fault: you should answer much earlier on ppk claims:) (:(()

    Copy & paste the code below to embed this comment.
  6. Michael-

    That script looks pretty decent, except it looks like it could cause some memory leaks.  You may want to try and stick with local variables when possible and not keep too many references to HTML elements.  You run into circular references pretty quick.

    Copy & paste the code below to embed this comment.
  7. How could I answer to PPK’s claims if I didn’t get any? I had totally forgotten that the article is out today. On my evolt articles I get an email when a message comes in, a feature this “forum” doesn’t have.

    I like moose’s solution, it is the correct one and will be a big success in some year’s time.

    But what do you do now, when a client wants image replacement and it should work on IE5, 5.5 and 6?

    I was more insulted by your post than by PPK’s to be truthful. He claimed that the dash in his name is not much of an issue, you tried yourself on sarcasm about it. A kind of neener neener behaviour. PPK doesn’t need anyone defending him, he publishes articles when he thinks there is a need for it.

    I updated the script with some of the improvements asked for here, this is the learning I have taken and the action I have done. Not too good, but a start, and a lot more than just ranting on and blowing the horn of one or the other side.

    Maybe I am not as good an editor as I think I was (I surely released this one too early and we surely didn’t look over it well enough before publishing it). I do know some bits though and I am not a script kiddie as hinted and claimed here. 

    Can we keep this in levels that are productive?

    Some articles on ALA were wicked when they came out and make you cringe now. They got updated, that is the whole idea. When DHTML came out, the Dan Steinman site was a killer, now we know much of it was bloated and just not future proof.

    I respect PPK a lot, and I respect a lot of people knowing much of CSS to come, I just wished that instead of bickering here we could just work together on the same problem, hey, I am game. If I am not good enough, I try to improve, if I just hear hostility and unproven accusations, I shut up and do something more productive.

    Copy & paste the code below to embed this comment.
  8. Since Tom and Patrick were dead right I significantly altered my critique of this article. It has become softer on Heilmann, but considerably harsher on ALA.

    Copy & paste the code below to embed this comment.
  9. >Ah, hell, Tom, maybe you and Patrick
    >are even right, I don’t know any more.

    >It’s just that there is so bloody much
    >JavaScript trash floating around the Web,
    >and ALA may be turning into the umpteenth
    >JavaScript junkyard, deceiving the innocent
    >newbies who come here for guidance.

    1. Nice rewrite. That’s so much better. My respect for you is now intact! ;) (jk)

    2. To the JS issue: You are mostly correct – and maybe this is straying off topic for this comment thread, not sure. I learned JavaScript by myself starting in 1996-7 and I can’t tell you how many times I got frustrated as a beginner when I went somewhere that had junk code.

    Now as someone who is somewhat considered an “expert” (hate the term) which I really am not (trust me), I STILL find the same problem which you allude to when I search for scripts/articles today. In some way the article OR the explanation (or both) fail.

    Unfortunately I think its the nature of the online publishing. But I agree, we can hold ALA to a higher standard. I expect, knowing the people behind ALA, that they will learn from this as far as quality control goes.

    Anyway, don’t wanna ramble! Cheers…


    Copy & paste the code below to embed this comment.
  10. PPK’s updated response is much better.

    I’m still a little peeved about his comments about JavaScript in general on ALA because I think the article I wrote with Dan Webb ( is a good use of good JavaScript (and there is some response to this at

    Still, I hope that you take this further and draw it to the attention of the ALA people (it would be good to hear from them on this matter, here or on maybe). Maybe you could be the JavaScripter on their editorial board, as you suggest.

    I hope there are no hard feelings.

    Copy & paste the code below to embed this comment.
  11. re: … Heilmann (write it any way you want)

    Sorry Chris… it was my lapsus kalamis.

    :: How could I answer to PPK’s claims if I didn’t get any?

    I meant on his post in ALA. When I first time read all (three days before) his replay were already here. Two days passed but it was totally ignored (looks like that yesterday).

    :: I like moose’s solution *** But what do you do now, when a client wants image replacement and it should work on IE5, 5.5 and 6?

    It is the question of web (web-publishing) understanding (imho): just to use scale-principe and to compare this: IE (x.yy) clients do not see the image but they have no any clue that image should be there – they just see the nice, real(!) heading (written by text and displayed by chosen style (font…)) which could be selected, copied etc… second case is that some other client, with strange browsing attitude (could browsing attitude be called as ‘strange’ at all?) means javascript on and images off doesn’t see the image, doesn’t see the real heading but see that ‘beautiful’ well known alt-image-replacement. So, I would not discuss in the field ‘What if…’ – just which of cases above author, you or anybody else, do prefer (maybe sometimes it depends on site content… maybe not). In moose case also, author do not need to write any of that meaningless warnings as ‘Headings on this site are represented by images…’ etc… means: ‘please do switch this or that on or of…’…

    :: I was more insulted by your post than by PPK’s to be truthful.

    Good. It was the base idea – to push you on some action.

    :: He claimed that the dash in his name is not much of an issue, you tried yourself on sarcasm about it.

    ppk has ©opyright on his own name of course but has not (neither you)  copyright on inappropriate using of any person name in global so, as long as I am protecting his name, I am protecting my own name also or anybody else’s in the future.

    :: PPK doesn’t need anyone defending him***

    The same as above: I do not know him really but I didn’t like the case. My small two cents for better world tomorrow if you know what I mean (I think you do).

    What I also think is that conflict is finished: you have nice attitude and ppk is also back when read your answer. Nobody knew that you really did everything on the correct way (pre-publishing issues) but ppk didn’t know that also:)) so: you forgive him, he forgives you and all ok.

    :: I respect PPK a lot, and I respect a lot of people knowing much of CSS to come***

    Somebody here mentioned that all of this is because you are not one from ‘big five’ (or ten or hundred) well known web-developers… it is not true: I do respect few well known people also (why should not) but I was really shocked when saw moose ideas;  I’ve spent a lot of time browsing that site and sites of few of his friends. So fresh, so original… I mean we should respect work – not names only.

    Re: “I was more insulted…” I do apologize to you (so easy always to say that – never late) for your insulation but I can not apologize for my post. If you’d answer on ppk’s post faster, earlier, I’d never comment any article about javascript techniques (real amateur here – maybe just would post the moose solution link). So, Chris, I really want you to accept my ‘beg pardon’ and am sure that you will.

    At the end: I also can not understand people who are ‘abused’ with emotional ppk’s comment: sure that it had to be emotional – he did’t know that Chris wrote to him. At that time, his answer were so human, understandable, adequate… and good that Chris made everything clean.

    Copy & paste the code below to embed this comment.
  12. yes, I just this morning realised that the article has been published, as I spent the whole weekend with my girlfriend watching old Hitchcock movies as the weather was too foul to go out, and she doesn’t have a computer.

    Real life, sorry :-)

    Generally I like PPKs new article a bit more, he could have taken in account the changes I made to the script on it’s homepage (as stated in the article, the place where changes will happen), but you cannot expect everyone to check all before publishing an article.

    I also cringe a bit at
    “Worse, by publishing such articles ALA actively promotes a sloppy, irresponsible coding style that sharply diverges from the accessibility, web standards and structural coding the magazine purports to promote.”

    As adding an invalid attribute is not web standards, sorry.

    One of the big advantages of my version (and I would gladly include the loading of the image bit that makes PPKs version superior – albeit I won’t until he agrees that I can do that) is that the markup does not need any specialities. This may sound anal about xHTML, but there is a reason for it:

    I was also doing this script as a client needed it. They want it, yes, they want graphical headlines, and search engines should find the headlines, and they want them all in IE 5.5+. Furthermore they want WYSIWYG editing in the CMS, which means we get after we run the tagsoup created by WYSIWYG through and XSLT sheet, clean HTML, but we have no chance to add ids or, for that matter, even invalid attributes. Reading the content of the H1 and generating an image file name from it is not an option either, as we are working in 12 languages, including special characters which could easily result in headlines getting the wrong image.

    Now, this is a big project, big money, and everything the client wants.

    One example where my script DOES make sense. Not everything the article claims it does, but it works.
    The client can happily edit their articles and they get an extra field to add all the images.

    Copy & paste the code below to embed this comment.
  13. As Tom T pointed out, you can easily add custom attributes to XHTML as long as they are properly namespaced.

    Copy & paste the code below to embed this comment.
  14. I’m so glad PPK has shown us his true colors. Nothing worse than a confident dork.

    Copy & paste the code below to embed this comment.
  15. .

    Copy & paste the code below to embed this comment.
  16. >Generally I like PPKs new article a bit more,
    >he could have taken in account the changes I
    >made to the script on it’s homepage (as
    >stated in the article, the place where
    >changes will happen), but you cannot expect
    >everyone to check all before publishing an

    Chris, I’m trying hard not to pick on you, but your comment is such a perfect handle for this important lesson that I couldn’t resist posting it.

    Publishing on a Serious Webzine: lesson 1

    If you publish so much as a word on a serious webzine like ALA, you cannot go back on it. Your article has to be perfect before you submit it.

    Chris, if you’d written your article anywhere else than on ALA I probably wouldn’t have noticed it, and if I had I’d have ignored it. I wrote my article solely because you chose to publish it on ALA (and because its editors chose to let it stand).

    I exclusively focus on your ALA article because ALA is a highly visible and respected webzine, and by default your article becomes highly visible and respected, too. It is this visibility and respect that I object to, and not the mere fact that you wrote your article.

    The next time you publish anything on a serious webzine, please make sure that it is perfect before submitting it, not after.

    Copy & paste the code below to embed this comment.
  17. I’m going to respond briefly to some comments made in this forum, and then I’m going to close the forum as it no longer serves as a calm or useful place for professional discussion of the ideas described in the article.

    Saturday morning I saw PPK’s first post ( and did three things in response:

      1. Article edit: linked to PPK’s current personal site, Quirksmode, per his suggestion.

      2. Article edit: corrected the spelling of PPK’s name, i.e. added the hyphen between Peter and Paul. PPK used to be an ALA author; I know how his name is spelled and would likely have caught the error if I had edited the article.

      3. Internal staff discussion: discussed PPK’s underlying point with the ALA staff and invited J. David Eisenberg ( to join us as a technical editor in the areas of XML and the DOM — to which David graciously consented.

    David is a programmer, the author of a fine O’Reilly book on SVG, a co-founder of The Web Standards Project, and was a technical editor on my second book, Designing With Web Standards. His ALA bio page lists many of his past articles for A List Apart; more will be listed as soon as they are reformatted. David’s participation will help ensure that content quality in his area of expertise remains as high as ALA’s content quality in other areas.

    I considered these three actions an appropriate response: one that would make things better going forward. Anything else — such as responding in kind — I considered inappropriate.

    When we receive negative criticism, whether it’s discreetly handled in a private email message or posted publicly, and whether it’s delivered tactfully or not, we ask ourselves if there is merit to the complaint. If there is merit, we ask ourselves what we can do to improve. And then we take the necessary actions. And that is all that is needed.

    ALA tends to attract a considerate, professional crowd. Intelligent comments in the forum can be as useful and illuminating as the article to which they pertain. That is why we host a discussion forum.

    Our discussions rarely get hijacked and derailed, but if they do get bent out of shape, all we can do is shut them down. This forum is now closed.

    Copy & paste the code below to embed this comment.