Make an image appear on hover with Jquery

I looked around online and could not find a specific answer or tutorial on what I would like to do with my hover navigation; The most I found was jquery coding for an image animation or background image animation.

My navigation at the moment is set up with a fade to a different color over hover at the moment. What I would like to do also is that when someone hovers over the navigation, not only does the link fade to a different color (Which I have working), but I also want a arrow image I have to appear to the left of the text. I'd love for it to fade with the text too, but if thats impossible, I'm not picky. To clarify, I do not want the arrow to be shown when the link is not being hovered over.

If it helps at all, here is the current fading jquery I have:

this.fadeLinks = function() {   

var selector = "#nav1 a"; 
var speed = "slow" 

var bgcolor = "#6c919a";    


$(selector).each(function(){ 
    $(this).css("position","relative");
    var html = $(this).html();
    $(this).html("<span class=\"one\">"+ html +"</span>");
    $(this).append("<span class=\"two\">"+ html +"</span>");        
    if($.browser.msie){
        $("span.one",$(this)).css("background",bgcolor);
        $("span.two",$(this)).css("background",bgcolor);    
        $("span.one",$(this)).css("opacity",1);         
    };
    $("span.two",$(this)).css("opacity",0);     
    $("span.two",$(this)).css("position","absolute");       
    $("span.two",$(this)).css("top","0");
    $("span.two",$(this)).css("left","0");      
    $(this).hover(
        function(){
            $("span.one",this).fadeTo(speed, 0);                
            $("span.two",this).fadeTo(speed, 1);
        },
        function(){
            $("span.one",this).fadeTo(speed, 1);    
            $("span.two",this).fadeTo(speed, 0);
        }           
    )
});
};

$(document).ready(function(){   
fadeLinks();
});

Here is the css for the navigation:

#nav1 {
width:730px;
top: -380px;
left: -2px;
font-size:20px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#ffffff;
padding-top:6px;
padding-bottom:10px;
position:relative;
text-align:center;
line-height:30px;
}


#nav1 a{
font-size:30px;
font-family: Tahoma, Geneva开发者_运维知识库, sans-serif;
color:#fff;
text-decoration:none;
}
 #nav1 a span.two{
color:#069;
cursor:pointer;
}

The arrow image I want to appear is "images/arrow.png". I believe for this type of thing I'd need to put the png bug in my coding for IE, yes? Also, if I'd need to put something in my actual html for this, let me know. Thanks in advance!

'Cloudy',

Below should give you what you are asking for. It is a bit more complicated than my earlier code as it tries to centre the text, both vertically and horizontally. Let me know how you get on with it.

The CSS, jQuery Javascript and HTML are:

<style>
#nav1 {
    float: none;
    padding: 0;
    margin: 0;
}
#nav1 div {
    float: left;
    position: relative;
    padding: 4px;
    height: 36px;
    border: 2px solid #000;
}
#nav1 div p {
    position: absolute; 
    right: 4px;   
    padding: 0 4px;
    text-align: center;
    top: 50%;
    font-size: 14px;
    margin-top: -7px;  /* negative and half the font size */
}
.clear {clear: both;}
</style>

<!--  Below is the Javascript code  -->
<!--  ############################  -->

<script type="text/javascript">
$(document).ready(function(){
</script>

$('#nav1 div').each(function(){
    var content_width = 200, arrow_width = 32;
    $('p', this).css({width: content_width, left: 0});
    $(this).css({width: content_width});
    $(this).hover(
        function(){
            var $this = $(this);
            var new_width = $this.width() + arrow_width;
            $this.css({backgroundColor: "#F00", color: "#00F", width: new_width})
                 .prepend('<img src="../images/arrow.png" alt="" />');
            $('p', this).css({left: arrow_width});
        }
        ,
        function(){
            var $this = $(this);
            var new_width = $this.width() - arrow_width;
            $('img', this).remove()[0];
            $this.css({backgroundColor: "#0F0", color: "#F00", width: new_width});
            $('p', this).css({left: 0});
        }
    );
});

<!--  Below is the HTML  -->
<!--  #################  -->

<div id="nav1">
<a href="../javascipt/slimbox2.js"      ><div><p>"Minified" slimbox.js</p></div></a>
<a href="../javascript/slimbox2_full.js"><div><p>slimbox2_full.js     </p></div></a>
<a href="../css/slimbox2.css"           ><div><p>slimbox2.css         </p></div></a>
</div>
<div class="clear"></div>

I would suggest putting an empty span or a div container in your code to hold the arrow image. You can then use a JQuery selector to fade those in when the hover event is called on the links.

You already have fadeTo in your code for what I'm guessing are the links, just add the code there to fade in the arrows as well using the CSS selector for the spans or divs that will represent the arrows.

'Cloudy',

Below is some simple code similar to what I use. It works well if the height of your arrow image is less than or equal to the height of the text in the link.

Perhaps you could modify it to suit your purposes. As an aside, note the use of single quotes (') and double-quotes (") which does away with having to "escape" your double-quotes.

$('.navlink').each(function(){
    $(this).hover(
       function(){
            $(this).css({backgroundColor: "#F00", color: "#00F"})
                   .prepend('<img src="../icons/arrow.png" alt="" />');
        }
        ,
        function(){
            $(this).css({backgroundColor: "#0F0", color: "#F00"});
            $('img', this).remove()[0];
        }
    );
});

This does away with the "span"s, absolute positioning and having to copy the HTML etc.

Regards Neil

This will be my last word on this subject. If you are not averse to using a table instead of divs then there is a much simpler solution. The CSS assumes an image 32px high. You will have to alter it if your arrow image is a different height.

Regards Neil

----------------------------------CSS --------------------

#nav2, #nav2 tbody, #nav2 tr, #nav2 td{height: 32px;}
#nav2 td{vertical-align: middle; border: 2px solid #000;  margin: 0;}
#nav2 img {display: none; height: 32px; margin: 0; padding: 0; border:0;}
#nav2 div {
              float: left;
              height: 32px;
              margin: 0;
              padding: 0;
              border: 0;
              color: #F00;
              background-color: #0F0;
          }
#nav2 p {
    float: left;
    font-size: 14px;
    padding: 9px 4px 0 4px;  /*  9px = (32-14)/2   */
    height: 23px;            /* 23px = (32-9)      */
    margin: 0;
    border: 0;
    color: #F00;
    background-color: #0F0;
}

-----------------------------  jQuery javascript --------------------

$('#nav2 a').each(function(){
    $(this).hover(
        function(){
                    $('img',    this).fadeIn();
                    $('div, p', this).css({backgroundColor: "#F00", color: "#00F"});
        }
        ,
        function(){
                    $('img',    this).fadeOut();
                    $('div, p', this).css({backgroundColor: "#0F0", color: "#F00"});
        }
    );
});

---------------------------------  HTML   ---------------------------

<table id="nav2">
    <tr>
        <td><a href="../example1.html"><div><img src="../images/arrow.png" alt=""></div><p>Link 1</p></a></td>
        <td><a href="../example2.html"><div><img src="../images/arrow.png" alt=""></div><p>Link 2</p></a></td>
        <td><a href="../example3.html"><div><img src="../images/arrow.png" alt=""></div><p>Link 3</p></a></td>
    </tr>
</table>