Image Map in FBML


Hits: 2321  

Facebook FBML application does not support hotspots in an image map using dreamweaver.

<div style="position: relative;">
<!-- Hot Spots - Image Map -->
<div id="svnlabs1" style="background: none repeat scroll 0% 0% transparent; cursor: pointer; outline: medium none; text-align: center; vertical-align: middle; position: absolute; top: 72px; left: 460px; z-index: 99; padding: 10px;"></div>
<div id="svnlabs2" style="background: none repeat scroll 0% 0% transparent; cursor: pointer; outline: medium none; text-align: center; vertical-align: middle; position: absolute; top: 11px; left: 635px; z-index: 99; padding: 10px;"></div>
<div id="svnlabs3" style="background: none repeat scroll 0% 0% transparent; cursor: pointer; outline: medium none; text-align: center; vertical-align: middle; position: absolute; top: 170px; left: 632px; z-index: 99; padding: 10px;"></div>
<div id="svnlabs4" style="background: none repeat scroll 0% 0% transparent; cursor: pointer; outline: medium none; text-align: center; vertical-align: middle; position: absolute; top: 78px; left: 887px; z-index: 99; padding: 10px;"></div>
<!-- Main Image -->
<img src="http://blog.svnlabs.com/wp-content/uploads/2009/06/svnlabs.jpg" border="0" alt="" align="absbottom" /></div>

We can use above code to map image using DIV elements on main image.
It is quite useful to insert hotspots on Images in FBML 😉

Maturity is not when we start speaking BIG things But..Actually it is, When we start understanding small things.

Published by

Sandeep Verma

I’m an Entrepreneur. I’m proud to work as Blogger, LAMP Programmer, Linux Admin, Web Consultant, Cloud Manager, Apps Developer, Searcher. Concentrate > Observe > Imagine > Launch