Problems with MouseOver to Change Image for Buttons

[LifeInBinary]

RESOLVEDHey guys, I've been using w3schools.com for a month or two to learn HTML - but I'm new to forums, and this is only my second post - so let me know if I'm doing anything "wrong". I'm having this crazy issue with some HTML I'm writing for my own personal website. I haven't hosted it yet - I'm just doing it all in a folder on my desktop first to get it all working together how I want it. I believe this is an simple problem with an easy solution that I haven't come to yet, but I'm having a pretty hard time getting past this so any help would be greatly appreciated.HERE'S THE PROBLEM: I've got an image that I am using as a navigation bar. It is in a separate nonscrolling frame at the top of my page. I have made six different regions out of the image to use as buttons by turning the image into an imagemap and setting the desired coordinates. I have also made six other images that retain the original coordinates, and they each show the navigation bar with the desired button "depressed". These are the images that I am trying to switch to when the mouse is moved over the coordinates of the corresponding buttons. How do I do this? I think I figured out how to make one single image change to a different image on mouseover - but it seems like a completely different ball game when I'm trying to make six different sets of imagemap coordinates change the entire image!Somebody PLEASE try to help me with this! I'm fairly new at this, but I'm a very fast learner and I think I'm doing pretty well for a beginner.Here is what I've got so far. Note that I haven't even attempted the MouseOver stuff yet because I don't want to mess up the code that is already working.--------------------<img src="navbartop.png" alt="navbartop.png" width="857" height="41" border="0" usemap="#navbartop"><map id="navbartop" name="navbartop"><area shape="rect" coords="15,5,152,36" alt="Home" href="home.html" target="home"><area shape="rect" coords="154,5,290,36" alt="Images" href="images.html" target="home"><area shape="rect" coords="292,5,428,36" alt="Websites" href="websites.html" target="home"><area shape="rect" coords="430,5,566,36" alt="Downloads" href="downloads.html" target="home"><area shape="rect" coords="568,5,704,36" alt="Lists" href="lists.html" target="home"><area shape="rect" coords="706,5,843,36" alt="Contact" href="contact.html" target="home"></map>--------------------What do I need to do to this code in order to display homebutton.png when the mouse is over the coordinates "15,5,152,36"?What do I need to do to this code in order to display imagesbutton.png when the mouse is over the coordinates "154,5,290,36"?What do I need to do to this code in order to display websitesbutton.png when the mouse is over the coordinates "292,5,428,36"?What do I need to do to this code in order to display downloadsbutton.png when the mouse is over the coordinates "430,5,566,36"?What do I need to do to this code in order to display listsbutton.png when the mouse is over the coordinates "568,5,704,36"?What do I need to do to this code in order to display contactbutton.png when the mouse is over the coordinates "706,5,843,36"?

[scott100]

I don't think you can do what your asking with imagemaps What i would advise is slicing up your navigation image (navbartop.png) into 6 different images, 1 for each button. And then also creating another 6 for the rollover effect.Then use some code like this

<a href="home.html" alt="Home" target="home"><img src="homebutton.png" onmouseover="this.src='homebutton2.png'" onmouseout="this.src='homebutton.png'"></a>

<a href="images.html" alt="Images" target="home"><img src="imagesbutton.png" onmouseover="this.src='imagesbutton2.png'" onmouseout="this.src='imagesbutton.png'"></a>

etc etcSo you will need 12 images in total, normal homebutton and a rollover homebutton etc etc

[LifeInBinary]

Thank you scott100. While it is unfortunate to learn that certain image coordinates can not be changed upon mouseover in HTML, you have provided me with a very appropriate alternative for what I am trying to accomplish. I was thinking all along that I could do that instead of having one image depicting all the buttons and the nav bar in one image - but I really didn't want to deal with the hassle of more image editing in order to put the nav bar with the background so that I could have the images for the buttons change only when the cursor was actually over the button - and not just close to it. I guess I'd better go ahead and roll up my sleeves for another big bad 45 minutes of image editing - because all I'm using at this point is MS Paint and Notepad. Hardcore baby! Lol.

[jlhaslip]

Check out http://www.cssplay.co.uk for some truly stunning css adaptations using images. Amazing stuff.