|
|
 |
 |
 |
|
 |
|
 |
|
|
|
   |
|
 Précharger
les images dans le cache du navigateur
Roll
Over simple
Roll
Over sur une autre image |
|
|
1. Précharger
les images dans le cache du navigateur
Précharger des images peut s'avérer
très utile pour effectuer des Roll
over.
Si vous ne le faîtes pas, votre image
ne sera pas changée de manière
instantannée.
Dés lors, tout l'effet tombe à
l'eau.
Dans la balise <HEAD></HEAD>,
vous devez insérer ce code Javascript
qui précharge les images :
<script langage="Javascript">
// Préchargement des images de substitution
image1_on.gif et image2_on.gif
a = new Image;
a.src = "../img/astuces/image1_on.gif";
b = new Image;
b.src = "../img/astuces/image2_on.gif";
</script>
|
 |
2. Roll
Over simple
Une fois le préchargement effectué,
insérons le code permettant de réaliser
un Roll Over :
<script langage="Javascript">
// Préchargement de l' image de substitution
image1_on.gif
a = new Image;
a.src = "../img/astuces/image1_on.gif";
</script>
Puis, à l'intérieur de la balise <BODY>,
on insère une image auquelle on attribue
un nom avec l'attribut "name".
Puis avec les gestionnaires d'évênement
"onMouseOver" et "onMouseOut",
on remplace l'image d'origine et on restitue
cette même image.
|
<a
href="#" onMouseOver="sanf.src=a.src"
onMouseOut="sanf.src=../img/astuces/image1_off.gif">
<img src="../img/astuces/image1_off.gif"
width="65" height="65"
border="0" name="sanf">
</a>
Exemple :
|
|
3. Roll
Over sur une autre image
Pour effectuer un Roll Over sur une autre
image, commençons par précharger
les 3 images qui se chargeront lors de l'évênement
"onMouseOver"
<script langage="Javascript">
// Préchargement des images de substitution
image1_on.gif, image2_on.gif et image3_on.gif
b = new Image;
b.src = "../img/astuces/image1_on.gif";
c = new Image;
c.src = "../img/astuces/image2_on.gif";
d = new Image;
d.src = "../img/astuces/image3_on.gif";
</script>
Ensuite, le survol de la souris sur ces 3
liens chargera une nouvelle image à
la place de celle ci-dessous.
Voici le code :
|
<table
width="200" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td width="100"><a
href="#" onMouseOver="golden.src=b.src"
onMouseOut="golden.src='../img/astuces/image1_off.gif'"
class="arial11orangvif">Image
n° 1 :</a></td>
<td rowspan="5"
align="center"><img
src="../img/astuces/image1_off.gif"
width="65" height="65"
border="0" name="golden"></td>
</tr>
<tr>
<td width="100"> </td>
</tr>
<tr>
<td width="100"><a
href="#" onMouseOver="golden.src=c.src"
onMouseOut="golden.src='../img/astuces/image1_off.gif'"
class="arial11orangvif">Image
n° 2 :</a></td>
</tr>
<tr>
<td width="100"> </td>
</tr>
<tr>
<td width="100"><a
href="#" onMouseOver="golden.src=d.src"
onMouseOut="golden.src='../img/astuces/image1_off.gif'"
class="arial11orangvif">Image
n° 3 :</a></td>
</tr>
</table> |
|
|
|
| |
|
|
|
 |
|
 |
|
|
 |
|
 |
|
Recherche
par
mots-clés : |
|
|
|
 |
|
 |
|
|
|
|
|
|
|
|
|
