Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    Image highlight on mouseover text

    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:
    Code:
    <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>

  • #2
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    Code:
     
    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
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • Users who have thanked mjlorbet for this post:

    CaptainB (04-22-2008)

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    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:

    Code:
    <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.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    Last edited by abduraooft; 04-22-2008 at 09:29 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    CaptainB (04-22-2008)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •