|
|
|
Source : ct|02.11.08
< Tutoriels Informatique, Multimédia, Chinois
Un lien placé dans une page html de départ, permet de diriger les internautes vers une page html de destination, lorsque ceux-ci cliquent ce lien.
Dans ce tutorial, nous allons regarder comment créer les trois types de liens suivants :
- Les liens de type texte ;
- Les liens de type image fixe ;
- Les liens de type bouton "rollover".
Nous appellerons respectivement "essai.html" et "dest.html" les pages html de départ et de destination. Nous supposerons que ces pages sont placées dans un même répertoire.
Le code suivant placé dans la page "essai.html" de départ permet d'atteindre la page "dest.html" de destination à l'aide d'un lien de type texte.
<html>
<head>
<title>Essai</title>
</head>
<body>
<a href="dest.html">Cliquez ici pour aller vers dest.html</a>
</body>
</html>
Soit "image.png" l'image destinée à servir de lien cliquable. Supposons que cette image soit placée dans le même répertoire que la page essai.html.
Le code suivant, placé dans la page "essai.html", permet d'atteindre la page "dest.html".
<html>
<head>
<title>Essai</title>
</head>
<body>
<a href="dest.html"><img src="image.png" alt="Image"/></a>
</body>
</html>
Un bouton "rollover" est composé de deux images différentes. La première image, que nous appellerons "bouton1_out.png" est destinée à être affichée quand la souris se trouve en dehors de l'emplacement correspondant. La seconde, que nous appellerons "bouton1_over.png" est destinée à être affichée quand la souris se trouve sur l'emplacement correspondant. Nous supposerons que ces deux images sont placées dans le même répertoire que la page "essai.html".
Le code suivant, placé dans la page "essai.html", permet d'atteindre la page "dest.html" quand on clique le bouton "rollover".
<html>
<head>
<title>Essai</title>
</head>
<body>
<!-- bouton -->
<a href="dest.html" onmouseover="document.bouton1.src='bouton1_over.png'"
onmouseout="document.bouton1.src='bouton1_out.png'">
<img src="bouton1_out.png" name="bouton1" alt=""/></a>
<br/>
</body>
</html>
 |
|
© http://turrier.fr (2007) |