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

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par DrOSX le 15/10/2010, 20:13

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]


Dernière édition par jeancharleslast le 21/1/2011, 12:21, édité 11 fois
avatar
DrOSX
Administrateur

Messages : 1338
Inscription : 15/10/2007 Masculin Localisation : Atlantique/Altitude 0
Version iWeb : 3
Publication : locale

Revenir en haut Aller en bas

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

Message par nbeenad le 19/10/2010, 16:15

jeancharleslast a écrit: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

nbeenad
Nouveau

Messages : 1
Inscription : 13/10/2010 Localisation : France
Version iWeb : A remplir!
Publication : Ftp integré

Revenir en haut Aller en bas

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

Message par markitzero le 18/11/2010, 17:03

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

markitzero
Simple Membre

Messages : 14
Inscription : 14/11/2010 Localisation : Nice
Version iWeb : A remplir!
Publication : Ftp integré

Revenir en haut Aller en bas

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

Message par koeklin le 18/11/2010, 17:33

border="0"

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

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

Message par Gonzo Bonzo le 10/12/2010, 01:04

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

Gonzo Bonzo
Nouveau

Messages : 2
Inscription : 10/12/2010 Localisation : Oulan Bator
Version iWeb : A remplir!
Publication : Ftp integré

Revenir en haut Aller en bas

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

Message par koeklin le 10/12/2010, 14:40

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...

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

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

Message par Gonzo Bonzo le 10/12/2010, 14:49

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

Gonzo Bonzo
Nouveau

Messages : 2
Inscription : 10/12/2010 Localisation : Oulan Bator
Version iWeb : A remplir!
Publication : Ftp integré

Revenir en haut Aller en bas

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

Message par sbastien7566 le 18/12/2010, 10:53

Ca ne marche pas carton

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!!!!
avatar
sbastien7566
Simple Membre

Messages : 40
Inscription : 16/12/2010 Masculin Age : 43
Localisation : Hyères
Version iWeb : 3
Publication : Ftp integré

http://www.theatreurope.com

Revenir en haut Aller en bas

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

Message par koeklin le 18/12/2010, 13:38

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.

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

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

Message par koeklin le 18/12/2010, 16:27

koeklin a écrit: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

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

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

Message par sbastien7566 le 18/12/2010, 18:04

Merci encore !!!
avatar
sbastien7566
Simple Membre

Messages : 40
Inscription : 16/12/2010 Masculin Age : 43
Localisation : Hyères
Version iWeb : 3
Publication : Ftp integré

http://www.theatreurope.com

Revenir en haut Aller en bas

Comment faire un Roll Over ?

Message par alexandrerouge le 14/2/2011, 16:30

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

alexandrerouge
Simple Membre

Messages : 11
Inscription : 14/02/2011 Localisation : paris
Version iWeb : A remplir!
Publication : MobileMe

Revenir en haut Aller en bas

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

Message par Madeline le 15/2/2011, 01:15

Un tuto ICI

et d'autres sujet sur le forum avec une petite recherche trés happy trés happy

-------------------
Mon site: http://madelinederiaz.com
Le projet «D'un printemps à l'autre»: http://www.postcard.madelinederiaz.com/site/Accueil.html
Graphisme et illustration: http://portfolio.madelinederiaz.com
L'art et la culture: http://forum.ravir.ca/fr/Accueil.html
avatar
Madeline
iWeb - Modo

Messages : 1088
Inscription : 07/02/2008 Féminin Localisation : dans mes rêves
Version iWeb : 3
Publication : locale

http://madelinederiaz.com

Revenir en haut Aller en bas

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

Message par alexandrerouge le 15/2/2011, 16:49

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


alexandrerouge
Simple Membre

Messages : 11
Inscription : 14/02/2011 Localisation : paris
Version iWeb : A remplir!
Publication : MobileMe

Revenir en haut Aller en bas

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

Message par koeklin le 16/2/2011, 12:19

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.

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Upload d'image

Message par alexandrerouge le 17/2/2011, 12:07

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

alexandrerouge
Simple Membre

Messages : 11
Inscription : 14/02/2011 Localisation : paris
Version iWeb : A remplir!
Publication : MobileMe

Revenir en haut Aller en bas

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

Message par DrOSX le 17/2/2011, 21:01

alexandrerouge a écrit: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?
avatar
DrOSX
Administrateur

Messages : 1338
Inscription : 15/10/2007 Masculin Localisation : Atlantique/Altitude 0
Version iWeb : 3
Publication : locale

Revenir en haut Aller en bas

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

Message par alexandrerouge le 17/2/2011, 21:26

C'est parfait !
Merci.

Alexandre

alexandrerouge
Simple Membre

Messages : 11
Inscription : 14/02/2011 Localisation : paris
Version iWeb : A remplir!
Publication : MobileMe

Revenir en haut Aller en bas

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

Message par koeklin le 18/2/2011, 18:14

alexandrerouge a écrit: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)

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

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

Message par alexandrerouge le 18/2/2011, 21:52

Génial !
Merci beaucoup.

Alexandre

alexandrerouge
Simple Membre

Messages : 11
Inscription : 14/02/2011 Localisation : paris
Version iWeb : A remplir!
Publication : MobileMe

Revenir en haut Aller en bas

Apparition des roll overs en fondu...

Message par jordane.rafiq le 24/2/2011, 20:29

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 ?

jordane.rafiq
Nouveau

Messages : 2
Inscription : 24/02/2011 Localisation : France
Version iWeb : A remplir!
Publication : Ftp integré

Revenir en haut Aller en bas

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

Message par koeklin le 25/2/2011, 03:00

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



-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

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

Message par jordane.rafiq le 25/2/2011, 15:08

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 !

jordane.rafiq
Nouveau

Messages : 2
Inscription : 24/02/2011 Localisation : France
Version iWeb : A remplir!
Publication : Ftp integré

Revenir en haut Aller en bas

petite ligne rouge quand on clique

Message par merl1 le 1/4/2011, 13:08

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
Nouveau

Messages : 3
Inscription : 17/02/2009 Masculin Age : 49
Localisation : paris
Version iWeb : A remplir!
Publication : Ftp integré

http://http:/www.merlinbigorie.fr

Revenir en haut Aller en bas

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

Message par merl1 le 3/4/2011, 03:48

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.

merl1
Nouveau

Messages : 3
Inscription : 17/02/2009 Masculin Age : 49
Localisation : paris
Version iWeb : A remplir!
Publication : Ftp integré

http://http:/www.merlinbigorie.fr

Revenir en haut Aller en bas

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

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut


 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum