Swap back image on hover out with Jquery - javascript

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/

Related

Change image with jquery using .toggle() in same function

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/

jquery swap image on element click not functioning

I am trying to swap an image on click with jquery. I have got it to work with the click being bound to the image class. However, if I try and wrap the function and bind the event to a button or anchor, it will not swap the images. Here is the jquery:
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$(".test_toggle").click(function(){
$(this).find(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
});
</script>
This worked:
jQuery(document).ready(function( $ ) {
$(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
Any help is greatly appreciated.
I don't think there's any need to delegate the event listeners so I've removed them. Simply add the click event to the image and then you can manually 'trigger' a click on it when the .test-toggle is clicked. E.G:
$(function() {
//add on click event
$(".img-swap").on('click', function() {
if (this.src.indexOf("_off")>0) {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
});
//add remote trigger
$(".test_toggle").on('click', function(){
$(".img-swap").trigger("click");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img-swap" src="https://placehold.it/300?text=_off" />
<button class="test_toggle">test toggle</button>
Thats because unlike like img.
a or button doesn't have a src attribute.
So when you bind the event to a button or anchor, this.src in your second instance of the code will be invalid.
I would delete this line:
$(this).find(".img-swap").live('click', function() {
What is it's purpose? You can swap this image right after the first click, right?
Also, make sure that .img-swap is inside the tag with class test_toggle.
You are using:
$(this).find(".img-swap")
find() searches only in children of selected element.
If it's not nested use
$(".img-swap")
instead of:
$(this).find(".img-swap")
I have re-written the js, but not tested. Can I nest clicks?
$(".test_toggle").click(function(){
$.find(".img-swap").click(function(){
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});

Why changing img src with jQuery works incorrectly?

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);
});
});

onClick(), onMouseOver() and onMouseOut() with image

So far I've got this working so that it has a "basic" image, click image, and change image to "active image, but I don't want it to revert back to the original image when you mouse out if the image has been clicked--I want it to stay on the click image until another image is clicked.
Here is my HTML
<div id="booking_i">
<img id="img" src="/design/zebra/images/booking/1stolik.png">
<img id="img2" src="/design/zebra/images/booking/2stolik.png">
</div>
In js would be something like
onmouseover="image.src='/design/zebra/images/booking/1stolik_aktiv.png'";
onmouseout="image.src='/design/zebra/images/booking/1stolik.png'";
onClick="image.src='/design/zebra/images/booking/1stolik_clicked.png'";
HTML
<div id="booking_i">
<img id="inage1" src="/design/zebra/images/booking/booking.png" />
<img id="img" src="/design/zebra/images/booking/1stolik.png" />
<img id="img2" src="/design/zebra/images/booking/2stolik.png" />
</div>
CSS
#image1 {
position: absolute;
left: 103px;
top: 300px;
}
jQuery
$(document).ready(function () {
$('#img').onMouseOver.attr('src','/design/zebra/images/booking/1stolik_active.png');
$('#img').click(function () {
this.attr('src', '/design/zebra/images/booking/1stolik_clicked.png');
$('#img2').attr('src','/design/zebra/images/booking/2stolik.png');
});
$('#img2').onMouseOver.attr('src','/design/zebra/images/booking/2stolik_active.png');
$('#img2').click(function () {
this.attr('src', '/design/zebra/images/booking/2stolik_clicked.png');
$('#img').attr('src','/design/zebra/images/booking/1stolik.png');
});
});
Why are you not using JQuery?
$(document).ready(function(){
var clicked = false;
$("#img").on({
mouseenter: function (event) {
if(clicked)
return false;
$(this).attr('src','new.jpg');
},
mouseleave: function (event) {
if(clicked)
return false;
$(this).attr('src','new.jpg');
},
click: function (event) {
clicked = true;
$(this).attr('src','new.jpg');
}
},
"body"
);
});
You can add class to the image once its been clicked and in the mouseover function test if this image has that class.
In case the class is not there continue, else preventDefault.
some thing like
$('.image').mouseover(function(){
if(!$(this).hasClass('clicked')){
// code to change source here
}
});
in the click event use
$('.image').click(function(){
// to avoid repition
if(!$(this).hasClass('clicked')){
$(this).addClass('clicked');
// code to change the source
}
});
Thats it
are you using jquery? then you can do this
$('#img').on('click', function () {
//click event goes here
$(this).attr("src", "/design/zebra/images/booking/1stolik_aktiv.png");
});
$('#img').hover(
function () {
//hover event
$(this).attr("src", "/design/zebra/images/booking/1stolik.png");
},
function () {
//hover out event
$(this).attr("src", "/design/zebra/images/booking/1stolik_clicked.png");
});

jQuery: Add/remove text string to src attribute

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$/, '');
});
});

Categories