Hugo.b Posted July 12, 2016 Share Posted July 12, 2016 Bonjour à vous tous, J’ai une question sans réponse, je veux ajouter une photo avec une particularité, en fonction de où on clique sur la photo on atterrit sur une page différente (une cible URL différente) Pour vous donner un exemple cela devrait ressembler à la page d’accueil du site leboncoin en fonction du département sur lequel on clique on atterrit sur une page spécifique à notre région. Merci de votre aide Hugo Link to comment Share on other sites More sharing options...
ChDUP Posted July 13, 2016 Share Posted July 13, 2016 Vous pouvez utiliser les éléments <map> et <area> pour definir des zones cliquables. http://www.w3schools.com/tags/tag_area.asp Pour l'exemple du boncoin, ce sont probablement des images svg Tout dépend de ce que vous voulez faire en fait. Mais c'est sans rapport avec Prestashop Link to comment Share on other sites More sharing options...
Hugo.b Posted July 13, 2016 Author Share Posted July 13, 2016 Merci pour votre réponse. Voici le code HTLM: <img src="[maping_resulta] (importée)" width="677" height="648" border="0" usemap="#map" /><map name="map"><!-- #$-:Image map file created by GIMP Image Map plug-in --><!-- #$-:GIMP Image Map plug-in by Maurits Rijk --><!-- #$-:Please do not edit lines starting with "#$" --><!-- #$VERSION:2.3 --><!-- #$AUTHOR:Hugo --><area shape="poly" coords="115,233,199,209,260,205,264,222,291,196,335,213,353,255,337,263,321,266,296,271,398,321,392,372,340,366,331,323,311,305,272,290,223,298,163,308,126,293,116,239" alt="Val de Loire" nohref="nohref" /><area shape="poly" coords="162,311,217,326,218,368,190,376,145,338" alt="Cognac" nohref="nohref" /><area shape="poly" coords="210,386,245,387,248,415,311,403,342,431,299,477,239,475,227,447,199,453,201,435,210,387" alt="Sud-Ouest" nohref="nohref" /><area shape="poly" coords="159,355,210,389,196,440,150,401" alt="Bordelais" nohref="nohref" /><area shape="poly" coords="182,462,223,454,244,489,239,515,192,490" alt="Armagnac" nohref="nohref" /><area shape="poly" coords="284,502,394,464,410,493,342,513,341,569,313,568" alt="Languedoc Rousillon" nohref="nohref" /></map> Voici le code HTLM, mais je ne sais pas ou l'intégrer?? ps: les zones ne pointent pas vers un endroit c'est normale ! Link to comment Share on other sites More sharing options...
ChDUP Posted July 13, 2016 Share Posted July 13, 2016 Vous voulez que ça apparaisse où ? Link to comment Share on other sites More sharing options...
Hugo.b Posted July 13, 2016 Author Share Posted July 13, 2016 Sur la page d'accueil de prestashop. Link to comment Share on other sites More sharing options...
ChDUP Posted July 13, 2016 Share Posted July 13, 2016 c'est plus que vague Link to comment Share on other sites More sharing options...
Hugo.b Posted July 13, 2016 Author Share Posted July 13, 2016 En dessous de mon image de vin sur la photo ci-joint. Link to comment Share on other sites More sharing options...
ChDUP Posted July 13, 2016 Share Posted July 13, 2016 Je ne sais pas comment votre image est insérée c'est un module ? greffé sur quel hook ? Si c'est pour insérer entre 2 modules, il vous faudra développer un module. sinon, à vous de trouver le bon emplacement dans vos tpl. Link to comment Share on other sites More sharing options...
Hugo.b Posted July 13, 2016 Author Share Posted July 13, 2016 Il s'agit du module image slider merci beaucoup pour votre aide. Link to comment Share on other sites More sharing options...
Hugo.b Posted July 15, 2016 Author Share Posted July 15, 2016 J’ai la solution : voici la solution avec le code ci-dessous: <html> <head> <style type="text/css"> </style> </head> <body> <div id="content"> <img src="http://au20divin.com/img/p/7/1/map" width="1000" height="1132" border="0" usemap="#map" /> <map name="map"> <area shape="poly" coords="191,448,239,425,295,420,308,349,455,354,469,417,513,371,573,397,607,435,621,485,604,511,627,563,634,598,696,600,690,693,617,691,574,646,599,566,533,571,515,566,498,500,468,532,406,512,393,563,355,545,294,460,279,492,313,547,303,575,274,576,256,556,222,565,205,522,189,450" alt="Val de Loire" title="Val de Loire" href="http://au20divin.com/53-val-de-loire-maping" /> <area shape="poly" coords="635,214,589,335,711,399,771,323,725,298,711,213" alt="Champagne" title="Champagne" href="http://au20divin.com/60-champagne-maping" /> <area shape="poly" coords="859,282,967,291,948,366,927,426,907,412,914,336,846,317" alt="Alsace" title="Alsace" href="http://au20divin.com/52-alsace-maping" /> <area shape="poly" coords="685,439,713,514,713,551,727,591,740,614,754,559,753,535,741,528,769,475,824,453,821,433,690,426" alt="Bourgogne" title="Bourgogne" href="http://au20divin.com/61-bourgogne-maping" /> <area shape="poly" coords="641,579,639,597,702,597,707,635,715,644,723,646,726,642,731,633,732,622,733,614,735,608,724,588,716,578" alt="Beaujolais" title="Beaujolais" href="http://au20divin.com/56-beaujolais-maping" /> <area shape="poly" coords="815,491,781,525,775,585,766,607,772,655,799,674,826,710,862,695,862,674,902,668,894,652,900,636,909,627,904,618,895,605,892,574,880,570,849,584,853,603,842,615,834,605,827,592,819,556,851,526,840,502" alt="Jura Savoie" title="Jura Savoie" href="http://au20divin.com/58-jura-savoie-maping" /> <area shape="poly" coords="701,642,717,668,723,753,715,789,696,822,708,867,752,875,763,886,768,890,781,891,797,897,810,896,813,891,805,876,798,865,776,828,790,794,806,776,817,761,869,757,867,737,828,730,818,712,753,694,733,661,735,649,742,646,747,638,741,632,736,632,734,634,723,649,713,646,705,633" alt="Côtes du Rhône" title="Côtes du Rhône" href="http://au20divin.com/57-cotes-du-rhone-maping" /> <area shape="poly" coords="527,919,499,941,502,984,520,998,525,1002,534,1031,545,1033,552,1052,602,1047,603,1036,593,1022,594,980,610,950,647,936,682,916,708,908,724,887,718,871,708,870,696,858,679,862,679,877,666,819,554,814,546,871,558,889,558,888,557,900" alt="Langedoc Rousillon" title="Langedoc Rousillon" href="http://au20divin.com/62-languedoc-roussillon-maping" /> <area shape="poly" coords="803,866,843,844,851,856,861,836,971,848,953,891,919,919,895,959,848,978,810,970,791,952,764,943,745,929,733,900,726,875,745,875,757,882,766,893,781,893,802,900,815,895,814,891,803,870" alt="Provence" title="Provence" href="http://au20divin.com/59-provence-maping" /> <area shape="poly" coords="269,672,314,657,419,662,417,687,358,721,352,743,369,746,369,760,355,761,362,770,349,784,334,788,313,785,303,777,288,766,287,742,275,737,265,680" alt="Bordeaux" title="Bordeaux" href="http://au20divin.com/55-bordelais-maping" /> <area shape="poly" coords="363,720,356,741,371,745,370,767,367,762,361,762,365,772,348,787,341,790,241,900,213,923,219,944,250,935,258,926,293,947,323,943,326,924,347,912,474,915,478,895,535,869,552,811,583,784,585,766,525,754,493,788,440,765,422,721 alt="Sud-Ouest" title="Sud-Ouest" href="http://au20divin.com/54-sud-ouest-maping" /> </div> </body> </html> Intégrer au site sur la page d’accueil grâce au module Home text editor Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now