PA codée et codage d'image

[Eden.]

Bonjour, je rencontre un problème avec ma page d'accueil, je l'ai codé avec du html et css pour une certaine partie mais il y a d'autres parties que je comptais codées manuellement car il s'agit d'image

J'avais commencé à suivre ce tuto :

Code:

Coder une PA (image')


1 / REALISER LA PA AVANT DE COMMENCER LE CODAGE
Vous devez d'abord réaliser votre PA et ne plus ajouter de modifications (à part éventuellement des ajouts, mais ne plus rien modifier sous peine de devoir recommencer tout le codage)

2 / AVOIR PHOTOFILTRE & NOTEPAD ++
Pour réaliser le codage il ne vous faut rien de plus que photofiltre et le bloc-note, mais vous allez voir que si vous téléchargez notepad++ (ici) vous allez vraiment vous simplifier la vie!
   •   a ) notepad++
   •   Une fois le logiciel téléchargé, il vous faut coller votre code (ci-dessous) dans la fenêtre pour pourvoir travailler aisément dessus. Vous allez ensuite dans Langage > H > HTML, et comme par magie des couleurs apparaissent et vous ne vous trouvez plus en face du charabia incompréhensible du départ, mais devant quelque chose d'un peu plus clair (si vous avez des bases, bien évidemment).
   •   
   •   b ) photofiltre
   •   Vous devez sélectionner la partie que vous souhaitez rendre cliquable sur votre création et observer la barre du bas, il vous faut maintenant repérer les coordonnées pour faire comprendre à votre code où se trouve votre future partie cliquable: capture


3 / COMPRENDRE ET ADAPTER LE CODE
Alors maintenant qu'on a tout sous la main, on va pouvoir commencer à coder notre PA.

   •   Premier code = début où se trouvent:
   •   - le nom de l'image (ce qui se trouve après 'img name' mais ça n'a aucune incidence sur le reste)
   •   - le lien de la PA (hébergée sur un forum par exemple pour être sûr qu'elle ne sera pas supprimée du serveur du jour au lendemain): http://...
   •   - la hauteur et la largeur de l'image (très important sinon ça déforme tout, et pour info c'est en pixels donc ici ce sera grâce à photofiltre, Image > Taille de l'image: capture))
   •   - le nom du code, je ne sais pas comment ça s'appelle en langage HTML, mais en gros c'est très important et il faut absolument que ce soit le même aux deux endroits de cette capture
   •   Code:
   •   <img name="NOM" src="URL DE L'IMAGE" height="HAUTEUR DE L'IMAGE" width="LARGEUR DE L'IMAGE" usemap="#accueil">
   •   
   •   
   •   Là c'est ce qui va y avoir entre les balises map. Ce sont les coordonnées de chaque endroit cliquable sur votre PA. Il doit y avoir autant de lignes area shape (à la suite) que de liens qui vont se retrouver sur votre PA. Elle contient donc:
   •   - les coordonnées de l'endroit cliquable (les chiffres qui sont ici)
   •   - le lien que vous avez choisi pour cette partie de votre PA
   •   - le nom du lien (c'est pour vos repérer car ça n'aura aucune incidence pour les utilisateurs)
   •   Code:
   •   <area shape="rect" coords="X1,X2,Y1,Y2" href="LIEN OU VA MENER VOTRE TITRE SUR LA PA" alt="NOM DU LIEN">
   •   
   •   
   •   et enfin là, ce sont les balises à placer avant et après area shape, elles sont évidemment indispensables et ne doivent pas être omises!
   •   Code:
   •   <map name="accueil"></map>
   •   
   •   
   •   le code final doit donc ressembler à ça:
   •   Code:
   •   <img name="NOM" src="URL DE L'IMAGE" height="HAUTEUR DE L'IMAGE" width="LARGEUR DE L'IMAGE" usemap="#accueil"><map name="accueil"><area shape="rect" coords="X1,X2,Y1,Y2" href="LIEN OU VA MENER VOTRE TITRE SUR LA PA" alt="NOM DU LIEN"></map>


mais quand j'ai placé la première balise tout s'est déformé, la page d'accueil est apparue deux fois  

Je me demande donc comment je dois faire, est-ce que les deux formes de codage sont possibles, y'a t'il un endroit particulier pour inclure le code, j'ai tous les coordonnées mais après... je sais pas où placer ce code pour éviter que ça démonte tout...

Merci   

[demeter1]

Si mes souvenirs sont bons les map ne fonctionnent plus avec le nouvel éditeur.

Dans l'attribut image de usemap, il faut l'identifiant ( id="..." ) ou le name ( name="..." ) de la balise <map /> précédé d'un caractère # pour que cela fonctionne.

[Eden.]

Bouh tu n'aurais pas un exemple par hasard d'une ligne... Et ce type de codage est compatible avec des codes div class ?

[demeter1]

Voici un exemple

Code:

<div style="text-align:center; margin-left:auto; margin-right:auto;">
  <img border="0" alt="" usemap="#aaa" src="http://i55.servimg.com/u/f55/18/57/83/12/map_lu23.jpg" id="Image-Maps_5201210171219353" style="width: 1827px; height: 1268px;"/>
  <map id="aaa" name="aaa">
      <area title="Blitzing Pumpkins - Tlax Reebork Arena" alt="" href="http://zlzl.forumactif.org/t68-le-squig-enrage-blitzing-pumpkins-bas-fonds" coords="1442,314,1514,382" shape="rect"/>
      <area title="Kro Dead Team - Itza Koma Ethylik Stadium" alt="" href="http://zlzl.forumactif.org/t79-genesak-kro-dead-team-necromantique" coords="1458,532,1530,612" shape="rect"/>
      <area title="Ostermarck Cocks Cutter - Tlax Reebork Arena" alt="" href="http://zlzl.forumactif.org/t65-le-squig-enrage-ostermark-cockscutter-halfeling" coords="1554,310,1630,388" shape="rect"/>
      <area title="Glamso Drunkards - Kvalmar Trollness Park" alt="" href="http://lesquigenrage.forumactif.com/t5403-glamso-drunkards" coords="1430,210,1500,272" shape="rect"/>
      <area title="Ghorghor Boyz - Pirate Bay's Blackmoon Stadium" alt="" href="http://zlzl.forumactif.org/t117-ghorghor-ghorghor-boyz-orques-zquigbowl-2517" coords="180,114,248,172" shape="rect"/>
      <area title="Gardes du jardin Suspendu - Skeggi's Skeggi" alt="" href="http://zlzl.forumactif.org/t119-gardes-du-jardin-suspendu" coords="294,116,354,170" shape="rect"/>
      <area title="Port du Gropik Piragnass - Stade du Pain de Sucre de Chupayotl" alt="" href="http://zlzl.forumactif.org/t118-port-du-gropik-piragnass-gailn-kharghelen-gobs" coords="1474,830,1542,892" shape="rect"/>
      <area title="Rejetons d'Arelate - Amphitea, Jungle du Coupeur de Tete" alt="" href="http://zlzl.forumactif.org/t116-dan-brad-les-rejetons-d-arelate-sylvains" coords="1474,692,1740,754" shape="rect"/>
      <area title="Les Klouneurs - Circus Rictus, Chaqua" alt="" href="http://zlzl.forumactif.org/t88-tarvin-le-klouneurs-bas-fonds" coords="296,570,360,628" shape="rect"/>
  </map>
</div>

[Eden.]

Merci beaucoup, problème résolu !