Main Points

Unobtrusive Javascript Example 9

Well, we finally got up a script that has all the basic functionality to swap the contact image. It's even generalized to the point that the path to the image is passed as a parameter in the function call. I'd also like to generalize it in other ways. It'd be nice if this were a generalized rollover function so that any image could call it. Right now only the contact image will ever be swapped. The problem is that I believe this is diametrically at odds with another things I'd like to do. I'd like the function set up with generic name or id like "rollover2" so that I can simply

function rollover(newPath) {
document.images['rolloverImage'].src = newPath;
}
document.getElementsByName("rolloverImage")[0].onmouseover = function() {rollover("Images/ContactUsBoxHighlight.jpg")};
document.getElementsByName("rolloverImage")[0].onmouseover = function() {rollover("Images/ContactUsBoxHighlight.jpg")};

With more than a little help from our friends, we ironed out a couple trouble spots. First, this was not the original function. We had been using getElementById because we couldn't make getElementsByName working. The solution... it returns an array. We only have one item so it's an array of one, but it's still an array. In order to get it to work we had to add the [0] to specify the first location in the array getElementsByName. Then the entire rollover was activated and swapped by name attribute alone and we could get rid of the image id.

Skip to Main Points

Internet Explorer Tab Problem

Problem number two was getting the contact links to use something besides the name attribute. As it turns out, there is an alternative to using <a name="someStupidName"> You can specify an id for the target element. <a id="someStupidId"> works and you simply link to it with <a href="#someStupidId">. You don't technically have to use a target anchor, any element will do. But then the inpage links weren't working in Internet Explorer. Visually they would go to target element, but if you tried to tab further down the page, it started from the top. The solution to this particular IE problem? Use a target Link. Named anchors don't work, and even using an id only tabs properly in IE if it goes to a link, like so...

<a id="contactUs">
<img alt="Contact Us!" height="150px" width="150px" name="rolloverImage" src="Images/ContactUsBox.jpg" />
</a>

Using <a href="#contactUs"> will now link to the proper target anchor and IE tabs forward from the target link instead of the top of the page.

Well, I swear it worked at the time. However, while IE and FF will both tab to an ID, IE still won't tab further but goes back to the top of the page (whether you use a link or not). So we went to inserting an explicit tab index of zero, 0, for the target attribute. This makes IE work beautifully but now FF refuses to respond to the link at all.

[chroniclemaster1, 07/08/26]

This information on the tab problem has been superceded. We developed an entire testing page to look into the keyboard navigation problem in IE.

[chroniclemaster1, 07/09/06]

Skip to Main Points
<-- Back to 8. Passing Parameters
Continue to 10. Navbar - Condensing Event Handlers-->