Image change on roll-over activates the wrong image

[bamboozled2224]

---

System: The following message was cut out of thread at: http://www.webmasterworld.com/css/4428189.htm [webmasterworld.com] by alt131 - 9:06 pm on May 23, 2012 (utc +12)

---

I searched the forum for this but couldn't find a similar case -so i'm just posting here!

I have one particular image that swaps perfectly fine as you mouse over it, but if you mouse over ANY OTHER image, it will activate the wrong image in a different place.

Very hard to explain - my problem is the "news" image half-way down on the left. Mouse over just that, it works just fine. But once you mouse over any of the other images, they all trigger that news image to swap to a seperate image. (ironically enough it is the 4th image on the second row that gets stretched into the little news box.)

does anyone have any idea what i've got going wrong here?

Thanks for you help.

[edited by: alt131 at 9:15 am (utc) on May 23, 2012]
[edit reason] Thread Tidy [/edit]

[milosevic]

It looks like you meant to include a link but forgot or it's been removed.

Need more info to work with, if you can't link the site then paste the relevant html and CSS

[rocknbil]

does anyone have any idea what i've got going wrong here?

Yes, and personal links are not allowed.

It really depends on how your mouseovers are set up (you can do it with CSS only or add Javascript) - but most likely you have duplicate ID tokens on multiple elements. Page element id's **have** to be unique, that's why they are ID's. :-) Look for stuff like this:

<li><a href="/news" id="news">News</a></li>
<li><a href="about" id="news">About</a></li>

Then also look at your CSS.

#news { background-image:url(/images/news-nav.gif); }
#about { background-image:url(/images/about-nav.gif); }

#news:hover { background-image:url(/images/news-nav-over.gif); }
#about:hover { background-image:url(/images/about-nav-over.gif); }

So in that case, the about link would show the news hover state because it has the same id ('news') and being the last element in the code order, might be the only one to react to the mouseover. (This is a really bad way to do mouseovers but that would do it.)

If it's done with Javascript, the issue will still be the same:

document.getElementById('news').onmouseover=function() { this.style="background-image:url(/images/news-nav-over.gif); };

So again it would hit all elements with the id "news".