Cela fait un moment que j'ai ce tutoriel sous le coude, mais je n'avais pas pu le poster, donc voilà: [Les images ne sont pas encore hébergées sur un hébergeur, mais sur mon site. Merci de patienter pour l'hébergement. ^^']

Pour ce . Ceci [Pour ma part, je n'ai pas mis de vrais liens, c'est juste pour l'exemple après tout.] :



01. En premier lieu, créez l'image que vous souhaitez coder ainsi que tout ce qui change séparement. [ Exemple ]

02. Nous allons indiquer qu'elle image est à utiliser en fond, sa largueur [width], sa hauteur [height], ainsi que lui attribuer un "nom" [En laissant le # avant], ce qui nous servira plus tard. il faut donc utiliser ce code:

Code:

<img src="URLIMAGE" usemap="#NOM" id="kaktus" width="LARGUEUR" height="HAUTEUR">

03. Ensuite, nous allons indiquer qu'il s'agit d'une image MAP, et lui donner le même nom que nous lui avons donné tout à l'heure [Sans le # cette fois], on devrait avoir quelque chose comme cela:

Code:

<img src="URLIMAGE" usemap="#NOM" id="kaktus" width="LARGUEUR" height="HAUTEUR">
<map name="NOM"></map>

04. Nous allons maintenant indiquer où sera placer un certain lien sur l'image et quand on passera à cet endroit, l'image changera pour faire place à la modification. Pour cela, ouvrez Photofiltre et votre image, sélectionnez l'endroit où vous voulez que le lien redirige et remplissez le code suivant [ Exemple ] :

Code:

<img src="URLIMAGE" usemap="#NOM" id="kaktus" width="LARGUEUR" height="HAUTEUR">
<map name="NOM">
<area shape="rect" coords="W,X,Y,Z" href="#" title="MOTQUIAPPARAITAUPASSAGEDELASOURIS" onmouseover="document.getElementById('kaktus').src ='URLIMAGEMODIF'" onmouseout="document.getElementById('kaktus').src ='URLIMAGENORMALE'"></map>

05. Ensuite, il faut continuer avec le reste de l'image, et rajouter cette ligne en la modifiant avec le même principe:

Code:

<area shape="rect" coords="W,X,Y,Z" href="#" title="MOTQUIAPPARAITAUPASSAGEDELASOURIS" onmouseover="document.getElementById('kaktus').src ='URLIMAGEMODIF'" onmouseout="document.getElementById('kaktus').src ='URLIMAGENORMALE'">

06. Voilà vous avez terminé ! Et pour vous aider, voici le code que j'ai utilisé pour l'image plus haut:

Code:

<img src="images/tutoriel2/imagerendu.png" usemap="#acceuil" id="kaktus" width="650" height="455">
<map name="acceuil">
<area shape="rect" coords="224,9,280,42" href="#" title="Index du site" onmouseover="document.getElementById('kaktus').src ='images/tutoriel2/modif1.png'" onmouseout="document.getElementById('kaktus').src ='images/tutoriel2/imagerendu.png'">
<area shape="rect" coords="297,9,404,42" href="#" title="Tutoriaux" onmouseover="document.getElementById('kaktus').src ='images/tutoriel2/modif2.png'" onmouseout="document.getElementById('kaktus').src ='images/tutoriel2/imagerendu.png'">   
<area shape="rect" coords="411,9,532,42" href="#" title="Ressources" onmouseover="document.getElementById('kaktus').src ='images/tutoriel2/modif3.png'" onmouseout="document.getElementById('kaktus').src ='images/tutoriel2/imagerendu.png'">
<area shape="rect" coords="544,9,620,42" href="#" title="La Galerie" onmouseover="document.getElementById('kaktus').src ='images/tutoriel2/modif4.png'" onmouseout="document.getElementById('kaktus').src ='images/tutoriel2/imagerendu.png'"> 
<area shape="rect" coords="534,335,638,441" href="#" title="Concours" onmouseover="document.getElementById('kaktus').src ='images/tutoriel2/modif5.png'" onmouseout="document.getElementById('kaktus').src ='images/tutoriel2/imagerendu.png'">     
</map>