I am trying to add a mouseup, mousedown, hover event on several different images - the only problem is that the event only occurs on the first image, tried using the each() function does not seem to be working. Any suggestions on how I can do this?
$(function() {
var filename = $('.imgover').attr('alt');
$('.rolloverimg').each(function(){
$('#'+ filename).mouseup(function(){
$(this).children("img").attr('src', 'content/images/buttons/'+ filename + '_up.png' );
}).mousedown(function(){
$(this).children("img").attr('src','content/images/buttons/' + filename + '_down.png');
});
$('#'+ filename).hover(
function () {
$(this).children("img").attr('src', 'content/images/buttons/'+ filename + '_hover.png');
},
function () {
$(this).children("img").attr('src', 'content/images/buttons/' + filename + '_up.png');
}
);
});
});
<div class="hdr-btns rolloverimg">
<a href="#"><img src="content/images/buttons/play_up.png" alt="play" id="play" class="imgover" /></a>
<a href="#"><img src="content/images/buttons/register_up.png" alt="register" id="register" class="imgover" /></a>
</div>
I am trying to add a mouseup, mousedown, hover event on several different images - the only problem is that the event only occurs on the first image, tried using the each() function does not seem to be working. Any suggestions on how I can do this?
$(function() {
var filename = $('.imgover').attr('alt');
$('.rolloverimg').each(function(){
$('#'+ filename).mouseup(function(){
$(this).children("img").attr('src', 'content/images/buttons/'+ filename + '_up.png' );
}).mousedown(function(){
$(this).children("img").attr('src','content/images/buttons/' + filename + '_down.png');
});
$('#'+ filename).hover(
function () {
$(this).children("img").attr('src', 'content/images/buttons/'+ filename + '_hover.png');
},
function () {
$(this).children("img").attr('src', 'content/images/buttons/' + filename + '_up.png');
}
);
});
});
<div class="hdr-btns rolloverimg">
<a href="#"><img src="content/images/buttons/play_up.png" alt="play" id="play" class="imgover" /></a>
<a href="#"><img src="content/images/buttons/register_up.png" alt="register" id="register" class="imgover" /></a>
</div>
4 Answers
Reset to default 4There is no need to implement a loop in order to add events to multiple elements using jQuery. You can simply apply the events to a selector that selects all the elements that you need.
For example, the following code adds MouseUp and MouseDown events to all the img tags inside an element that has the rolloverimg class:
$('.rolloverimg img').mouseup(function () {
alert('up')
}).mousedown(function () {
alert('down');
});
And if you want to quick test it, here is the full working example that was created starting from your source code:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.microsoft./ajax/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('.rolloverimg img').mouseup(function () {
alert('up')
}).mousedown(function () {
alert('down');
});
});
</script>
</head>
<body>
<div class="hdr-btns rolloverimg">
<a href="#"><img src="content/images/buttons/play_up.png" alt="play" id="play" class="imgover" /></a>
<a href="#"><img src="content/images/buttons/register_up.png" alt="register" id="register" class="imgover" /></a>
<input type="button" value="text" />
</div>
</body>
</html>
Additional info update
If you do not want to select all the img tags from the div, but rather just the ones that have the imgover class applied to them, you can use the following selector:
$(function () {
$('.rolloverimg img.imgover').mouseup(function () {
alert('up')
}).mousedown(function () {
alert('down');
});
});
Additional info update2
You can access the currently selected element using $(this). For example:
$('.rolloverimg img.imgover').mouseup(function () {
alert($(this).attr('id') + '_up')
}).mousedown(function () {
alert($(this).attr('id') + '_down');
});
Please let me know if the above helps or if you need more specific help.
put the code:
var filename = $('.imgover').attr('alt');
inside the each function.
Here is a simple way to do it:
$('.rolloverimg').mouseover(function() {
$('img', this).each(function () {
$(this).attr('alt', $(this).attr('id') + '_over');
})
}).mouseout(function() {
$('img', this).each(function () {
$(this).attr('alt', $(this).attr('id') + '_out');
})
});
Of course, juste replace the attr('alt', 'in') to do what you need (set the src attribute), it is just a simple way to show the logic of selecting the elements.
You may just use $('.rolloverimg img').mouseup() etc.
$('.rolloverimg img').mouseup(function(){
$(this).children("img").attr('src', 'content/images/buttons/'+ filename + '_up.png' );
}).mousedown(function(){
$(this).children("img").attr('src','content/images/buttons/' + filename + '_down.png');
});
$('.rolloverimg img').hover(
function () {
$(this).children("img").attr('src', 'content/images/buttons/'+ filename + '_hover.png');
},
function () {
$(this).children("img").attr('src', 'content/images/buttons/' + filename + '_up.png');
}
);