Question

I could be mistaken here but I thought that inline html can call an external javascript file’s function with onmouseover.

For example:

<a href="#" onmouseover="updateParentImage('<?php echo $this->getGalleryUrl($_image) ?>');">

And my EXTERNAL jquery/javascript file function looks like:

     function updateParentImage ($image_url)
     {
        alert($image_url);
        $('.product-img-box .product-image img').attr('src', $image_url);       
     }

The function never runs. Am I completely missing something? Shouldn’t that tag call the appropriate file even thought the javascript is external?

Note: If I include the javascript inline, the alert box shows but the image that I am trying to change in the document does not change, even though I”m using the same referencing as another place in the code where it successfully updates the image.

Any help would be appreciated. Thanks!

Answer 1

How about something like this…

<a href="#" class="imageChanger" data-imagesrc="<?php echo $this->getGalleryUrl($_image) ?>">

Then use jquery to add a mouseenter event

$(document).ready(function(){
    $('.imageChanger').mouseenter(function(){
        alert($image_url);
        $('.product-img-box .product-image img').attr('src', $(this).data('imagesrc'));
    });
 });