onClick: share image on Facebook

Question

I would like to setup an onClick function to an image on my new website that launch Facebook sharer.

Here are some pieces of code that may help understand what I'm talking about

<div id="mImageBox">
<img id='my_image' src='' width="auto" height="auto"/>
</div>

The image src is blank because it's injected by another JavaScript function by using "my_image"

so, I tried to setup the onClick function with this method:

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script>

<div id="mImageBox">
<a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank"><img id='my_image' src='' width="auto" height="auto"/></a>
</div>

The onClick function works well, however, it links to the page where the img is located and not the img itself!

Have you got any suggestion for me?

Answer 1

try this:

<div id="mImageBox">
<img id='my_image' src='' alt='' width="auto" height="auto" onclick="fbs_click(this)"/>
</div>

<script>
     function fbs_click(TheImg) {
     u=TheImg.src;
     // t=document.title;
    t=TheImg.getAttribute('alt');
    window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;
}
</script>

You don't need to use <a> tag (surrounding the <img> tag) for case that JS disabled, because in that case the JS that should inject the src attribute will not work also.