jquerymouseeventsrcrollover

How can I switch urls for src, mouseover and mouseout - using jQuery


I have product list of around 90 items with images which have src, mouseover, mouseout attributes. Basically mouseout src is same as image src. Rollover works fine, however I would like to flip current rollover functionality.

e.g: default image (before hover) should be the current rollover image, and rollover image (when hovered) should be the default image.

Current Code:

 <div class="item">
    <a href="productURL"class="product-image">
        <img id="product-collection-image"
            src="http://imageUrl-1xxxxxxxxx.jpg" alt="product name"
            onmouseover="this.src='http://imageUrl-over-1xxxxxxx.jpg';" 
            onmouseout="this.src='http://imageUrl-1xxxxxxx.jpg';" />
    </a>
 </div>

<div class="item">
    <a href="productURL"class="product-image">
        <img id="product-collection-image"
            src="http://imageUrl-2xxxxxxx.jpg" alt="product name"
            onmouseover="this.src='http://imageUrl-over-2xxxxxxx.jpg';" 
            onmouseout="this.src='http://imageUrl-2xxxxxxx.jpg';" />
    </a>
</div>

<div class="item">
    <a href="productURL"class="product-image">
        <img id="product-collection-image"
            src="http://imageUrl-3xxxxxxx.jpg" alt="product name"
            onmouseover="this.src='http://imageUrl-over-3xxxxxxx.jpg';" 
            onmouseout="this.src='http://imageUrl-3xxxxxxx.jpg';" />
    </a>
</div>

Desired Result:

 <div class="item">
    <a href="productURL"class="product-image">
        <img id="product-collection-image"
            src="http://imageUrl-over-1xxxxxxx.jpg" alt="product name"
            onmouseover="this.src='http://imageUrl-1xxxxxxxxx.jpg';" 
            onmouseout="this.src='http://imageUrl-over-1xxxxxxx.jpg';" />
    </a>
 </div>

<div class="item">
    <a href="productURL"class="product-image">
        <img id="product-collection-image"
            src="http://imageUrl-over-2xxxxxxx.jpg" alt="product name"
            onmouseover="this.src='http://imageUrl-2xxxxxxx.jpg';" 
            onmouseout="this.src='http://imageUrl-over-2xxxxxxx.jpg';" />
    </a>
</div>

<div class="item">
    <a href="productURL"class="product-image">
        <img id="product-collection-image"
            src="http://imageUrl-over-3xxxxxxx.jpg" alt="product name"
            onmouseover="this.src='http://imageUrl-3xxxxxxx.jpg';" 
            onmouseout="this.src='http://imageUrl-over-3xxxxxxx.jpg';" />
    </a>
</div>

This is what I currently have:

var items = $(".item a");
var imgSrc = items.children('img').map(function(){
    return $(this).attr('src');
}).get();

var hoverSrc = items.children('img').map(function(){
    return $(this).attr('onmouseover').slice();
}).get();

    console.log(hoverSrc);

Thanks in advance guys.


Solution

  • $('.item .product-image img').each(function(index, image){
      //get the over logic
      var mouseover = image.getAttribute('onmouseover');
      //get the out logic
      var mouseout = image.getAttribute('onmouseout');
      
      //execute the over logic so it will change the src to be the over url
      image.onmouseover();
      //swap the over and out logic for each other
      image.setAttribute('onmouseover', mouseout);
      image.setAttribute('onmouseout', mouseover);
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="item">
      <a href="productURL" class="product-image">
        <img id="product-collection-image" src="http://imageUrl-1xxxxxxxxx.jpg" alt="product name" onmouseover="this.src='http://imageUrl-over-1xxxxxxx.jpg';" onmouseout="this.src='http://imageUrl-1xxxxxxx.jpg';" />
      </a>
    </div>
    
    <div class="item">
      <a href="productURL" class="product-image">
        <img id="product-collection-image" src="http://imageUrl-2xxxxxxx.jpg" alt="product name" onmouseover="this.src='http://imageUrl-over-2xxxxxxx.jpg';" onmouseout="this.src='http://imageUrl-2xxxxxxx.jpg';" />
      </a>
    </div>
    
    <div class="item">
      <a href="productURL" class="product-image">
        <img id="product-collection-image" src="http://imageUrl-3xxxxxxx.jpg" alt="product name" onmouseover="this.src='http://imageUrl-over-3xxxxxxx.jpg';" onmouseout="this.src='http://imageUrl-3xxxxxxx.jpg';" />
      </a>
    </div>