name="image1"         Une image réactive - ou -  le « RollOver »    name="image2"

Ici on parle d'une image qui change d’état quand la souris passe sur l’image.
Pour y arriver, on doit aller dans le HTML, et changer l'URL de l’image pour
un autre URL, donc pour une autre image. 

Lorsque la souris passe au dessus de notre image c'est le :  « onMouseOver ».
Lorsque la souris quitte l' image c'est le :  « onMouseOut ».

L'IMAGE EST UN 'OBJET'  QUI A UN NOM ET UN URL

Afin que le script ( l'écriture en html) soit compris ,
il faut donner un nom à votre objet ou image.
C'est avec ce nom qu'on peut changer l'image. 

Le NOM de l'image est identifié par l'argument " NAME " de la balise " IMG ".

L'URL de l'image est identifié par l'argument " SRC " de la balise " IMG ".

    Ainsi:   <IMG NAME="nom de l'image" SRC="url de l'image">
ON OBTIENT CE 'ROLL OVER' :  name="image3"*

AVEC LE CODE (SCRIPT) CI-DESSOUS: 

*notez que le nom de l'image est inscrit comme "image3" puisque cette image
est la 3ième sur une même page. L'image 1 étant en haut à gauche et la 2 à droite

<a href="" onmouseover="image3.src='http://URL de timine.1.gif';"
onmouseout="image3.src='http://URL de timine.2.gif';">
<img name="image3" src="http://URL de timine.2.gif" border=0></a>

RÉCAPITULATION RAPIDE

S'IL N'Y A QU'UNE SEULE IMAGE DANS  LA PAGE

<a onmouseover="image1.src='adresse de la deuxième image '" onmouseout="image1.src='adresse de la première image'"><img src="adresse de la première image" id="imagebelle1"></a>

S'IL Y A PLUSIEURS ROLL-OVERS SUR UNE MEME PAGE

IL FAUT ABSOLUMENT MODIFIER LES IDENTIFICATEURS ( IMAGE)

AUTRE EXPLICATION RAPIDE AVEC LIEN

22222222222222222222222222222222222 222222222222222222222222222222

<A
   onmouseover="document.exemple2.src='(indiquez ici l'adresse de la 2e image)'"
   onmouseout="document.exemple2.src='(indiquez ici l'adresse de la 1re image)'"
   href="(indiquez ici le lien vers la page à atteindre)" target="_self">
   <img alt="Titre du lien a cliquer qui apparait" title="Le titre du lien qui apparait"
      src="(répétez ici l'adresse de la 1re image)"
      height="300" width="400" id="exemple2" border="0">
</A>

sources:

Script avec lien chez: http://logalisims.free.fr/Library/survol-souris2/page01.htm

Code chez :  Maître Po et 

MACHINE A CODE CHEZ: http://www.trucsweb.com/javascript/gen_roll.htm

ANCRE SUR IMAGE

AU CLIC SUR LA PETITE IMAGE, CELLE-CI S'AGRANDIT SUR FOND NOIR

<a id="exemple d'image" class="noAlign" title="Exemple d'image" name="exemple d'image" href="http://nom de l'url de l'image originale qui apparaitra dans le fond noir.com/300x196/Patin-2.jpg"><img alt="exemple d'image" src="http://nom de l'url de l'image originale qui apparait dans l'article avec taille plus petite.com/300x196/Patin-2.jpg" height="61" width="94" /></a>

POUR UN FOND GRIS TRANSPARENT IL FAUT DU JAVASCRIPT

http://www.startyourdev.com/codes/code-lightbox-image.php

A savoir:    Un TEXTE ALTERNATIF  est un texte descriptif appliqué uniquement aux images et
                   nécessaire au cas où il y aurait un problème lors du chargement de celles-ci.  
                   Son script est:   attribut alt=""
               Un TEXTE pour INFOBULLE est une description qui apparaît à l'écran lorsque
                     le curseur reste quelques secondes sur l'élément auquel elle est appliquée
                     Son script est:    attribut title=""

Modifier une INFOBULLE:   Il n'est pas possible de modifier l'apparence de l'infobulle générée
                     par l'attribut    title="".             Cependant, il est tout à fait envisageable de créer sa
                      propre infobulle en utilisant une balise que l'on fait apparaître au survol du texte.
                       (VOIR explication plus bas)

SOURCE:  SITE DU ZÉRO

11111111111111111111111111111111111111111 

EXEMPLE NO.1:   mot avec les balises <a  et  </a> 
Le Script pour une INFOBULLE SUR  UN  MOT (avec lien au clic de souris)
<p>Cliquez <a href="www.over-blog.com"  title="www.over-blog.com"> ici</a> pour retourner à l'accueil d'overblog</p> 

Ce qui donne :

Cliquez  ici  pour retourner à l'accueil

2222222222222222222222222222222222222222

EXEMPLE NO.2:   MOT avec les balises <acronym  et  </acronym> 

Le Script pour une INFOBULLE SUR  UN  MOT  pour expliquer celui-ci  ( il n'y a pas de lien)

<p>Le <acronym title="mammifère voisin du sanglier"> phacochère</acronym> est haut sur pattes et a des défenses incurvées.</p>

Ce qui donne:

Le  phacochère  est haut sur pattes et a des défenses incurvées.

3333333333333333333333333333333333333333333333333 

EXEMPLE NO.3a:   Mot sur une image avec phrase devant  - sans balises

<p>Cette image peut servir dans votre blog : <img src="http://idata.over-blog.com/1/35/49/90/.gif " title="ligne moustache noire" /></p>

Ce qui donne:

Cette image peut servir dans votre blog:

EXEMPLE NO.3b:   Mot sur une image sans phrase   avec les balises <a  et  </a> 

Le Script pour une INFOBULLE SUR  une Image (avec lien au clic de souris)

<a href="http://www.over-blog.com"><img src="http://idata.over-blog.com/1/35/49/90/.gif" title="Colombe de la Paix" border"0" width="120" height="111" </a>
 

Ce qui donne:

MODIFIER UNE INFOBULLE ( TOOLTIP):  Il n'est pas possible de modifier l'apparence de l'infobulle
                                                    générée  par l'attribut    title="".   

Toutefois,  on peut modifier une infobulle grâce à la balise que l'on fait apparaître au survol du texte.  

On doit cependant passer par le CSS.   Pour explication voir:     

SOURCE 1:  SITE DU ZÉRO

SOURCE 2:    CLN'S BLOG   

SOURCE 3:   MILOUZE

SOURCE 4:   JOLIESPAGES

SOURCE 5:   FICELLE DANNAK

SOURCE 6:    MSDN

.................................................

Utilisation de 2 images de largeur identique mais une
plus longue que l'autre


 




.