У меня есть несколько изображений и их обратные изображения. Используя jQuery, я хочу показать/скрыть изображение опрокидывания, когда произойдет событие onmousemove/onmouseout. Все имена моих изображений следуют одному и тому же шаблону, например:
Исходное изображение:
Image.gifИзображение с опрокидыванием:
Imageover.gif
Я хочу вставить и удалить "поверх" части источника изображения в событии onmouseover и onmouseout, соответственно.
Как я могу сделать это с помощью jQuery?
Чтобы настроить готовность:
$(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);
});
});
Я знаю, что вы спрашиваете об использовании jQuery, но вы можете добиться такого же эффекта в браузерах, которые отключены JavaScript с помощью 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);
}
Здесь более длинное описание здесь
Еще лучше, однако, использовать спрайты: simple-css-image-rollover
Если у вас более одного изображения, и вам нужно что-то общее, которое не зависит от соглашения об именах.
HTML
<img data-other-src="big-zebra.jpg" src="small-cat.jpg">
<img data-other-src="huge-elephant.jpg" src="white-mouse.jpg">
<img data-other-src="friendly-bear.jpg" src="penguin.jpg">
JavaScript
$('img').bind('mouseenter mouseleave', function() {
$(this).attr({
src: $(this).attr('data-other-src')
, 'data-other-src': $(this).attr('src')
})
});
/* Teaser image swap function */
$('img.swap').hover(function () {
this.src = '/images/signup_big_hover.png';
}, function () {
this.src = '/images/signup_big.png';
});
Общее решение, которое не ограничивает вас "этим изображением" и "этим изображением", может состоять только в том, чтобы добавлять теги "onmouseover" и "onmouseout" к самому HTML-коду.
HTML
<img src="img1.jpg" onmouseover="swap('img2.jpg')" onmouseout="swap('img1.jpg')" />
JavaScript
function swap(newImg){
this.src = newImg;
}
В зависимости от вашей настройки, возможно, что-то вроде этого будет работать лучше (и требует меньше модификации HTML).
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"]);
}
$('img.over').each(function(){
var t=$(this);
var src1= t.attr('src'); // initial src
var newSrc = src1.substring(0, src1.lastIndexOf('.'));; // let get file name without extension
t.hover(function(){
$(this).attr('src', newSrc+ '-over.' + /[^.]+$/.exec(src1)); //last part is for extension
}, function(){
$(this).attr('src', newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-over' from the name
});
});
Вы можете изменить класс изображений из первой строки. Если вам нужно больше классов изображений (или другого пути), вы можете использовать
$('img.over, #container img, img.anotherOver').each(function(){
и т.д.
Он должен работать, я не тестировал его:)
Я надеялся на какой-нибудь один слот вроде:
$("img.screenshot").attr("src", $(this).replace("foo", "bar"));
Я написал небольшое руководство с примерами для новичков, Изменить образ с помощью JavaScript (или jQuery). Там также пример без использования jQuery.
Если решение, которое вы ищете, для анимированной кнопки, то лучшее, что вы можете сделать для повышения производительности, это сочетание спрайтов и CSS. Спрайт - это огромное изображение, содержащее все изображения с вашего сайта (заголовок, логотип, кнопки и все украшения, которые у вас есть). Каждое изображение, которое у вас есть, использует HTTP-запрос, и чем больше запросов HTTP, тем больше времени потребуется для загрузки.
.buttonClass {
width: 25px;
height: 25px;
background: url(Sprite.gif) -40px -500px;
}
.buttonClass:hover {
width: 25px;
height: 25px;
background: url(Sprite.gif) -40px -525px;
}
Координаты 0px 0px будут левым верхним углом от ваших спрайтов.
Но если вы разрабатываете какой-то фотоальбом с Ajax или что-то в этом роде, то лучше всего подходит JavaScript (или любой фреймворк).
Удачи!
$('img').mouseover(function(){
var newSrc = $(this).attr("src").replace("image.gif", "imageover.gif");
$(this).attr("src", newSrc);
});
$('img').mouseout(function(){
var newSrc = $(this).attr("src").replace("imageover.gif", "image.gif");
$(this).attr("src", newSrc);
});
Во время поиска решения некоторое время назад я нашел аналогичный script ниже, который после некоторой настройки я работал у меня.
Он обрабатывает два изображения, которые почти всегда по умолчанию "выключены", когда мышь отключена от изображения (image-example_off.jpg) и иногда "on", где за время, когда мышь зависает, требуется отображается альтернативное изображение (image-example_on.jpg).
<script type="text/javascript">
$(document).ready(function() {
$("img", this).hover(swapImageIn, swapImageOut);
function swapImageIn(e) {
this.src = this.src.replace("_off", "_on");
}
function swapImageOut (e) {
this.src = this.src.replace("_on", "_off");
}
});
</script>
<!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>
Я сделал что-то вроде следующего кода:)
Он работает только, когда у вас есть второй файл с именем _hover, например, facebook.png и 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);
});
<img src="img1.jpg" data-swap="img2.jpg"/>
img = {
init: function() {
$('img').on('mouseover', img.swap);
$('img').on('mouseover', img.swap);
},
swap: function() {
var tmp = $(this).data('swap');
$(this).attr('data-swap', $(this).attr('src'));
$(this).attr('str', tmp);
}
}
img.init();
Адаптировано из кода Ричарда Айотта - Чтобы направить img в список ul/li (найденный здесь через класс div-оболочки), что-то вроде этого:
$('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') }
);