HTML : img usemap et area coords
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
HTML : img usemap et area coords
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:
Je me sers ensuite du map tag pour définir les coordonnées de mes 4 zones.
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?
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, 23:36, édité 1 fois
Re: HTML : img usemap et area coords
Personne?
Re: HTML : img usemap et area coords
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?
Re: HTML : img usemap et area coords
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 ...
https://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 .
une fois le code adapté à votre convenance , supprimez tous les
de ce code pour enlever les bordures .
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 ...
https://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; |
Re: HTML : img usemap et area coords
Merci pour votre réponse. Il s'agit de 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 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.
Re: HTML : img usemap et area coords
L'astuce proposée par Fa ne fonctionne uniquement si on ne bascule pas de mode d'édition . Il faut rester en mode source .
Re: HTML : img usemap et area coords
L'idée des inline-block fonctionne à merveille. Merci énormément!
Sujets similaires
» HTML : img usemap et area coords (2)
» Bannière avec code html (map et area)
» Afficher une annonce html sans avoir besoin de faire appel à une page HTML
» la fonction area en panne !
» Mon code HTML ne veut pas fonctionner sur mon gestionnaire de pages HTML
» Bannière avec code html (map et area)
» Afficher une annonce html sans avoir besoin de faire appel à une page HTML
» la fonction area en panne !
» Mon code HTML ne veut pas fonctionner sur mon gestionnaire de pages HTML
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum