homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Image change on roll-over activates the wrong image

Msg#: 4456864 posted 6:31 am on May 23, 2012 (gmt 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]



Msg#: 4456864 posted 1:37 am on May 28, 2012 (gmt 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


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

Msg#: 4456864 posted 5:12 pm on May 29, 2012 (gmt 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".

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved