I'm trying to append a string of text to the src attribute of an image on mouseover and then remove that string on mouseout. Right now I have it half working:
Javascript
$('.singleSidebar .subnav img').mouseover(function(){
$(this).attr('src', function(index, attr) {
return attr.replace(/\.[^.]*$/, '_anim$&');
});
});
I found this code somewhere else and so I'm not exactly sure how to modify it to remove the string _anim on mouseout.
I would suggest just loading both images and then only showing the one you want. This can all be accomplished with CSS.
Give one image a class of "animated" and the other class of "nonanimated". Add this CSS to handle the onhover change:
.singleSidebar .subnav img.animated,
.singleSidebar .subnav img.nonanimated:hover
{
display: none;
}
.singleSidebar .subnav img.animated:hover,
.singleSidebar .subnav img.nonanimated
{
display: block
}
This will work better because the browser will load the image right away instead of when you hover your mouse, it's also a bit cleaner IMO
EDIT
Ah, if you need them to start playing on hover then you will need to do it your way. Try something like this:
$('.singleSidebar .subnav img').each(function(e){
var src = $(this).attr('src');
$(this).hover(function(){
$(this).attr('src', src.replace('.gif', '_anim.gif'));
}, function(){
$(this).attr('src', src);
});
});
$(".singleSidebar .subnav img").hover(
function () {
$(this).attr('src', function(index, attr) {
return attr.replace(/\.[^.]*$/, '_anim$&');
});
},
function () {
$(this).attr('src', function(index, attr) {
return attr.replace('_anim', ''); // or any other replace
});
}
);
See http://api.jquery.com/hover/ for more information
http://jsfiddle.net/dZ3c2/1/
var src;
$("img").hover(function() {
src = $(this).attr("src");
$(this).attr("src", "replacementsrc");
},function() {
$(this).attr("src", src);
});
Should be able to use .mouseout and reverse the replace.
$('.singleSidebar .subnav img').mouseout(function(){
$(this).attr('src', function(index, attr) {
return attr.replace(/_anim$/, '');
});
});
Related
I actually know how to change images with Jquery but the following case got me really stucked.
So I have a div I'm showing on image click like this:
$(dcoument).ready(function() {
$('.image').click(function() {
$('.element').toggle();
$(this).attr('src', 'image2.png');
});
};
Someow .attr() function doesn't work in this case and I have no idea why, I even have a function with changing to this specific image on hover like this:
$(document).ready(function() {
$('.image').hover(function() {
$(this).attr('src', 'image2.png');
}, function() {
$(this).attr('src', 'image1.png');
});
}
which works just the way it should. Any thoughts why code I posted can't change image on click? Thanks in advance.
You can add condition to by using hasClass.
<img src="image1.png">
<button>change</button>
$(function(){
$('button').on('click', function(){
if($('img').hasClass('fb')) {
$('img').removeClass('fb');
$('img').attr('src', 'http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png');
} else {
$('img').addClass('fb');
$('img').attr('src', 'http://www.thebloodycure.com/wp-content/uploads/2016/02/FaceBook-Logo-200x200.png');
}
});
})
https://jsfiddle.net/c84kouny/1/
Well, the task is to change img src on click.
It was not a problem to do it.
But I'd like to have some effect while changing it.
So, I used fadeOut and fadeIn. Problem is when the img src is changing the img starts "sparkling / blinking".
You can see an example here
http://www.coffee-cult.ru/slidersupreme
(rectangle in top right corner activates slider buttons)
and the code,
$main_image = $("img").first();
$("#prev_slide").click(function(e) {
e.preventDefault();
$main_image.fadeOut(400, function() {
$main_image.attr('src', images[0]);
}).fadeIn(400);
});
$("#next_slide").click(function(e) {
e.preventDefault();
$main_image.fadeOut(400, function() {
$main_image.attr('src', images[1]);
}).fadeIn(400);
});
you can try to use
$(this).attr();
instead of
$main_image.attr();
It has something to do with your other scripts on the page. Here in the fiddle it looks kind of alright with the same code: http://jsfiddle.net/ewyLcm0s/
var images = ['http://lorempixel.com/100/100/people/1','http://lorempixel.com/100/100/people/2'],
$main_image = $("img").first();
$("#prev_slide").click(function(e) {
e.preventDefault();
$main_image.fadeOut(400, function() {
$(this).attr('src', images[0]).fadeIn(400);
});
});
$("#next_slide").click(function(e) {
e.preventDefault();
$main_image.fadeOut(400, function() {
$(this).attr('src', images[1]).fadeIn(400);
});
});
I was wondering how can I add a fade effect when hovering using this example http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htm
I was wondering if its possible to achieve something like this www.bungie.net
Here's the code used in the example
$(document).ready(function() {
// Image swap on hover
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
// Image preload
var imgSwap = [];
$("#gallery li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
I used bruchowski's code which worked great for me. I did change .hover to .mouseover because I was getting a double fade effect when mousing out and I just wanted the last moused over image to stick.
I'm also very new to jquery and at first pasted it in the wrong place. Once I placed it directly before $(imgSwap).preload(); it worked.
And I slowed the fade down.
So my code is as follows:
<script type="text/JavaScript">
// prepare the form when the DOM is ready
$(document).ready(function() {
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
var imgSwap = [];
$("#gallery li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$("#gallery li img").mouseover(function(){
if ($("#main-img:animated").length){
$("#main-img:animated").stop();
}
$("#main-img").css("opacity", "0").animate({"opacity":"1"}, 1400);
}); $(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
</script>
Thanks!!!
This is a quick solution (you would add this to their existing code, do not edit what they already have)
$("#gallery li img").hover(function(){
if ($("#main-img:animated").length){
$("#main-img:animated").stop();
}
$("#main-img").css("opacity", "0").animate({"opacity":"1"}, 300);
});
In this part of the code that is like this in their example
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
Change to
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this)
.fadeOut('fast')
.attr('src').replace('thumb/', ''));
});
I have this HTML code:
<img class="swap" src="/Static/Images/Meny_normal_01.png" alt="" />
and this is my Jquery code and what it does is that when I hover over my img it swaps to another img, but I would like to have a hover out and then it swap back to the old img.
$(document).ready(function () {
$('.swap').hover(function () {
$(this).attr('src', '/Static/Images/Meny_hover_01.png');
});
});
Would appreciate any kind of help
.hover() binds two handlers to the matched elements, to be executed when the mouse pointer enters and when you leaves the elements.
$(".swap").hover(
function () {
$(this).attr('src', '/Static/Images/Meny_hover_01.png');
},
function () {
$(this).attr('src', '/Static/Images/Meny_normal_01.png');
}
);
You can pass 2 handlers into the hover - like this:
$(document).ready(function () {
$('.swap').hover(function () {
$(this).attr('src', '/Static/Images/Meny_hover_01.png');
},
function () {
$(this).attr('src', '/Static/Images/Meny_normal_01.png');
}
);
});
Have a look at: http://api.jquery.com/hover/ for more info
Or a similar item on SO: jquery change image on mouse rollover
$(".swap").hover(function() {
$(this).attr("src", function(i, val) {
return val.indexOf("hover") == -1
? val.replace("normal", "hover")
: val.replace("hover", "normal");
});
});
DEMO: http://jsfiddle.net/UJR8M/
I am currently working with buttons and images. I have seen several tutorials for gettting a button to appear after hovering over an image. I am trying to do the reverse of this operation. My question: how can I get a picture(s) to appear after hovering over an a <a> tag(s) with jquery? Is it possible?
HTML
Cheeseburger »
Tacos »
Salads »
Bread Sticks »
Dessert »
I think the best idea is to use a data-[type] and compare it with an ID, class or other data-type. You can also do this with a class ofcourse.
Here is a fiddle. And here is the jQuery code:
$("div#links > a").hover(
function() {
var ID = $(this).data("content");
$("div#images").children("img#" + ID).fadeIn("slow");
},
function() {
var ID = $(this).data("content");
$("div#images").children("img#" + ID).stop(true).hide();
}
);
use jquery's hover method, which works like this:
$('a.orange').hover(
function() {
$('.someImage').show();
},
function() {
$('.someImage').hide();
}
);
http://api.jquery.com/hover/
$('a').hover(
function(){
$('img').show();
},
function(){
$('img').hide();
}
);
You can use only css, if you need change img into your A tag
.img{
background: #222 url(/images/alert-overlay.png);
}
.img_hover{
background: #222 url(/images/alert-overlay-hover.png);
}
with jquery
$('a.orange').hover(
function() {
$(this).removeClass('img').addClass('img_hover');
},
function() {
$(this).removeClass('img_hover').addClass('img');
}
);
or only with jquery
$('a.orange').hover(
function() {
$(this).css('background-image', 'url(' + imageUrlHover + ')');
},
function() {
$(this).css('background-image','url(' + imageUrl + ')');
}
);