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

Question

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.

Why are you trying to do this with javascript, rather than changing whatever is generating this markup? — Taplar, Jun 29 '18 at 16:59
@Taplar I want to change this functionality only for one category, other categories should remain default. — lvekua, Jun 29 '18 at 17:28
@Taplar All categories are generated from CMS and have the same code. — lvekua, Jun 29 '18 at 17:30
BTW, your images are repeating ids. That's invalid markup from a web standards stand point. — Taplar, Jun 29 '18 at 17:32

score 1 · Accepted Answer · answered Jun 29 '18 at 17:36

$('.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>

Works like a charm! Much appreciated! – lvekua Jun 29 '18 at 17:50 — lvekua, Jun 29 '18 at 17:50

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

1 Answers1