Carte Bordeaux Avec Zone Cliquable

[kate66]

Bonjour,

 

j'ai réussi a commencé une image maps mais plusieurs chose que je ne comprend pas la zone est en carre pas possible pour moi puisque mes zones sont des régions.

 

Donc comment faire pour des zones ainsi de plus la carte je l'ai mis en catégorie d'accueil mais la carte n'apparait pas.

 

voici ce que j'ai suivi :

 

http://doc.prestashop.com/display/PS16/Building+Image+Maps

 

merci.

 

 

 

Edited March 18, 2016 by kate66 (see edit history)

[doekia]

Même si tu attaches une scène à la catégorie accueil, la page de la catégorie accueil n'existe jamais elle est remplacé par la home qui à une mise en page radicalement différente et notamment n'a pas les scènes.

 

Les scènes PrestaShop ont été faites pour lier une composition graphique avec des produits et possède une interface de création très rudimentaire pour les années 2016. Elle ne supporte que les rectangles.

 

Tu aurais surement un meilleur choix:

- soit de passer par le module editeur de la page d'acceuil

- soit directement dans index.tpl

 

Dans les 2 cas tu vas devoir passer par un marquage html dit image map (ce qu'utilisent les scènes)

C'est un peu barbare comme syntaxe mais très puissant. Le tag

<area shape="poly" coords="288,19,316,39,330,37,348,47,351,66,349,74,367,105,337,85,324,85,307,77,303,60,307,50" href="un-ovni.html">

En savoir plus ici: http://www.w3schools.com/tags/att_area_coords.asp

[kate66]

j'ai mit ceci sur la page index.tpl

 

{*
* 2007-2015 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2015 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
{if isset($HOOK_HOME_TAB_CONTENT) && $HOOK_HOME_TAB_CONTENT|trim}
    {if isset($HOOK_HOME_TAB) && $HOOK_HOME_TAB|trim}
<img src ="img/carte2.png" alt="" usemap="#themap" />
<map name="themap">
<area shape="poly" alt="libournais" href="" coords="189,170,257,155,317,194,346,207,366,297,378,285,421,302,495,347,525,320,580,322,606,345,598,387,592,412,578,438,588,463,578,499,572,515,537,525,511,535,491,524,470,526,461,519,466,497,454,487,439,498,440,482,430,473,417,490,401,465,373,456,358,449,333,453,317,410,295,397,286,388,251,376,232,354,220,319,211,294,213,272,203,246,199,219,196,199,190,181" />
<area shape="poly" alt="medoc" href="" coords="36,44,66,64,97,102,139,145,153,180,167,218,171,256,180,296,199,335,218,368,237,394,269,415,274,447,263,473,234,485,203,490,195,467,198,459,171,441,148,450,129,414,90,374,90,339,73,312,74,275,64,248,45,203,16,174,4,110,15,70,26,53" />
<area shape="poly" alt="graves" href="" coords="236,520,166,534,173,582,131,607,178,655,194,666,213,704,235,710,247,741,340,772,368,788,391,787,436,792,443,800,453,799,471,757,488,742,422,721,410,768,381,766,398,732,413,714,400,687,380,714,361,728,341,710,346,691,361,681,376,664,366,645,340,630,325,617,310,618,279,631,230,646,220,633,231,606,210,592,204,573,176,590" />
<area shape="poly" alt="entredeuxmers" href="" coords="589,745,654,694,669,659,737,522,704,510,674,538,637,539,594,541,576,526,517,543,490,539,489,526,466,531,452,510,425,493,399,477,355,455,337,461,307,415,250,385,282,443,283,475,284,508,276,529,295,557,306,593,338,615,368,636,391,661,416,692,429,719,452,734,485,731,521,722,557,725,576,737" />
</map>
        <ul id="home-page-tabs" class="nav nav-tabs clearfix">
            {$HOOK_HOME_TAB}
        </ul>
    {/if}
    <div class="tab-content">{$HOOK_HOME_TAB_CONTENT}</div>
{/if}
{if isset($HOOK_HOME) && $HOOK_HOME|trim}
    <div class="clearfix">{$HOOK_HOME}</div>
{/if}

 

mais j'ai un point d'interrogation a la place de l'image et quand je fais clic droit enregistrer l'image sous dessus il m'ecrit.

 

carte2.png.gif je ne comprend d'ou vient .gif.merci.

[doekia]

Bon déjà un peu de methode

 

Commence par mettre ton code dans un fichier seul, disons my-map.tpl

A l'endroit où il est maintenant, tu replaces par

{include file="$tpl_dir./my-map.tpl"}

Maintenant ton fichier my-map.tpl

<img src ="{$img_dir}carte2.png" alt="" usemap="#themap" />
<map name="themap">
	<area shape="poly" alt="libournais" href=""
		coords="189,170,257,155,317,194,346,207,366,297,378,285,421,302,495,347,525,320,580,322,606,345,598,387,592,412,578,438,588,463,578,499,572,515,537,525,511,535,491,524,470,526,461,519,466,497,454,487,439,498,440,482,430,473,417,490,401,465,373,456,358,449,333,453,317,410,295,397,286,388,251,376,232,354,220,319,211,294,213,272,203,246,199,219,196,199,190,181" />

	<area shape="poly" alt="medoc" href=""
		coords="36,44,66,64,97,102,139,145,153,180,167,218,171,256,180,296,199,335,218,368,237,394,269,415,274,447,263,473,234,485,203,490,195,467,198,459,171,441,148,450,129,414,90,374,90,339,73,312,74,275,64,248,45,203,16,174,4,110,15,70,26,53" />

	<area shape="poly" alt="graves" href=""
		coords="236,520,166,534,173,582,131,607,178,655,194,666,213,704,235,710,247,741,340,772,368,788,391,787,436,792,443,800,453,799,471,757,488,742,422,721,410,768,381,766,398,732,413,714,400,687,380,714,361,728,341,710,346,691,361,681,376,664,366,645,340,630,325,617,310,618,279,631,230,646,220,633,231,606,210,592,204,573,176,590" />

	<area shape="poly" alt="entredeuxmers" href=""
		coords="589,745,654,694,669,659,737,522,704,510,674,538,637,539,594,541,576,526,517,543,490,539,489,526,466,531,452,510,425,493,399,477,355,455,337,461,307,415,250,385,282,443,283,475,284,508,276,529,295,557,306,593,338,615,368,636,391,661,416,692,429,719,452,734,485,731,521,722,557,725,576,737" />
</map>

Enfin ton image dans le répertoire img du thème

 

 

Le gif provient du fait que l'image n'étant pas trouvé le .htaccess appelle 404.php qui retourne 404.gif en s'emberlificotant dans les noms