...

View Full Version : Image highlight on mouseover text



CaptainB
04-21-2008, 07:47 PM
Hi guys!

I have a problem. I guess it's best illustrated if you get to see what I'm talking about. Go to this site: http://behrentzs.com/test/bnew/index.php

Focus on the first menu item called 'Home'.
What I really want is to highlight BOTH the text AND the picture when I mouseover the text.

Try to mouseover 'home'. Nothing happens to the picture. Try then to mouseover the picture. You see it changes to a colorfull one? That's what I want to archieve, but unfortunately it does only work when you hover the image and not the text. Any way to do so it changes to the colorfull one when you mouseover the text?

This is what I have:

<ul id="menu">
<li><a href=""><img src="images/icons/home_icon_bw.gif" alt="Home" onmouseover="this.src='images/icons/home_icon.gif';" onmouseout="this.src='images/icons/home_icon_bw.gif';"/>Home</a></li>
</ul>

mjlorbet
04-21-2008, 11:22 PM
function txtMouseOver(e){
var evtModel = e?e:event;
var tgt = evtModel.target?evtModel.target:evtModel.srcElement;
var collection = this.parentElement.childNodes;
for(var a = 0; a < collection.length; a++){
if(collection[a].tagName)
if(collection[a].tagName == "img")
collection[a].src = "images/icons/home_icon.gif";
}
}
function txtMouseOut(e){
var evtModel = e?e:event;
var tgt = evtModel.target?evtModel.target:evtModel.srcElement;
var collection = this.parentElement.childNodes;
for(var a = 0; a < collection.length; a++){
if(collection[a].tagName)
if(collection[a].tagName == "img")
collection[a].src = "images/icons/home_icon_bw.gif";
}
}


probably will need some tweaking, but these functions should be used for the onmouseover and onmouseout events on the anchor

CaptainB
04-22-2008, 09:23 AM
I'm not that keen on javascript, so I have to ask for a little more help :)

I'd inset the code above in my <head> section and linked it this way:


<ul id="menu">
<li><a href="" onmouseover="txtMouseOver();"><img src="images/icons/home_icon_bw.gif" alt="Home" />Home</a></li>
</ul>

But that doesn't work, so I guess I'm doing something wrong?
I also tried to insert the onmouseover call to the img and the li tag instead, but that didn't work either.

abduraooft
04-22-2008, 09:27 AM
I'd do it completely with CSS.
Create a single image by combining the two (normal and mousover images) and apply it as the background of <a>.
Then change the background position (y value) along with the text color to get the required effect.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum