Home/ Questions/Q 3496850
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T12:17:59+00:00

I am trying to add a mouseup, mousedown, hover event on several different images

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There 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.com/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.

    • 0