Image pc/mobile [Réglé]
ZatchBell68 Membre non connecté
Booster Bazooka
- Booster Bazooka
- Voir le profil du membre ZatchBell68
- Inscrit le : 21/06/2009
- Site internet
- Groupes :
Voilà j'ai une image avec une partie ou trois boutons sont cliquable.
J'ai un code html ajouté dans l'edito de HomeLanding.
Code HTML :
<body> <div> <img alt="Tarifs.png" usemap="#Tarifs" src="/upload/tarifs.png"> <map id="Tarifs" name="Tarifs"> <area alt="" href="pages/diag-reparation" shape="rect" coords="45,360,216,400"> <area alt="" href="pages/intervention" shape="rect" coords="294,355,467,405"> <area alt="" href="pages/forfait-annuel" shape="rect" coords="543,360,715,400"> </map> </div> </body>
Sur la version pc cela fonctionne correctement, mes boutons fonctionnent, mais en version mobile pas du tout et en plus cela modifie totalement le design de mon site, vous verrez le problème en image.
Je pense que le code n'est absolument pas adapté, mais je n'ai rien trouvé d'autre.
J’espère que vous pourrez m'apporter une solution.
Bon j'ai cherché beaucoup et j'aurais dû le faire bien avant de poster le message ici, mais c'est vrai qu'avec mes connaissances j'ai un peu de mal, mais si jamais je donne ma réponse ici.
Juste penser à télécharger le plugin jquery imageMapResizer.min.js
Code HTML :
[html]<img src="upload/tarifs.png" id="map-image" style="width: 759px; max-width: 100%; height: auto;" alt="" usemap="#Sos-Info68" /> <map name="Sos-Info68"> <area shape="rect" coords="544, 361, 715, 400" href="pages/forfait-annuel" alt="Details" title="Page de nos contrats" /> <area shape="rect" coords="296, 354, 466, 405" href="pages/Intervention" alt="Details" title="Pages de l'ensemble des prestations" /> <area shape="rect" coords="46, 361, 215, 400" href="pages/diag-reparation" alt="Détails" title="Page Diagnostique et Réparation" /> </map> <script src="/kernel/lib/js/jquery/imageMapResizer.min.js"></script> <script>$(document).ready(function(e){$("map").imageMapResize();});</script>[/html]
Merci
Édité par ZatchBell68 Le 19/02/2020 à 12h38
babsolune Membre non connecté
Administrateur
- Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
Mais ce n'est pas le seul soucis, niveau référencement ça ne prend en compte que le title
ZatchBell68 Membre non connecté
Booster Bazooka
- Booster Bazooka
- Voir le profil du membre ZatchBell68
- Inscrit le : 21/06/2009
- Site internet
- Groupes :
Oui c'est un peux la galère, mais la j'avais besoin de quelque chose d'actif rapidement. Par la suite je verrais pour faire un découpage sur Photoshop et faire les choses un peux mieux.
Merci beaucoup
ZatchBell68 Membre non connecté
Booster Bazooka
- Booster Bazooka
- Voir le profil du membre ZatchBell68
- Inscrit le : 21/06/2009
- Site internet
- Groupes :
Je reviens sur ce post pour vous donner un site qui m'a bien aidé pour transformer mon code en responsive, il faut jute faire quelque ajustement dans le code et quelque fichier a téléchargé.
<a href="https://image-map.weebly.com/">https://image-map.weebly.com/</a>
Lorsque vous générez le fichier html il y a la ligne
Code :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="imageMapResizer.min.js"></script>
<script>$(document).ready(function(e){$("map").imageMapResize();});</script>
Qu'il faut remplacer par
Code :
<script src="https://lien_de_votre_site/kernel/lib/js/jquery/imageMapResizer.min.js"></script>
<script>$(document).ready(function(e){$("map").imageMapResize();});</script>
et mettre sur votre serveur à l'emplacement /kernel/lib/js/jquery/ le fichier que vous trouverez ici : <a href="https://github.com/davidjbradshaw/image-map-resizer">https://github.com/davidjbradshaw/image-map-resizer</a>
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie