How to get datalist’s image src or id using javascript?

I try to get src or id of image in datalist using javascript.
Here is some of the code:

<script type="text/javascript">
          $(document).ready(function () {
              $('.productImage').mouseover(function () {
                  var imageUrl = $('.productImage').attr('src');
                  //alert(imageUrl);
                  $.ajax({
                     type: "POST",
                     url: "WebServiceVar.asmx/getVarImage",
                     contentType: "application/json; charset=utf-8",
                     dataType: "json",
                     data: "{'imageUrl':'" + imageUrl + "'}",
                     success: function (data) {
                     }
                  })
              });
          });
       </script>

When hovering over any image in datalist the alert(imageUrl) method displays only “images/products/image1.png”, although there are multiple images in the DataList.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You need to add below code this is helpful for you.

 var imageUrl = $(this).attr('src');

If your mouseover event call with any image hover then current image src you have get using ‘this’ above code line.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0