Change the image source on rollover using jQuery

前端 未结 14 1005
隐瞒了意图╮
隐瞒了意图╮ 2020-11-22 10:23

I have a few images and their rollover images. Using jQuery, I want to show/hide the rollover image when the onmousemove/onmouseout event happen. All my image names follow t

相关标签:
14条回答
  • 2020-11-22 10:50

    I've made something like the following code :)

    It works only, when you have a second file named with _hover, for example, facebook.png and facebook_hover.png

    $('#social').find('a').hover(function() {
        var target = $(this).find('img').attr('src');
        //console.log(target);
        var newTarg = target.replace('.png', '_hover.png');
        $(this).find('img').attr("src", newTarg);
    }, function() {
        var target = $(this).find('img').attr('src');
        var newTarg = target.replace('_hover.png', '.png');
        $(this).find('img').attr("src", newTarg);
    });
    
    0 讨论(0)
  • 2020-11-22 10:51

    A generic solution that doesn't limit you to "this image" and "that image" only may be to add the 'onmouseover' and 'onmouseout' tags to the HTML code itself.

    HTML

    <img src="img1.jpg" onmouseover="swap('img2.jpg')" onmouseout="swap('img1.jpg')" />
    

    JavaScript

    function swap(newImg){
      this.src = newImg;
    }
    

    Depending on your setup, maybe something like this would work better (and requires less HTML modification).

    HTML

    <img src="img1.jpg" id="ref1" />
    <img src="img3.jpg" id="ref2" />
    <img src="img5.jpg" id="ref3" />
    

    JavaScript / jQuery

    // Declare Arrays
      imgList = new Array();
      imgList["ref1"] = new Array();
      imgList["ref2"] = new Array();
      imgList["ref3"] = new Array();
    
    //Set values for each mouse state
      imgList["ref1"]["out"] = "img1.jpg";
      imgList["ref1"]["over"] = "img2.jpg";
      imgList["ref2"]["out"] = "img3.jpg";
      imgList["ref2"]["over"] = "img4.jpg";
      imgList["ref3"]["out"] = "img5.jpg";
      imgList["ref3"]["over"] = "img6.jpg";
    
    //Add the swapping functions
      $("img").mouseover(function(){
        $(this).attr("src", imgList[ $(this).attr("id") ]["over"]);
      }
    
      $("img").mouseout(function(){
        $(this).attr("src", imgList[ $(this).attr("id") ]["out"]);
      }
    
    0 讨论(0)
  • 2020-11-22 10:56
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>JQuery</title>
    <script src="jquery.js" type="text/javascript"> </script>
    <style type="text/css">
        #box{
            width: 68px;
            height: 27px;
            background: url(images/home1.gif);
            cursor: pointer;
        }
    </style>
    
    <script type="text/javascript">
    
    $(function(){
    
        $('#box').hover( function(){
            $('#box').css('background', 'url(images/home2.gif)');
    
        });
        $('#box').mouseout( function(){
            $('#box').css('background', 'url(images/home1.gif)');
    
        });
    
    });
    </script>
    </head>
    
    <body>
    <div id="box" onclick="location.href='index.php';"></div>
    </body>
    </html>
    
    0 讨论(0)
  • 2020-11-22 10:58

    I know you're asking about using jQuery, but you can achieve the same effect in browsers that have JavaScript turned off using CSS:

    #element {
        width: 100px; /* width of image */
        height: 200px; /* height of image */
        background-image: url(/path/to/image.jpg);
    }
    
    #element:hover {
        background-image: url(/path/to/other_image.jpg);
    }
    

    There's a longer description here

    Even better, however, is to use sprites: simple-css-image-rollover

    0 讨论(0)
  • 2020-11-22 11:02

    To set up on ready:

    $(function() {
        $("img")
            .mouseover(function() { 
                var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
                $(this).attr("src", src);
            })
            .mouseout(function() {
                var src = $(this).attr("src").replace("over.gif", ".gif");
                $(this).attr("src", src);
            });
    });
    

    For those that use url image sources:

    $(function() {
            $("img")
                .mouseover(function() {
                   var src = $(this).attr("src");
                   var regex = /_normal.svg/gi;
                   src = this.src.replace(regex,'_rollover.svg');
                   $(this).attr("src", src);
    
                })
                .mouseout(function() {
                   var src = $(this).attr("src");
                   var regex = /_rollover.svg/gi;
                   src = this.src.replace(regex,'_normal.svg');
                   $(this).attr("src", src);
    
                });
        });
    
    0 讨论(0)
  • 2020-11-22 11:02

    Adapted from Richard Ayotte's code - To target an img in a ul/li list (found via wrapper div class here), something like this:

    $('div.navlist li').bind('mouseenter mouseleave', function() {    
        $(this).find('img').attr({ src: $(this).find('img').attr('data-alt-src'), 
        'data-alt-src':$(this).find('img').attr('src') }
    ); 
    
    0 讨论(0)
提交回复
热议问题