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
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