Reputation: 21
Basically I want to shorten the amount of code I have to write. I'm trying to do a rollover with Javascript that will change the image to another and then change the image back once the mouse leaves the image. Right now this is what I have:
<a href="#" class="amc"><img src="img/characters/amc_card.png" class="amcIMG" /></a>
$(".amc").mouseenter(function() {
$(".amcIMG").attr('src','img/characters/amc_card2.png');
});
$(".amc").mouseleave(function() {
$(".amcIMG").attr('src','img/characters/amc_card.png');
});
I was hoping there was some way to store the ".amc" in a variable that gets that part from the rollover, and can do so for multiple images. All of my images are named similarly so if I can replace that ".amc" part with a variable that can change depending on the image it rollovers that should make it so I only have to write one function instead of well over 50. Please help!
Upvotes: 2
Views: 140
Reputation: 344
Add an id to each img to give each a unique reference to each picture.
<a href="#"><img src="img/characters/amc_card.png" class="amc" id="amc_card" /></a>
$(document).ready(function(){
var amc = $(".amc");
amc.mouseenter(function() {
var id = this.id;
this.src = 'img/characters/'+ id +'2.png';
});
amc.mouseleave(function() {
var id = this.id;
this.src = 'img/characters/'+ id +'.png';
});
});
Upvotes: 0
Reputation: 7215
Try this:
function hover(el, on) {
var img = $(el).children('img');
var url = img.attr('src');
var i = url.lastIndexOf('.');
url = on? url.substr(0, i)+'2'+url.substr(i) : url.substr(0, i-1)+url.substr(i);
img.attr('src',url);
}
$(".amc").mouseenter(function() {
hover(this, true);
});
$(".amc").mouseleave(function() {
hover(this, false);
});
Upvotes: 1
Reputation: 1025
Try this
function(){
var amc= jQuery(".amc", jQuery("#Container"));
jQuery(amc).on("mouseenter", "img", function(e){
$(e.target).attr('src','img/characters/amc_card2.png');
});
jQuery(amc).on("mouseleave", "img", function(e){
$(e.target).attr('src','img/characters/amc_card.png');
});
}();
Keep in mind that anytime you use a class selector in jQuery it is going to search the entire DOM for every element containing that class which could cause a performance issue. You might consider narrowing its search by giving jQuery a context as I have done.
Upvotes: 2
Reputation: 473
Try:
$(".amc").mouseenter(function() {
$(this).find('img').attr('src','img/characters/amc_card2.png');
});
Or more perfect way:
$(".amc").mouseenter(function() {
$(this).children().attr('src','img/characters/amc_card2.png');
});
Upvotes: 1