You are here:

DHTML/Question for Andrew

Advertisement

Expert: Andrew Hoffman - 6/21/2009


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";
   }

   function lightup(imgName, imgName2) {
       if (document.images) {
           imgOn = eval(imgName + "on.src");
           document[imgName].src = imgOn;
           imgOn2 = eval(imgName2 + "on.src");
           document[imgName2].src = imgOn2;
       }
   }

   
//-->
</SCRIPT>
</head>
<body>
<A HREF="" onMouseover="lightup('pic1','pic2')"><IMG SRC="images/image1.gif" name="pic1" width="226" height="93" border="0"></A>
<br>
<img src="images/image2.gif" name="pic2" width="684" height="296" border="0">
</BODY>


Do you know what I would have to add to the code to make this happen?

If you have any idea and would be able to provide me with the information it would be GREATLY, GREATLY appreciated. Again, I am desperate.

Thank you for listening and thank you again for all the good work you do.

Sincerely,

Ari Strauch

Answer
Hi Ari,

I don't think you're that close to success going this way.  Please try this out instead: http://www.alistapart.com/articles/sprites/

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.

Andrew

DHTML

All Answers

Answers by Expert:

Ask Experts

Volunteer

Andrew Hoffman

Expertise

Ask me about JavaScript, CSS, HTML5/XHTML, or PHP. Chances are I'll be able to help you. I know the economy is in the tank, but if you like my answer, please consider donating a few bucks. It's like tipping your barista, if your barista served fresh code instead of coffee.

Experience

I started doing this when boy bands were still cool.

Education/Credentials
I read a lot of nerdy books to get here.

©2012 About.com, a part of The New York Times Company. All rights reserved.