Replacing Javascript Imagemap Menu to Individual Rollovers

[New2JavaScript]

Hi,

I'm using an imagemap rollover, but I'm trying to replace it with separate rollovers for each menu button, for load time and also so it's easier to edit/replace individual menu buttons. For some reason, I get spacing between each menu, and I can't figure out how to get rid of it.

Here's the code for the first menu item I currently have.

<a href="index.html"
onMouseOver="imageReplace('navToggleHome', 'navHome2.jpg')"
onMouseOut="imageReplace('navToggleHome', 'navHome.jpg')">
<img src="navHome.jpg" width="100" height="50" border="0" hspace="0" vspace="5" alt="home" name="navToggleHome">
</a>

If I add another one just below it, it creates the menu but with some spacing in between, so it no longer looks like what I already have with the imagemap. I want to create the same look, but just change the code so it's easier to edit for future.

Here's the URL:

http://www.eastvillagemovements.com/

Any guidance is greatly appreciated!!!

 

[monksnake]

If you show an example of what you are talking about I can help you out. As is, I don't know enough of your situation to help you based on what I looked at.


<.

 

[New2JavaScript]

Thanks for your response!

something like on

http://www.softcomplex.com/products/tigra_menu/

without the dropdowns.

I'm actually just trying to reorder the menu of

http://www.eastvillagemovements.com/,

but since it's an imagemap, I have to change many image files, so I was hoping to replace the entire imagemap with a separate rollover image for each menu button.

Any suggestions?

 

[New2JavaScript]

If you look at

http://www.eastvillagemovements.com/,

you'll see how I get these spaces...

 

[monksnake]

When I hover, I see an image that gets stretched across the entire menu area.

<.

 

[New2JavaScript]

Sorry about that! As you can see I'm having trouble! Check out

http://www.eastvillagemovements.com/aboutus.html,

which is where I'm having trouble. You can see here that the buttons aren't connected for some reason.

Because I'm using the same image names, the index file you saw is currently messed up like that.

Thank you!

 

[monksnake]

Ok I see what you mean. Put a float:left on all the <a> tags EXCEPT for the first one.

On your div class="pageContent" put a clear:left.

This should get rid of the gaps, which by the way is some stupid IE bug.

<.

 

[New2JavaScript]

I made the changes you recommended, but I'm not sure if I did them correctly as the problem still persists. Also, I notice that the first menu button is more to the right than it should be. If you compare it to the currently-misprogrammed index file, you'll see that the menu starts more to the left. Do you think it's two separate problems?

 

[monksnake]

My bad, add display:block to everyone of the <a> tags.

<.

 

[New2JavaScript]

still no dice
I tried replacing the float:left with display:block and also tried using them both - to no success. No changes are being displayed... Am I entering your code correctly?

 

[monksnake]

I'll take a deeper look into what your situation is.

<.

 

[monksnake]

I see, you have to add the CSS like this:

<a href="rates.html" [!]style="float:left; display:block"[/!]
onMouseOver="imageReplace('navToggleRates', 'navRates2.jpg')"
onMouseOut="imageReplace('navToggleRates', 'navRates.jpg')">
<img src="navRates.jpg" width="100" height="50" border="0" vspace="5" alt="rates" name="navToggleRates">
</a>

Make sure you spell display correctly too.

<.

 

[New2JavaScript]

that did the trick!

THANK YOU VERY MUCH!

 

[monksnake]

No problem.

<.

 

[New2JavaScript]

Thanks again.
I've now changed the entire website.
Can you tell me why when you go to the Photos page, the menu shifts slightly? I think it has something to do with the table...

 

[monksnake]

I see, you are using Firefox. Notice that the Photos page is the only one that has a scroll bar on it. That is what's causing the shift.

<.

 

[New2JavaScript]

Thank you again.