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

[DrOSX]

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

[DrOSX]

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

[jordane.rafiq]

Bonjour à toutes et à tous !

Petit problème disgracieux cependant avec les Widgets Rollover, ils apparaissent sur la page en fondu... Alors que les éléments normaux apparaissent instantanément ! J'aimerais que les rollover apparaissent également d'un coup...

Est-ce possible ?

[koeklin]

l'apparition en fondu ne m'évoque rien....
(à part des transitions en CSS3 ou Javascript, mais ça n'a aucune chance d'être votre cas)

les problèmes possibles d'apparition sont

• la presence d'un rectangle blanc avant le chargement de l'image (c'est dû au fonnctionnement du widget)
  
• les images qui appraraissent progressivement de haut en bas (fichiers trop lourds, souvent images en PNG)
  
• les images entrelacées

[jordane.rafiq]

Je vous posterais le lien vers mon site quand il sera en ligne, vous verrez :) C'est assez gênant pour la navigation mais je pense qu'on peut y remédier en tripatouillant le code source :)

Merci pour votre réponse !

[merl1]

bonjour à tous en ce jour du poisson dans le dos,
j'ai un petit problème avec le roll over: je fait un site pour un ami et quand je mets en place des roll overs
une petite ligne rouge apparait quand on clique sur l'image (sous firefox)
j'ai utilisé le même code que pour mon site, qui n'a pas de ligne rouge, alors je ne comprends pas je ne sais pas quoi faire pour qu'elle disparaisse cette ligne. voici le lien du site en construction: http://www.alain-lambert.com/accueil/accueil_3.html
et voici le mien: http://www.merlinbigorie.fr/merlin_bigorie_illustrateur/merlin_bigorie.html

merci de m'aider à comprendre
cordialement

[merl1]

En fait on voit une ligne en pointillé rouge. Sur fond noir, on ne voit que ça. Je ne comprends pas pourquoi je l'ai sur ce site et pas sur le mien. Pour l'instant la seule solution que j'ai trouvé, c'est de cacher le bas des roll over avec un cache noir.
Y a t'il un autre moyen ? Peut on changer la couleur de cet encadrement?
Merci pour vos conseils.

[Contenu sponsorisé]