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