[RÉGLÉ] Image mapping responsive

[amarchand83]

Bonjour,

sur une carte j'utilise les balises AREA et MAP pour cliquer sur certaines villes, cela fonctionne parfaitement bien sur mon écran,

le problème est que les valeurs des coordonnées sont en valeurs absolues et donc pointent n'importe où sur d'autres tailles d'écran

J'ai cherché une extension sans la trouver ou une solution mais je n'ai pas trouvé non plus

Peut être d'autres solutions que ces balises ?

merci de vos réponses

[klarann18]

Re : Image mapping responsive

il faut regarder du coté des cartes svg => https://www.amcharts.com/svg-maps/

[lomart]

Re : Image mapping responsive

Bonsoir,

Voir ma réponse dans ce post : https://forum.joomla.fr/showthread.p...light=stowball

[amarchand83]

Re : Image mapping responsive

Merci je vais regarder,

j'ai aussi trouver qq chose qui me semble intéressant, je suis en train d'essayer.
j'ai à peu près compris, mais j'aurai besoin d'un coup de main sur le point 5) :

"Puis ajoutez celui du script "jquery.rwdImageMaps.min.js" (que vous aurez préalablement copié et mis dans le répertoire "js")"

LE répertoire JS ? je ne comprends pas où il se trouve LE répertoire..

Voici ce que j'ai trouvé : Comment rendre l'image Responsive Web Design

1. Télécharger le plugin : jQuery-rwdImageMaps

2. Si possible précisez la taille (width & height) de votre image dans votre code HTML

3. Ajouter à votre feuille de style, celui-ci :

img[usemap] {
height: auto;
max-width: 100%;
width: auto;
}

4. Ajoutez un lien vers la bibliothèque jQuery version >= 1.10.2 et celle de "rwdImageMaps" de préférence dans votre pied de page avant la fermeture du </body>.
Ici il s'agit du CDN mis à disposition par Google, mais libre à vous d'héberger cette bibliothèque jQuery sur votre serveur si vous préférez.

5. Puis ajoutez celui du script "jquery.rwdImageMaps.min.js" (que vous aurez préalablement copié et mis dans le répertoire "js")

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.rwdImageMaps.min.js"></script>

6. Sous celles-ci appelez cette fonction JavaScript:

<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>

7. Votre image et sa map sera ainsi Responsive ! Cette page en est une démonstration, redimensionnez la fenêtre de votre navigateur pour la tester, l'œil est bien cliquable à n'importe quelle taille... Une autre démo (l'originale de Matt) ici : RWD-Image-Maps.

[lomart]

Re : Image mapping responsive

C'est la solution que j'ai indiquée

[amarchand83]

Re : Image mapping responsive

Oui, merci nos messages se sont croisés, mais cela ne marche pas, j'ai mal faire qq chose, voilà ce que j'ai fait :

1) Dans ma custom.css : (est-ce bien le nom de ma usemap --> #maroc ? avec le #,

img[#maroc] {
height: auto;
max-width: 100%;
width: auto;
}

Dans media/media/js : (je doute du répertoire ?)

J'ai chargé les scripts :
jquery.rwdImageMaps.js
jquery.rwdImageMaps.min.js

Dans index.php du template j'ai ajouté juste avant </body> je ne vois pas à quoi correspond $(document) ?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[#maroc]').rwdImageMaps();
});
</script>

[lomart]

Re : Image mapping responsive

J'ai donné une solution qui a fonctionné pour la personne ayant posé le problème.
Pourquoi ne pas l'utiliser ?

[klarann18]

Re : Image mapping responsive

je conseille plutot les svg encore une fois, moins de bricolage et c'est plus stable, voici un excellent tuto pour le mettre en place (hors joomla je précise) :

https://www.youtube.com/watch?v=UZs8l50gxjU

[amarchand83]

Re : Image mapping responsive

Merci pour ton message très intéressant Klarann18, mais je suis avec Joomla

Lomart, je vais suivre tes conseils, voilà ce que j’ai fait, mais pas de résultat et cela dépasse mes compétences actuelles :

1) J’ai télécharger dans media/media/js :

jquery.rwdImageMaps.min.js
jquery.rwdImageMaps.min.js

2) J’ai précisé la taille (width & height) de ma carte dans le HTML

3) J’ai ajouter dans ma custom.css :

img[usemap] {
height: auto;
max-width: 100%;
width: auto;
}

4) J’ai ajouter mon index.php de mon template dans la partie body juste avant </body> :

< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
< script src="js/jquery.rwdImageMaps.min.js"></script>
< script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
< /script>

Qu’ai-je mal fait ?
Usemap ? est-ce le mot générique ou le nom de ma usemap ? j'ai fait différents essais sans résultat...
Idem pour "document" ? les docs ne sont clairs que pour ceux qui savent déjà…

[klarann18]

Re : Image mapping responsive

encore une fois tu peux ensuite adapter le code pour l'inclure dans un joomla... ce n'est pas incompatible loin de la

[lomart]

Re : Image mapping responsive

Bonjour,

Qu’ai-je mal fait ?

Déjà ne pas utiliser le code que j'ai donné qui fonctionne avec Joomla

<script src="media/xx/jquery.rwdImageMaps.min.js"></script>
<script>
jQuery(function($) { 
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});
});
</script>

Inutile de charger jQuery, en général, il l'est d'office avec les dernières versions

Usemap ? est-ce le mot générique ou le nom de ma usemap ?

Le sélecteur CSS img[usemap] veut dire toutes les images avec un attribut usemap
l'id de ton imagemap est l'argument de l'attribut usemap

[amarchand83]

Re : Image mapping responsive

voilà ce que j'ai fait, et plus rien ne marche, plus non sur mon écran de base (ce qui était ok avant)

Dans index.php du template juste avant </body> j’ai ajouté :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="media/media/js/jquery.rwdImageMaps.min.js"></script>
<script src="media/media/js/jquery.rwdImageMaps.js"></script>
<script>
jQuery(function($) {
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
});
</script>

dans ma custom.css

img[usemap] {
height: auto;
max-width: 100%;
width: auto;
}


dans le répertoire media/media/js j’ai chargé :

jquery.rwdImageMaps.js
jquery.rwdImageMaps.min.js

[lomart]

Re : Image mapping responsive

Pourrais-tu faire uniquement ce que je préconise.
Tu écris :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="media/media/js/jquery.rwdImageMaps.min.js"></script>
<script src="media/media/js/jquery.rwdImageMaps.js"></script>

C'est à dire que tu charge jQuery (inutile comme je l'ai dit dans ma réponse #11) et le même script en version normale et minifié (donc une de trop)

Je n'ai jamais dit d'ajouter du CSS

Quel est le code HTML ?

[amarchand83]

Re : Image mapping responsive

Je comprends Klarann18, mais c'est premier site...

j’essaye Lomart…
j’ai donc remis ma custom.css d’origine

et juste le script dans index.php du template
<script src="media/media/js/jquery.rwdImageMaps.min.js"></script>
<script> jQuery(function($) { $(document).ready(function(e) { $('img[usemap]').rwdImageMaps();
});
});
</script>

ça remarche comme avant, c’est à dire sur mon écran, mais pas en changeant la taille de l’écran
Je ne comprends pas : il n’y a pas de « jquery.rwdImageMaps.min.js » dans media/media/js si je ne le charge pas ? je sens un pb là mais je ne suis pas capable de voir la solution… (il n’y a pas de répertoire media/js)


Voici le html de la page

<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 68%;" rowspan="3"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/maroc/carte.jpg" alt="Maroc" usemap="#maroc" width="1030px" height="680px" /> <map name="maroc">
<area alt="Rubis Marrakech" coords="564,360,20" shape="circle" href="index.php?option=com_content&amp;view=articl e&amp;id=96" target="_self" />

<area alt="Nord Saphir" coords="762,68,50" shape="circle" href="index.php?option=com_content&amp;view=articl e&amp;id=98" target="_self" />

<area alt="Diamant Atlantique - Rabat - Casablanca" coords="645,193,50" shape="circle" href="index.php?option=com_content&amp;view=articl e&amp;id=99" target="_self" />

<area alt="Diamant Atlantique - Essaouira - Agadir" coords="430,413,60" shape="circle" href="index.php?option=com_content&amp;view=articl e&amp;id=99" target="_self" />

<area alt="Atlas Emeraude" coords="810,198,50" shape="circle" href="index.php?option=com_content&amp;view=articl e&amp;id=124" target="_self" />

<area alt="Atlas Emeraude" coords="770,299,50" shape="circle" href="index.php?option=com_content&amp;view=articl e&amp;id=124" target="_self" />

<area alt="Atlas Emeraude" coords="692,362,40" shape="circle" href="index.php?option=com_content&amp;view=articl e&amp;id=124" target="_self" />

<area alt="Or, Grand sud" coords="807,385,50" shape="circle" href="index.php?option=com_content&amp;view=articl e&amp;id=152" target="_self" />

<area alt="Or, Grand sud" coords="791,472,50" shape="circle" href="index.php?option=com_content&amp;view=articl e&amp;id=152" target="_self" />
</map></td>
<td style="width: 32%;"><a href="index.php?option=com_content&amp;view=articl e&amp;id=51" target="_self"><img class="effectck-lily effectck-lily" title="LES PARURES DE VOYAGE::Journée expériences à la carte" src="images/maroc/maroc-signature-parures-voyage.jpg" alt="" /></a></td>
</tr>
<tr>
<td><a href="index.php?option=com_content&amp;view=articl e&amp;id=52" target="_self"><img class="effectck-lily effectck-lily" title="LES MAISONS D'EXCEPTION::Hôtels, riads &amp; villas" src="images/maroc/maroc-signature-maisons-exception.jpg" alt="" /></a></td>
</tr>
<tr>
<td><a href="index.php?option=com_content&amp;view=articl e&amp;id=9" target="_self"><img src="images/signature/monde.jpg" alt="" /></a></td>
</tr>
</tbody>
</table>

[lomart]

Re : Image mapping responsive

il n’y a pas de « jquery.rwdImageMaps.min.js » dans media/media/js si je ne le charge pas ? je sens un pb là mais je ne suis pas capable de voir la solution… (il n’y a pas de répertoire media/js)

ton fichier jquery.rwdImageMaps.min.js est dans quel dossier ?

C'est quoi ce tableau mal construit.
1ère ligne : 4 cellules dont une en rowspan=3
2ème et 3ème ligne : 1 colonne

Fais le test sur un exemple simple et épuré