AboutAndrew Hoffman Expertise I can field just about any question within this topic ranging from JavaScript to CSS, the two ingredients of DHTML. I`m very interested in the W3C and its validation rules for HTML, XHTML, and CSS, and enjoy answering questions of this type as well. I detest sleep and respond at all hours of the day or night.
Experience Experience in the area I've been working with DHTML and CSS for 7 years now and build/maintain websites of my own that implement DHTML navigation.
What I'm doing now My contract with Microsoft has ended and I am working for myself once again. Please contact me for any front-end work at antibland@gmail.com
Question Hi Andrew:
I was wondering if you could help me. Firstly, thank you so much for all the information at allexperts.com.
It has come in amazingly handy and has helped so much and in fact I think I may have sent you this question before, so if I did please forgive me.
My question is a javascript coding question that I am absolutely desperate for an answer for.
I have a two images, image1.gif and image2.gif. When you roll over image1.gif it becomes newimage1.gif and image2.gif becomes newimage2.gif. So you roll over one and both change. No problem there. The only other thing I want to do is to get one of the new images - newimage2.gif - to be an image map.
The code I have now is:
<head>
<SCRIPT language="JavaScript">
<!--
if (document.images) {
pic1on = new Image(226, 93);
pic1on.src = "images/newimage1.gif";
pic2on = new Image(684, 296);
pic2on.src = "images/newimage2.gif";
}
This is the way images maps are done today. The nice thing is that, using only CSS, we have total control over the map 'slices' using small, absolutely positioned links to represent each slice. It will take you about 20 minutes to learn this method, but it's much more sustainable then using this clunky JavaScript approach. The nicest thing is that you won't need JavaScript at all for this.
Here's a the crux of the article:
"Specifically, we’re going to replace old-school image slicing and dicing (and the necessary JavaScript) with a CSS solution. And because of the way CSS works, we’re going to take it further: by building a grid of images and devising a way to get each individual cell out of the grid, we can store all buttons/navigation items/whatever we wish in a single master image file, along with the associated “before” and “after” link states."
If you have problems when implementing this approach, please write and I'll help you along.
