Activer un bouton déjà pré-installé sur le layout
On va maintenant activer les boutons de ton layout, alors pour ça reprendre ton code de ta page index.html, plus précisément celui-ci:
- Code:
-
<div id="layout">
<img src="alicia.jpg"/>
</div>
On va ajouter dans ce div, des MAP avec des COORDS.
le code de ce MAP ce présente comme suite:
- Code:
-
<map>
<area href="" coords="">
</map>
ce qui te donnera ça:
- Code:
-
<div id="layout">
<img src="alicia.jpg"/>
<map>
<area href="" coords="">
</map>
</div>
la ligne
area sert pout un bouton.
Comme
href="", on placera le nom de ta page qui correspond au bouton sans oublier de mettre l'extension .html (ex: alicia.html).
Pour le
coords, comment trouver les données à mettre, tu va ouvrir ton photofiltre (j'espère que tu l'as), et tu vas encadrer ton bouton (voir caps) et prendre les données (encadrée en rouge sur le cap)
>>
Caps ce qui te donnera pour le bouton HOME, ce code:
- Code:
-
<div id="layout">
<img src="alicia.jpg"/>
<map>
<area href="alicia.html" coords="58,372, 164,400">
</map>
</div>
mais si tu prévisualises, tu verra que ça ne fonctionnera pas encore car il faut préciser sur quel image on va placer ça donc ici le layout qui s'appelle alicia.jpg dans le code de son image on va ajouter un attribut
usemap="", et placer un nom entre les "" on va mettre layout.
Mais il faut aussi donner un nom à la MAP (le même nom!), avec l'attribut
name="".
[ Je t'ai expliqué cette partie à l'envers mais tu comprends en fait on nomme d'abord la map et puis on met un usemap, mais bon si tu encodes en commençant par usemap ça marchera aussi hein ] ce qui te donnera comme code:
- Code:
-
<div id="layout">
<img src="alicia.jpg" usemap="layout"/>
<map name="layout">
<area href="alicia.html" coords="58,372, 164,400">
</map>
</div>
et si tu fais une prévisualisation, tu verras que ton bouton ne fonctionne pas encore parce qu'il faut mettre un # devant le nom de la usemap, donc ça
- Code:
-
usemap="#layout"
là si tu clic dessus ça doit aller sur une autre page, où il y aura affiché uniquement le 'contenu'.
Pour empêcher ça, on va rajouter dans la ligne area un attribut
target="", entre les "" il faut placer le nom que tu as mis à ta frame si tu regardes à ta frame name=".." c'est gauche que tu as mis.
ce qui te donnera ce code:
- Code:
-
<area href="alicia.html" target="gauche" coords="58,372, 164,400">
voila normalement ça doit marcher si tous vas bien.
(si ça marche tu peux faire pour les suivants, en plaçant uniquement la ligne area l'une en dessous de l'autre, car je te le rappelle comme je l'ai dis plus haut une area est égale à un bouton)
Bon travail !