OnmouseOver Jquery/Javascript call external function

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) ?>');">

开发者_JS百科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!

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'));
    });
 });

Based on your comment, I've come to this solution that might help you:

<a href="#" data-imageurl="<?php echo $this->getGalleryUrl($_image) ?>">This is one of many links</a>

Then you can have this in your script:

(function($) {
    $(document).ready(function() {
        $('a').hover(function() {
            // this happens onmouseenter
            var imageUrl = $(this).data('imageurl');
            updateParentImage(imageUrl);
        }, function() {
            //this happens onmouseleave
        });
    });

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

That small piece of code binds to all 'a' elements, which might not exactly be right in your case, but it's just there as an example. Then I've wrapped all the code in a closure/immediately invoked function expression (IIFE), to make sure we don't pollute the global namespace too much. It also makes sure that $ stays jQuery inside that closure.

One more thing to be noted is that I've used the data attribute on the links to store the image URL for that link. Clean and easy :)

If you have any question, shout out!

(See comments above for context for response)

You should never have to duplicate event binding, and doing inline, obtrusive JavaScript in never an answer.

Bind once and set your URL to a property that you can grab. Further, I write the following under the assumption that you don't want to touch your external JS function:

<div id="linkContainer">
    <a href="#" data-imgsrc="<?php echo $this->getGalleryUrl($_image) ?>">Something</a>
</div>

JavaScript (can be placed in your page's HTML in script tags if you must):

$('#linkContainer a').bind('mouseover', function() {
    updateParentImage($(this).data('imgsrc'));
    return false;
});