Question

I want to switch an image under Facebook page’s tab (static FBML application), but it doesn’t work. Does anyone have any ideas?

This code doesn’t work:

<img src="http://www.figleaf.com/Services/images/google-logo.jpg" onmouseover="toggleOn(this)"/>

<script>
    <!--
    function toggleOn(obj)
    {
        obj.src = "http://www.brickmarketingconsulting.com/yahoo.jpg";

    }


    //-->
</script>

This code from a forum post doesn’t work either (http://forum.developers.facebook.com/viewtopic.php?pid=66795):

<a href="http://apps.facebook.com/.../index.php/">
<div id="logo_div" style="background-color:#3B5998">
    <img src="http://www./.../LOGO.jpg" alt="Our Logo" height="55px" onmouseover="document.getElementById('logo_div').setInnerFBML(pic2);"/>
</div>
</a>

<fb:js-string var='pic1'>
      <img src="http://www./.../LOGO.jpg" alt="Our Logo (home)" height="55px" onmouseover="document.getElementById('logo_div').setInnerFBML(pic2);"/>
</fb:js-string>

<fb:js-string var='pic2'>
      <img src="http://www./.../LOGO2.jpg" alt="Our Logo (home)" height="55px" onmouseout="document.getElementById('logo_div').setInnerFBML(pic1);"/>
</fb:js-string>

Answer 1

The onmouseover effect is triggered only after the user clicks on the Facebook page’s page (Canvas page).