Joomla Templates Club 406,261 posts

[kidi Friend kidiJoin date: March 2009Posts: 134Downloads:0Uploads:44 Thanks: 28 Thanked: 2 times in 1 posts]

#180943

Hello,

Honestly I doesn’t hnow if it’s a Ja_Travel problem or my code but I need help, if someone know the solution.

On left-mass-top module I place a map (image) with town (div place).
On Dreamweaver or backend the places of each town’s name are ok.
But online, the town’s name are shifted on top on module.

I join 2 pictures (backend and frontend) and code.

I don’t want use Google map.

Thank you in advance for your help.

Code :

<table style="background-image: url('images/stories/Sardaigne/carte/Sardaigne_Sud-Ouest.gif'); width: 400px; height: 315px;" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>
<div id="Layer1" style="position: absolute; width: 87px; height: 18px; z-index: 1; left: 257px; top: 198px;" class="carte">CARBONIA</div>
<div id="Layer2" style="position: absolute; width: 72px; height: 18px; z-index: 2; left: 260px; top: 140px;" class="carte"><a title="Iglesias" href="index.php?option=com_content&view=article&id=177&Itemid=662">IGLESIAS</a></div>
<div id="Layer4" style="position: absolute; width: 74px; height: 17px; z-index: 4; top: 199px; left: 119px;"><a title="Carloforte" href="index.php?option=com_content&view=article&id=179&Itemid=664" class="carte">Carloforte </a>.</div>
<div id="Layer3" style="position: absolute; width: 86px; height: 17px; z-index: 3; left: 152px; top: 225px;" class="carte"><a title="Sant'Antiaco" href="index.php?option=com_content&view=article&id=180&Itemid=665">Sant'Antiaco</a> .</div>
<div id="Layer5" style="position: absolute; width: 82px; height: 21px; z-index: 5; left: 195px; top: 40px;" class="carte">Costa Verde</div>
</td>
</tr>
</tbody>
</table>

---

Attachments:

1. 
2. 

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#468163

Hi Kidi
Please post url

Regards,

[kidi Friend kidiJoin date: March 2009Posts: 134Downloads:0Uploads:44 Thanks: 28 Thanked: 2 times in 1 posts]

#468347

Hello HeRO,

This the link on the test adress :

http://sarda1.webequitation.com/le-guide-complet/ou-aller/sud-ouest

Thank you for your help

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#468350

Hi
Pls try the following:

<table cellspacing="0" cellpadding="0" border="0" style="background-image: url('/images/stories/Sardaigne/carte/Sardaigne_Sud-Ouest.gif'); width: 400px; height: 315px;">
<tbody>
<tr>
<td>
<div class="carte" style="position: absolute; width: 87px; height: 18px; z-index: 1; top: 250px; left: 250px;" id="Layer1">CARBONIA</div>
<div class="carte" style="position: absolute; width: 72px; height: 18px; z-index: 2; left: 260px; top: 195px;" id="Layer2"><a href="/sud-ouest/iglesias" title="Iglesias">IGLESIAS</a></div>
<div style="position: absolute; width: 74px; height: 17px; z-index: 4; top: 199px; left: 119px;" id="Layer4"><a class="carte" href="/sud-ouest/carloforte" title="Carloforte">Carloforte </a>.</div>
<div class="carte" style="position: absolute; width: 86px; height: 17px; z-index: 3; left: 152px; top: 301px;" id="Layer3"><a href="/sud-ouest/sant-antiaco" title="Sant'Antiaco">Sant'Antiaco</a> .</div>
<div class="carte" style="position: absolute; width: 82px; height: 21px; z-index: 5; top: 251px; left: 108px;" id="Layer5">Costa Verde</div>
</td>
</tr>
</tbody>
</table>
Hope can help you done

Regards,

[kidi Friend kidiJoin date: March 2009Posts: 134Downloads:0Uploads:44 Thanks: 28 Thanked: 2 times in 1 posts]

#468383

Hello HeRO,

Unfortunately, it’s ok for 2 town but not for the rest.

Thank you for your try.

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#468620

Hi Kidi,

For changing the location point, you should modify top and left value. I don’t know exactly what you want to change, so hope you can do it by yourself as i did with 2 town.

Regards,

1 user says Thank You to HeR0 for this useful post

1. kidi

[kidi Friend kidiJoin date: March 2009Posts: 134Downloads:0Uploads:44 Thanks: 28 Thanked: 2 times in 1 posts]

#469219

Hello HeRO,

Thank you for your time,

I resolved my problem. Perhaps it can be help someone.

On Dreamweer I was using Div but it wasn’t the good method.

It’s necessary to use “map” on the image. I add every town on the original image. I join the image at this post

And when I copy/past the code, the town doesn’t move. I add the link for each town on the Joomla admin for join each article by town :

Here is my code :

<img src="../Sardaigne_Sud-Ouest.gif" width="400" height="315" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="192,36,249,45" href="#">
<area shape="rect" coords="327,58,374,69" href="#">
<area shape="rect" coords="255,63,286,71" href="#">
<area shape="rect" coords="236,82,264,88" href="#">
<area shape="rect" coords="186,89,228,99" href="#">
<area shape="rect" coords="298,93,359,102" href="#">
<area shape="rect" coords="249,132,301,141" href="#">
<area shape="rect" coords="127,190,175,197" href="#">
<area shape="rect" coords="164,219,220,225" href="#">
<area shape="rect" coords="247,192,302,200" href="#">
<area shape="rect" coords="250,241,297,257" href="#">
<area shape="rect" coords="305,259,347,271" href="#">
<area shape="rect" coords="350,249,373,257" href="#">
<area shape="rect" coords="328,276,349,284" href="#">
</map>

---

Attachments:

1. 

[Author]

Posts