Очень простой JQuery Rollover

Question

Я сделал очень простую jQuery img функцию ролловера, вдохновленную этой: http://www.smileycat.com/miaow/archives/000224.php.

Он просто проверяет все img, которые содержат _off в своем имени, и заменяет их на img с тем же именем, но "_on" вместо "_off".

Поскольку я не могу использовать фон img s в своем макете, я считаю, что это удобное решение. Но у меня есть ощущение, что обмен не является плавным, как если бы функция работала медленно. Как вы думаете? Есть ли способы оптимизировать его?

Вот код:

    function roll_over() {
        $("img[src*='_off']").hover(
            function() {
                var stringa = $(this).attr("src");
                var stringa = stringa.replace("_off", "_on");
                $(this).attr("src", stringa);
            },
            function() {
                var stringa = $(this).attr("src");
                var stringa = stringa.replace("_on", "_off");
                $(this).attr("src", stringa);
            }
        );
    }

Answer 1

Ваш код плохой. Почему?

1. Это не удастся, когда у вас будет изображение, подобное этому: ...src="/images/my_office.png"...
2. Вы используете JS для чего-то настолько примитивного, что может быть сделано в чистом CSS
3. Изображения *_on будут загружены при событии mouseover, поэтому некоторое время вы не увидите изображения.

Как исправить все эти проблемы? Используйте CSS Sprites .

1. Создать изображение, подобное этому: http://www.digart.pl/gfx/ico/s/fb.gif
2. HTML-код: <a href="..." id="myId">blah</a> (конечно, вам не нужно использовать элемент A).

3. Код CSS:

   #myId {
       display: inline-block; /* or block, or even inline with correct line-height */
       width: 33px;
       height: 20px;
       background: url(/path/to/img) 0 0 no-repeat;
   }
   #myId:hover {
       background-position: 50% 0;
   }
   

Если вы все еще хотите автоматизировать весь процесс, используйте JS только для изменения положения фона вместо изображения.

Answer 2

Я нашел хорошую функцию здесь http://webdevel.blogspot.com/2008/04/rollover-images-with-jquery.html

$("#mylink img").hover(
 function()
 {
  this.src = this.src.replace("_off","_on");
 },
 function()
 {
  this.src = this.src.replace("_on","_off");
 }
);

Я просто указываю id или класс imgs

Answer 3

Как насчет чего-то вроде:

// Add an image to your page as:
// <img src="button.png" class="rollover">

<script type='text/javascript'>
$(document).ready(function(){
    initRollovers();
});
function initRollovers() {  
    // Assign a class to the images you want to have as roll-over enabled.
    // Example:
    // <img src="button.png" class="rollover">
    // NOTE: No "dot" when setting the class on the image... But jQuery needs the .dot in order to search for classes in this script:
    var classIdentifier = ".rollover";

    // This example assumes that only the "on" state has a suffix:
    // button.png
    // button_on.png

    // If you have a suffix for both states, edit them here:
    // button_off.png
    // button_on.png
    // ... would be edited as:
    // var offSuffix = "_off.png";
    // var onSuffix = "_on.png";

    var offSuffix = ".png";
    var onSuffix = "_on.png";

    $(classIdentifier).each(function () {

        var obj = $(this);
        var mySrcOff = obj.attr("src");
        var mySrcOn = mySrcOff.replace(offSuffix, onSuffix);
        obj.mouseout(function() {
            $(this).attr("src", mySrcOff);
        });
        obj.mouseover(function() {
            $(this).attr("src", mySrcOn);
        });

        // Preload Off State
        $('<img />').attr('src', mySrcOn).appendTo('body').css('display','none');

    });
}

</script>

.

Answer 4

Повторное выполнение $("img[src*='_off']") неэффективно. Это означает, что браузер должен искать все на странице, когда вы переворачиваете. Вы должны включить jQuery Lint для получения информации об оптимизации ...