Parking Lot and Tooltip

by kidino

HTML

<img id="Image-Maps-Com-image-maps-2014-01-26-095648" src="http://www.image-maps.com/m/private/0/905je063ebkl5hjhbumfpk2nh0_carlot.png" border="0" width="400" height="286" usemap="#image-maps-2014-01-26-095648" alt="" />

<map name="image-maps-2014-01-26-095648" id="ImageMapsCom-image-maps-2014-01-26-095648">
<area id="lot1" shape="rect" coords="38,36,197,93" alt="" title="" target="_self" href="#"     />
<area id="lot3" shape="rect" coords="41,100,197,163" alt="" title="" target="_self" href="#"     />
<area id="lot2" shape="rect" coords="201,33,357,96" alt="" title="" target="_self" href="#"     />
<area id="lot4" shape="rect" coords="201,101,357,164" alt="" title="" target="_self" href="#"     />
<area id="lot5" shape="rect" coords="40,167,196,230" alt="" title="" target="_self" href="#"     />
<area id="lot6" shape="rect" coords="201,168,357,231" alt="" title="" target="_self" href="#"     />

</map>

JavaScript

var data = {
    'lot1': { 
        'desc':'Parking Boss',
        'lot':'Lot 1'
    },
    'lot2': { 'desc':'Parking Bini Boss', 'lot': 'Lot 2' },
    'lot3': { 'desc':'Yang ni kosong', 'lot': 'Lot 3' },
    'lot4': { 'desc':'Parking Iszuddin Ismail', 'lot': 'Lot 4' },
    'lot5': { 'desc':'Yang ni kosong', 'lot': 'Lot 5' },
    'lot6': { 'desc':'Untuk van company', 'lot': 'Lot 6' }
};

$(document).tooltip({
    content: function() {
        var thelot = data[$(this).attr('id')];
        return thelot.lot+" - "+thelot.desc;
    },
    track: true
});