Différentes techniques d'image réactive

License ici
Une image réactive ou effet rollover, est composer de deux images, une première image de base plus une seconde image qui viendras remplacer la première image au passage de votre souris sur l'image de base ou encore sur un lien (hyperlien) texte etc... Notez que n'importe quel formats (gif, jpg, png) d'image conviendras. Si vous trouvez les explications un peu complexe ou peu compréhensives allez direct en bas de page.

1) Effet rollover simple en javascript:

Image survoler en javascript est compatible avec:
Firefox v.2

, Flock v.1

, Internet Explorer v.7

EXEMPLE ROLLOVER:
effet rollover

Code:
<img src="image1.jpg" alt="image1-image2" title="image1-image2" onmouseover="this.src='image2.jpg';" onmouseout="this.src='image1.jpg';" /><br />

Explication:
Pour faire une image réactive, inscrivez d'abord le code html d'une image simple, soit:
<img src="image1.jpg" alt="image1" title="image1" />
Ajouter ensuite les deux événements JavaScript onmouseover="this.src='image2.jpg';" onmouseout="this.src='image1.jpg';".
L'évènement JavaScript onmouseover afficheras l'image2 lorsque vous passerez la souris sur l'image1.
L'évènement JavaScript onmouseout re afficheras l'image1 lorsque vous quitterez avec votre souris la zone de l'image.
L'erreur fréquente est l'inversion dans onmouseover et onmouseout de l'image1 et de l'image2; Donc si sa fonctionne mal inversez les noms des images.

1) Effet rollover avec les feuilles de styles CSS:

L'avantage avec les pseudo-classe du CSS2 c'est qu'il n'ait pas besoin d'utiliser un hyperlien

A) Image dynamique grâce aux pseudo-classes du CSS2, compatible avec:
Firefox v.2, Flock v.1, Netscape v.8, Opéra v.9.25, Safari v.3

EXEMPLE ROLLOVER:

Code css2 à inclure entre la balise <head> et </head> de votre page ou dans un fichier:

<table class="imageffx"> //balise d'ouverture d'un tableau avec l'application de la classe imageffx pour l'effet de survol d'image.
<tr> // balise d'ouverture d'un colonne de tableau
<td> </td> // cellule d'un tableau, ouverture et fermeture
</tr> // Balise de fermeture de la colonne
</table> // balise de fermeture du tableau

B) Image dynamique grâce au css classique, compatible avec:
Firefox v.2, Flock v.1, Internet Explorer v.7, Maxthon v.1.6 , Netscape v.8, Opéra v.9.25, Safari v.3

EXEMPLE ROLLOVER:

Code css à inclure entre la balise <head> et </head> de votre page ou dans un fichier:

<style type="text/css"> /* Balise d'ouverture de la feuille de style css */
 /* balise de fermeture de commentaire SGML pour la compatibilité css avec les vieux navigateurs */
</style> /* Balise de fermeture de la feuille de style css2 */

Code HTML à inclure n'importe ou sur votre page entre la balise <body> et </body>:

<table class="image"> //balise d'ouverture d'un tableau avec l'application de la classe image pour l'effet de survol d'image.
<tr> // balise d'ouverture d'un colonne de tableau
<td> // balise d'ouverture d'une cellule de tableau
<a name="imagerollover" id="imagerollover"></a> // Création d'une ancre (lien dans la page) nommé imagerollover.
<a href="#imagerollover"></a> // lien pointant vers l'ancre imagerollover, pour ne pas revenir en haut de la page si jamais on clique sur l'image. Ce lien contient l'effet de survol de l'image.
</td> // Balise de fermeture de la cellule du tableau
</tr> // Balise de fermeture de la colonne
</table> // balise de fermeture du tableau

Résumer, Exemples simple du survol d'image

1) Survol d'image en JavaScript:
<img src="image1.jpg" alt="image1-image2" title="image1-image2" onmouseover="this.src='image2.jpg';" onmouseout="this.src='image1.jpg';" />
Insérez ce code à l'endroit ou vous désirez voir votre image, puis changer les noms image1.jpg , image2.jpg et image1-image2 par les vôtres (respectivement, noms des images et titre que vous souhaitez donné à cette image.

2) Survol d'image en CSS2!
Code CSS2à écrire entre les balises <head> et </head>, puis changer les noms image1.jpget image2.jpg par les noms de vos images .Changer la valeur de padding: 25px pour la moitié de la taille de vos image (si votre image fait 200x340px, changer 25px par 170px, soit la moitié du plus grand coté):
<style type="text/css2">

</style>

Code HTML à inclure n'importe ou sur votre page entre la balise <body> et </body>:
<table class="imageffx">.
<tr>
<td> </td>
</tr>
</table>

3) Survol d'image en CSS1, Juste pour la compatibilité IE...stt!:
Code css à inclure entre la balise <head> et </head> de votre page ou dans un fichier:

<style type="text/css">

</style>

Code HTML à inclure n'importe ou sur votre page entre la balise <body> et </body>:

<table class="image">
<tr><td>
<a name="imagerollover" id="imagerollover"></a>
<a href="#imagerollover"></a>
</td></tr>
</table>

Note: Vous pouvez ajoutez des liens sur vos images survoler comme si vous créez un lien normal.
A savoir. Le navigateur Flock est basé sur le code de Firefox et le navigateur Maxthon utilise Internet Explorer comme moteur.

Déclaration n°1009734

Étiqueté