Jump to content
kate66

Carte Bordeaux Avec Zone Cliquable

Recommended Posts

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.

 

 

 

post-32223-0-38493000-1458325481_thumb.png

Edited by kate66 (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 license@prestashop.com 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 <contact@prestashop.com>
*  @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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More