HTML : img usemap et area coords

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu HTML : img usemap et area coords

Message par allenz0rz le Lun 12 Mai 2014 - 6:18

Bonjour,

Dans l'entête de mon forum, j'ai une image carrée que j'ai séparée en quatre carrés égaux. Chacune de ces sections de l'image amène vers un lien spécifique.

Alors j'insère mon image:
Code:
<img usemap="#monimage" border="0" src="http://i40.servimg.com/u/f40/14/30/26/91/nas10.png" />
 

Je me sers ensuite du map tag pour définir les coordonnées de mes 4 zones.
Code:
<map name="monimage">
<area title="Zone 1" target="_blank" href="mon lien1" coords="0,0,60,60" shape="rect" />
<area title="Zone 2" target="_blank" href="mon lien2" coords="61,0,120,60" shape="rect" />
<area title="Zone 3" target="_blank" href="mon lien3" coords="0,61,60,120" shape="rect" />
<area title="Zone 4" target="_blank" href="mon lien4" coords="61,61,120,120" shape="rect" />
</map>

Lorsque j'enregistre, tout fonctionne. Par contre, lorsque je reviens dans le code de l'entête, mon <map name="monimage"> se transforme automatiquement en <map id="monimage">. De ce fait, quand j'enregistre, le code est désormais "map id" et mes liens ne fonctionnent plus. Y a-t-il un moyen pour régler ce problème?


Dernière édition par allenz0rz le Jeu 15 Mai 2014 - 22:36, édité 1 fois

allenz0rz
Nouveau membre

Masculin
Messages : 28
Inscrit(e) le : 31/05/2012

http://lhstanleycup.forum-canada.net
allenz0rz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: HTML : img usemap et area coords

Message par allenz0rz le Jeu 15 Mai 2014 - 1:56

Personne?

allenz0rz
Nouveau membre

Masculin
Messages : 28
Inscrit(e) le : 31/05/2012

http://lhstanleycup.forum-canada.net
allenz0rz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: HTML : img usemap et area coords

Message par allenz0rz le Jeu 15 Mai 2014 - 19:12

Sinon, si personne ne sait pourquoi mon code se fait modifier tout seul, peut-être que quelqu'un aurait une astuce à me proposer? Un code détourné qui aurait un effet similaire?

allenz0rz
Nouveau membre

Masculin
Messages : 28
Inscrit(e) le : 31/05/2012

http://lhstanleycup.forum-canada.net
allenz0rz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: HTML : img usemap et area coords

Message par Scoubifitz le Jeu 15 Mai 2014 - 22:02

bonsoir,

je suppose que ce code est dans un message , HTML activé ?
à moins que ce soit dans un Widget , ou la page d'accueil ?

il y a effectivement une astuce pour que le code ne soit pas "modifié" (ou interprété) par l'éditeur ...

http://forum.forumactif.com/t358075-correction-de-la-mise-en-forme-du-nouvel-editeur-en-mode-source

Ceci dit , le code proposé est pour l'exemple du bug , je suppose , parce que l'image mappée est trop petite ...

L'image fait 38x38 , alors que les coordonnées des AREA vont jusqu'à 120 ...

on peut aussi passer par un simple cadre , si les AREA sont de forme rectangulaires .
On met un cadre de la taille de l'image , on place l'image en fond .
on met les liens , on applique un style aux liens en les transformant en blocks (inline-block) d'une certaine taille .

Code:
<div style="background:url(http://i57.servimg.com/u/f57/16/05/02/22/bannie17.png);height:275px;width:200px;text-align:center;border:1px solid;">
<a href="http://lhstanleycup.forum-canada.com/h1-" target="_blank" style="display:inline-block;width:95px;height:130px;border:1px solid;"></a><a href="http://lhstanleycup.forum-canada.com/h2-" target="_blank" style="display:inline-block;width:95px;height:130px;border:1px solid;"></a><br /><a href="http://lhstanleycup.forum-canada.com/h3-" target="_blank" style="display:inline-block;width:95px;height:130px;border:1px solid;"></a><a href="http://lhstanleycup.forum-canada.com/h4-" target="_blank" style="display:inline-block;width:95px;height:130px;border:1px solid;"></a></div>

une fois le code adapté à votre convenance , supprimez tous les
border:1px solid;
de ce code pour enlever les bordures .

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: HTML : img usemap et area coords

Message par allenz0rz le Jeu 15 Mai 2014 - 22:20

Merci pour votre réponse. Il s'agit de l'entête de mon forum.

@allenz0rz a écrit:Dans l'entête de mon forum

En fait, la vraie image mappée est celle qui fait 38x38, avec des régions conformes à la taille de l'image (4 zones de 19x19). Je faisais des tests avec une image plus grande et j'ai oublié de changer mes zones, voilà qui explique la non-conformité entre l'image et les zones.

Je vais faire quelques tests et je vous reviens.

allenz0rz
Nouveau membre

Masculin
Messages : 28
Inscrit(e) le : 31/05/2012

http://lhstanleycup.forum-canada.net
allenz0rz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: HTML : img usemap et area coords

Message par Scoubifitz le Jeu 15 Mai 2014 - 22:34

L'astuce proposée par Fa ne fonctionne uniquement si on ne bascule pas de mode d'édition . Il faut rester en mode source .

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: HTML : img usemap et area coords

Message par allenz0rz le Jeu 15 Mai 2014 - 22:36

L'idée des inline-block fonctionne à merveille. Merci énormément!

allenz0rz
Nouveau membre

Masculin
Messages : 28
Inscrit(e) le : 31/05/2012

http://lhstanleycup.forum-canada.net
allenz0rz a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum