Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Image change on roll-over activates the wrong image

6:31 am on May 23, 2012 (gmt 0)

New User

joined:May 23, 2012
posts: 1
votes: 0

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]

1:37 am on May 28, 2012 (gmt 0)

Full Member

5+ Year Member

joined:Dec 30, 2009
posts: 249
votes: 0

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
5:12 pm on May 29, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

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".

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members