PDA

View Full Version : Small guide for color change on mouseover in Real Estate Map



Steffen Buschkemper
October 2, 2012, 07:18 PM
Hi @ All,

Here is a little guide for the color change on mouseover on Real Estate Map.

1. Download the jquery.imagemapster.js -> download (https://github.com/downloads/jamietre/ImageMapster/jquery.imagemapster.1.2.6.zip)

Copy jquery.imagemapster.js in the folder libs/jquery

OK let's get started.

Open header.tpl at templates/realty_modern/tpl/ in editor

After the following code



<script type="text/javascript" src="{$smarty.const.RL_LIBS_URL}jquery/jquery.js"></script>


Add the following code



<script type="text/javascript" src="{$smarty.const.RL_LIBS_URL}jquery/jquery.imagemapster.js "></script>



Now open the map.tpl in an editor. (templates/realty_modern/tpl/blocks/
Next adds the following code @ line 33



{literal}
$(document).ready(function(){
$('.mymap').mapster({
mapKey: 'stateover',
singleSelect: true,
fillColor: 'ff9000',
fillOpacity: 1
});
});
{/literal}


Attention! Insert before the script tag closed.

Ok next find follow code



<div style="overflow: hidden;text-align: center;padding: 0 0 10px;"><img usemap="#map" alt="" title="" src="{$rlTplBase}img/map.jpg" /></div>


and change with follow



<div style="overflow: hidden;text-align: center;padding: 0 0 10px;"><img usemap="#map" alt="" title="" src="{$rlTplBase}img/map.jpg" class="mymap" /></div>


Last but not least you must insert stateover="<-- For each area to input a number higher -->" behind all beginning "<area" in map.tpl

Example



<area stateover="1" ......
<area stateover="2" ......


Now thats all!

I can not test it, but I think it works.
If there are problems just reported in this thread.


Best regards
Steffen

Chun chiang Ming
October 3, 2012, 03:16 AM
thank you man.......

Petrache Nicolae
October 3, 2012, 01:56 PM
thanks for sharing

Steffen Buschkemper
October 3, 2012, 02:02 PM
No problem! You're welcome!