I’ve been using the “rollovers” script from DHTML Utopia (an old Sitepoint book) for a long time. I love it. It still works in most browsers, but Chrome doesn’t like it. I’m hoping it’s an easy fix, and I don’t have to switch to something new…
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]function[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#000000] setupRollovers() [/COLOR][/SIZE]
[SIZE=2]{[/SIZE]
[SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]/*From DHTML Utopia by Sitepoint */[/COLOR][/SIZE]
[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]if[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] (!document.getElementsByTagName)[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]return[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]var[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] all_links = document.getElementsByTagName([/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]'a'[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]);[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]for[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] ([/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]var[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] i = 0; i < all_links.length; i++) {[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]var[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] link = all_links[i];[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]if[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] (link.className &&[/SIZE]
[SIZE=2]([/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]' '[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] + link.className + [/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]' '[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]).indexOf([/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]' rollover '[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]) != -1)[/SIZE]
[SIZE=2]{[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]if[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] (link.childNodes &&[/SIZE]
[SIZE=2]link.childNodes.length == 1 &&[/SIZE]
[SIZE=2]link.childNodes[0].nodeName.toLowerCase() == [/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]'img'[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]) {[/SIZE]
[SIZE=2]link.onmouseover = mouseover;[/SIZE]
[SIZE=2]link.onmouseout = mouseout;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]function[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#000000] findTarget(e)[/COLOR][/SIZE]
[SIZE=2]{[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]var[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] target;[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]if[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] (window.event && window.event.srcElement)[/SIZE]
[SIZE=2]target = window.event.srcElement;[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]else[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]if[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] (e && e.target)[/SIZE]
[SIZE=2]target = e.target;[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]if[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] (!target)[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]return[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]null[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]while[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] (target != document.body && target.nodeName.toLowerCase() != [/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]'a'[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2])[/SIZE]
[SIZE=2]target = target.parentNode;[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]if[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] (target.nodeName.toLowerCase() != [/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]'a'[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2])[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]return[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]null[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]return[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] target;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]function[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#000000] mouseover(e)[/COLOR][/SIZE]
[SIZE=2]{[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]var[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] target = findTarget(e);[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]if[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] (!target) [/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]return[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]//The only child node of the a-tag in target will be an img-tag[/COLOR][/SIZE]
[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]var[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] img_tag = target.childNodes[0];[/SIZE]
[SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]//Take the "src", which names an image called "something.ext",[/COLOR][/SIZE]
[/COLOR][/SIZE][SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]// make it point to "something-over.ext" with a regular expression[/COLOR][/SIZE]
[/COLOR][/SIZE][SIZE=2]img_tag.src = img_tag.src.replace(/(\\.[^.]+)$/, [/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]'-on$1'[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]);[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]function[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#000000] mouseout(e)[/COLOR][/SIZE]
[SIZE=2]{[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]var[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] target = findTarget(e);[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]if[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] (!target) [/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]return[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]var[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] img_tag = target.childNodes[0];[/SIZE]
[SIZE=2]img_tag.src = img_tag.src.replace(/-on(\\.[^.]+)$/, [/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]'$1'[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]);[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2][COLOR=#008000][SIZE=2][COLOR=#008000]// When the page loads, set up the rollovers[/COLOR][/SIZE]
[/COLOR][/SIZE][SIZE=2]window.onload = setupRollovers;[/SIZE]