Using a php variable in a setTimeOut function in a mouseover in an html tag

Question

I have a php variable:

<?php
$imagename = $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile());
?>

This is created in a loop. This loop displays some images.

When I hover over an image the onmouseover fires. This all goes okay.

The problem is:

onmouseover="myTimer=setTimeout('imageswitcher(<?php echo $imagename;?>)', 2000);"

The php doesn't work. Now I read something about ajax requests. But I have no idea what it is or how to use it. So I was hoping someone here could help me.

Answer 1

Firstly, you have a million and one problems here besides the PHP variable things. Firstly, you really shouldn't be using the onmouseover attribute anymore. Take a look at JavaScript & Events - Best Practice

So to replicate your problem with nicer code, you would do something like this.

<!-- This should be in an external JS file -->
<script>
    // IE Event Listener "Polyfill"
    var addEvent = function(element, event, callback) {
        if (document.addEventListener) {
            element.addEventListener(event, callback);
        } else {
            element.attachEvent('on' + event, callback);
        }
    };

    addEvent(document, 'load', function() {
        var element = document.getElementById('element');

        attachEvent(element, 'onmouseover', function() {
            myTimer = setTimeout('imageswitcher(<?php echo $imagename; ?>)', 2000);
        });
    }

</script>

<!-- Not an actual element, used for example purposes only -->
<element id="element"></element>

Variables should be assigned using 'var'

---

Your next problem is that your assigning myTimer without var. Now, it's not likely to be causing the issue here, it's good to keep it in mind.

var myTimer = setTimeout('imageswitcher(<?php echo $imagename; ?>)', 2000);

Function Strings

---

I don't know what your trying to do, but you're passing a string instead of a function to setTimeout. Let's fix that.

var myTimer = setTimeout(function() {
    imageswitcher(<?php echo $imagename; ?>);
}, 2000);

Addressing the issue

---

Now, let's address the actual issue here.

$imagename is probably a string, which you're not accounting for in your javascript. Let's fix that.

imageswitcher('<?php echo $imagename; ?>');

Putting it all together

---

<!-- This should be in an external JS file -->
<script>

    var addEvent = function(element, event, callback) {
        if (document.addEventListener) {
            element.addEventListener(event, callback);
        } else {
            element.attachEvent('on' + event, callback);
        }
    };

    addEvent(document, 'load', function() {
        var element = document.getElementById('element');

        attachEvent(element, 'onmouseover', function() {
            var myTimer = setTimeout(function() {
                imageswitcher('<?php echo $imagename; ?>');
            }, 2000);
        });
    };
</script>

<!-- Not an actual element, used for example purposes only -->
<element id="element"></element>