Question

I’m trying to figure out just how a particular function works on a Facebook page, and being no friend of JS syntax, am having trouble. Here’s the question mark bit:

<a href="#" clicktoshowdialog="my_dialog" onclick="
    (new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=3b933f46f9c4c44981e51b90c754bfce&position=2&' + Math.random();
    FBML.clickToShowDialog("app4949752878_my_dialog");
    return false;">
    <img src="linktopicture" title="Are your friends fans?" width="190" height="230" />
</a>
<div style="display:none">
    <div id="app4949752878_my_dialog"  fbcontext="aa3fcff8e653">
        <div class="app_content_4949752878" style="padding:10px">
            <div with hidden then exposed content... 

The functionality of this is an image that, when clicked, pops out the previously hidden div. I know that the app###### is prepended to all JS used in Facebook to limit its scope. I’m confused by the anchor parameter of

clicktoshowdialog="mydialog"

What is that identifying, and how is it targeting the div that’s exposed when the image is clicked? Thanks for any clarification, and let me know if I can post any more sample code.

Answer 1

According to the wiki it’s just for opening the dialog (which is defined at the bottom). Facebook generates the JS to open the dialog. The attribute got post-processed and the JS code (that you see in the onclick= attribute) was generated on it’s basis.