RollOver - MousOver- Images réactives, effets au passage de la souris

[jeancharleslast]

Sur le web, le rollOver (ou image réactive) permet de changer une image, lorsque le curseur de la souris passe sur celle-ci.

Nous allons voir dans ce tutoriel deux codes (HTML ou Javascript) pour effectuer un rollOver.
Il vous suffit de copier/coller le code ci-desous (une fois modifié) dans un Widget HTML et "appliquez".



Conditions requises:

-Vos 3 images doivent faire la même taille en pixel.


-Vos images doivent être hébergées (en ligne)
Il vous faut donc au préalable uploader vos images;et vérifiez qu'elles sont bien accessibles en tapant l'adresse web (elles doivent s'afficher)...Utilisez une application FTP pour transférer vos images ou vous voulez.



1/ Code en HTML

Code:

<a href="URL au clic" target="_top">
<img style="border: 1px solid ; width: 200px; height: 136px;"
 src="URL image 1"
 onmouseover="this.src='URL image 2'"
onmouseout="this.src='URL image 3'" ></ a>

2/ Code en Javascript

Code:

<a href="URL au clic” target="_top">
<script type="text/javascript">
function SourisSur(){
document.adresse.src ="URL image 2"}
function Sourisdehors(){
document.adresse.src ="URL image 3"}
</script>
<img  src="URL image 1" name="adresse"
width="200" height="136"
border="1"
onmouseover="SourisSur()"
onmouseout="Sourisdehors()"
/></a>

Dans les codes ci-dessus

"URL image 1" est l'adresse web de l'image par défaut (exemple: http://www.iweb.com/image1.jpg")
"URL image 2" est l'adresse web de l'image qui s'affiche au passage de la souris
" URL image 3" est l'adresse web de l'image qui s'affiche après le passage de la souris (vous pouvez donner l'image 1 à la place....)
"URL au clic" est l'adresse web vers laquelle est redirigé le visiteur si il clique sur le rollOver

"border" est la largeur du cadre (en pixels)
"width" la largeur de vos images (en pixels)
"height" la hauteur de vos images (en pixels)


Si vous ne souhaitez pas de lien au clic, il vous suffit d'enlever la ligne "URL au clic"
[color=red]

[nbeenad]

Note de l'administrateur:

le tutoriel est mis à jour, ce sujet devient le sujet unique de discussion...

Le précédent sujet est effacé vu le nombre de liens erronés qu'il contenait...

Super ! Merci, merci beaucoup !
J'ai réussi la première étape (faire un roll-over simple...)

Mais comment faire maintenant pour que le roll-over se fasse au survol d'une partie de mon texte, et non de l'image elle-même ? :-S

[markitzero]

Cette méthode est bien, sauf qu'elle laisse un entouré bleu autour de l'image une fois publiée... Que faire ?

[koeklin]

border="0"

[Gonzo Bonzo]

Bonsoir,

Merci pour tous les tuyaux que je glane en farfouillant dans votre forum.

Bon... le rollover marche nickel, sauf que... la page s'ouvre dans la fenêtre de l'image...

Problème de code d'adressage ?

Merci d'avance,

CB

[koeklin]

Pour tous les liens que l'on fait dans un widget HTML, il faut lui signifier qu'il doit s'ouvrir

• soit dans la fenêtre principale du navigateur en ajoutant target="_top" à la balise de lien
  
• soit dans une nouvelle fenêtre en ajoutant target="_blank"

donc à la place de

Code:

<a href="URL au clic" >

il faut mettre

Code:

<a href="URL au clic" target="_top">

Il existe d'autres manières de faire...

[Gonzo Bonzo]

Génial, merci de la rapidité.
G.B

[sbastien7566]

Ca ne marche pas

j'ai créé un widget html, copié, collé et modifié le code… comme ça :

Code:

<a href=http://www.theatreurope.com/Spectacle___Romeo%26Juliette.html>
<img style="border: 0px solid ; width: 120px; height: 120px;"
 src=http://theatreurope.com/Uploads_files/Romeo-1.jpg
 onmouseover=this.src=http://theatreurope.com/Uploads_files/Romeo-2.jpg
onmouseout=this.src=http://theatreurope.com/Uploads_files/Romeo-1.jpg ></ a>

L'image 1 apparaît, mais aucune action lors du survol. Le lien URL fonctionne pourtant.

Help!!!!

[koeklin]

C'est normal, vous avez effacé les guillemets des URL et des fonctions onmouseover et onmouseout

Code:

<a href="http://www.theatreurope.com/Spectacle___Romeo%26Juliette.html">
<img style="border: 0px solid ; width: 120px; height: 120px;"
 src="http://theatreurope.com/Uploads_files/Romeo-1.jpg"
 onmouseover='this.src="http://theatreurope.com/Uploads_files/Romeo-2.jpg"'
onmouseout='this.src="http://theatreurope.com/Uploads_files/Romeo-1.jpg"' ></ a>
<img src="http://theatreurope.com/Uploads_files/Romeo-2.jpg" style="display: none;" />

Remarque : dans ce code j'ai ajouté une ligne à la fin :

Code:


<img src="http://theatreurope.com/Uploads_files/Romeo-2.jpg" style="display: none;" />

Elle permet au navigateur de télécharger l'image qui s'affichera au survol de la souris avant même de devoir l'afficher (le rollover se fait immédiatement). Il y a d'autres manières de faire.

[koeklin]

Il y a d'autres manières de faire.

La preuve ici
ce code permet de télécharger les deux images avant même de faire le rollover grâce à la fonction SourisSur() et Sourisdehors() de la balise de script

[sbastien7566]

Merci encore !!!

[alexandrerouge]

Bonjour a tous,

Je réalise un site sur Iweb et je voudrai faire un roll over.
Je publie via un ftp chez nexenservices.
Merci de votre aide

Alexandre

[Madeline]

Un tuto ICI

et d'autres sujet sur le forum avec une petite recherche

[alexandrerouge]

Oui, j'avais vu ce tuto. Cependant je ne comprends pas comment faire pour publier les deux images. Pour infos, mon site est hébergé chez Nexsend service.
De plus, je ne comprends pas très bien la marche a suivre avec les scripts et leur contenu.
Alexandre

www. alexandrerouge.com


Bonjour Alexandrerouge,

1/ Ce n'est pas parce que la rubrique "iWeb.app" est en haut de page que c'est un fourre-tout....Le rollover n'a pas de lien avec les problèmes d'application...

2/ Comme dit plus haut, il y à déjà un sujet ainsi qu'un AUTRE dans la liste des codes HTML faisant partie des tutoriels mentionnés en haut de la page d'accueil....

3/ Pour cela, il faut utiliser la fonction RECHERCHE et lire la CHARTE.

Je fusionne le sujet.

Merci

[koeklin]

Si ça peut aider :
http://iweb.debutersurmac.com/siteiweb/Blog/Entrees/2010/5/9_Upload_de_fichiers.html c'est bizarre j'ai choisi comme exemple.... le rollover.
Si tu as besoin de renseignements supplémentaires, n'hésite pas. J'aurai plaisir à voir la nouvelle version de ton site.

[alexandrerouge]

Bonjour,

Vous expliquez dans votre tuto que pour réaliser un Roll over, il est nécessaire d'uploader les images et qu'elles soient visibles en tapant une adresse web.
Pouvez vous me dire quel est la marche à suivre pour effectuer cette opération ?

Pour info, j'ai uploadé mes 3 images sur la racine de mon site et à l'intérieur du dossier "Accueil_files", mais impossible de les afficher et de rendre votre script fonctionnel.
J'utilise Transmit pour avoir accès à l'hébergeur du site : nexenservices.com

Merci de votre aide.

Alexandre

[jeancharleslast]

Bonjour,

Vous expliquez dans votre tuto que pour réaliser un Roll over, il est nécessaire d'uploader les images et qu'elles soient visibles en tapant une adresse web.
Pouvez vous me dire quel est la marche à suivre pour effectuer cette opération ?

Alexandre

Bonjour,

Pour utiliser des images, il faut que celles ci soient en ligne, tout simplement.

Exemple: Je mets "image1.jpg" dans un dossier "images" via un logiciel FTP (transmit, Cyberduck), si mon site se nomme:

Code:

www.monsite.com

, cette image devrait être visible en tapant dans un navigateur:

Code:

www.monsite.com/images/image1.jpg

(Attention aux fautes majuscules, aux "s" etc...)

Est-ce plus clair?

[alexandrerouge]

C'est parfait !
Merci.

Alexandre

[koeklin]

J'utilise Transmit pour avoir accès à l'hébergeur du site : nexenservices.com

Si tu utilises transmit, renseigne-le (voir moitié gauche de l'image) sur

• l'URL de ton dossier racine - probablement il s'agit de
  

  Code:

  http://www.alexandrerouge.com/

  
  
• ainsi que sur le chemin sur ce fichier racine - bien souvent le chemin est un renseignement falcutatif - dans mon cas je suis obligé de le préciser parce que le dossier racine de mon site iWeb (http://iweb.debutersurmac.com) est dans un sous-dossier du dossier racine du site principal (http://www.debutersurmac.com/)

Une fois ces renseignements remplis, il est possible de copier l'URL d'une image via un simple clic droit dans Transmit (voir la moitié droite de l'image)

[alexandrerouge]

Génial !
Merci beaucoup.

Alexandre