rollover

Mack_Os · 24 Juin 2005

Bonjours ce topic est purement une question html, j'expliques je fais un site dedié au mac. que pour chaque bouton de mon menu est un rollover ou l'image de depart change au passage de la souris.
je comprend comment faire a l'aide du javascript mais seulement je peux faire le code pour un bouton et ensuite je suis obliger de copier coller tout le code pour les autre boutons.donc je cherche un moyen de realiser un rollover pour tout les bouton avec un code simplifier.

je vous join mon code de depart

Bloc de code:

 <script language="javascript">
var homepage1=new Image();
homepage1.src="../../Desktop/homepage-active.jpg"
var homepage2=new Image();
homepage2.src="../../Desktop/homepage-souris.jpg";
var dossiers1=new Image();
dossiers1.src="../../Desktop/dossiers-noactive.jpg"
var dossiers2=new Image();
dossiers2.src="../../Desktop/dossiers-souris.jpg";
var sorties1=new Image();
sorties1.src="../../Desktop/sorties-noactive.jpg"
var sorties2=new Image();
sorties2.src="../../Desktop/sorties-souris.jpg";
                                    " j'ai racoursi la partie puisque j'ai 9 boutons"
function montre(){
**document.images.homepage.src=homepage2.src;
} 
function cache(){
**document.images.homepage.src=homepage1.src;
}
function montre1(){
**document.images.dossiers.src=dossiers2.src;
} 
function cache1(){
**document.images.dossiers.src=dossiers1.src;
}
function montre2(){
**document.images.sorties.src=sorties2.src;
} 
function cache2(){
**document.images.sorties.src=sorties1.src;
}
</script>

Membre supprimé 23628 · 25 Juin 2005

argh .. mais c'est quoi cette méthode de barbare ..

mettons nous d'accord : les robot d'indextion ne prennent pas en compte les liens en java donc tu ne peux que mal etre référencé .. le probléme n'est pas la je sais mais il est tout de meme bon de le rappeller ..

pour répondre a ta question je te propose de passer par le CSS, c'est beaucoup plus simple et c 'est au norme W3C .. pensez y .. vive le wold wide web consortium

http://css.alsacreations.com/Construction-de-menus-en-CSS/Une-image-reactive-rollover-sans-javascript

je te conseille cette page , tu trouvera ton bonheur a coup sur, la méthode avec préchargement et la mieux.. enfin pour moi .

molgow · 25 Juin 2005

dumbop84 a dit:
mettons nous d'accord : les robot d'indextion ne prennent pas en compte les liens en java donc tu ne peux que mal etre référencé .. le probléme n'est pas la je sais mais il est tout de meme bon de le rappeller ..

Je ne crois pas que ça pose un problème pour le référencement. Ce ne sont que les liens sur les images qui sont mis dans le JavaScript.

dumbop84 a dit:
pour répondre a ta question je te propose de passer par le CSS, c'est beaucoup plus simple et c 'est au norme W3C .. pensez y .. vive le wold wide web consortium

http://css.alsacreations.com/Construction-de-menus-en-CSS/Une-image-reactive-rollover-sans-javascript

je te conseille cette page , tu trouvera ton bonheur a coup sur, la méthode avec préchargement et la mieux.. enfin pour moi .

Par contre, là d'accord. Utiliser du JavaScript pour faire un simple rollover d'images, c'est dépassé. Utilise du CSS, c'est plus simple, plus performant, plus portable, ... c'est plus mieux quoi

Membre supprimé 23628 · 25 Juin 2005

molgow a dit:
Je ne crois pas que ça pose un problème pour le référencement. Ce ne sont que les liens sur les images qui sont mis dans le JavaScript.

je parlais au sens large , un roll over peut se faire sur des images qui renvoie vers une page .. ou bref .. généralement, le javascript c'est pas top du tout pour le référencement

molgow · 25 Juin 2005

Oui, mais le lien reste un lien normal, le JavaScript n'y change rien. Le JS est mis dans le onMouseOver...

Enfin, c'est clair que d'une manière générale, ça aide pas les moteurs de recherches tous ces javascripts...

fredmac75 · 25 Juin 2005

molgow a dit:
Oui, mais le lien reste un lien normal, le JavaScript n'y change rien. Le JS est mis dans le onMouseOver...

Enfin, c'est clair que d'une manière générale, ça aide pas les moteurs de recherches tous ces javascripts...

Il me semble pourtant que les moteurs ne "parsent" pas tout ce qui est fichiers implémenté tel le javascript. Auquel cas il n'y aurait pas de problème avec les fichiers flash....

molgow · 25 Juin 2005

Non, mais je crois que vous ne comprenez pas...

Les moteurs de recherches parcours les pages et suivent tous les liens, donc ils recherchent tous les <a href="..." ...
Et ils suivent tous les liens qu'ils trouvent. Faire un rollover JavaScript ne va pas influencer ça, puisque les liens seront toujours de cette forme. Vous allez juste rajouter un onMouseOver et onMouseOut comme attributs de la balise <a>. Ça ne va donc rien changer pour les moteurs de recherches.

Pour le Flash, effectivement, je doute qu'ils soient capable de faire quoi que ce soit. C'est un des nombreux inconvénients du Flash.

fredmac75 · 25 Juin 2005

molgow a dit:
Non, mais je crois que vous ne comprenez pas...

Les moteurs de recherches parcours les pages et suivent tous les liens, donc ils recherchent tous les <a href="..." ...
Et ils suivent tous les liens qu'ils trouvent. Faire un rollover JavaScript ne va pas influencer ça, puisque les liens seront toujours de cette forme. Vous allez juste rajouter un onMouseOver et onMouseOut comme attributs de la balise <a>. Ça ne va donc rien changer pour les moteurs de recherches.

Pour le Flash, effectivement, je doute qu'ils soient capable de faire quoi que ce soit. C'est un des nombreux inconvénients du Flash.

oui mais la plupart du temps les rollover ne contiennent pas le lien en tant que tel mais font appel à un fichier externe en .js qui lui contient les url... par exemple :
<a href="javascript:;" onMouseOver="MM_showMenu(window.mm_menu_1115191034_0,0,16,null,'image2')" onMouseOut="MM_startTimeout();">

avec en header :
mm_menu_1115191034_0.addMenuItem("Fidéliser","location='fideliser.html'");

Dans ce cas le moteur, aussi intelligent soit-il, ne découvrira pas le lien. Logique, puisque ce dernier ne commence pas par <a href="">.

molgow · 25 Juin 2005

Ok d'accord

Mais il faut dire qu'il existe plus simple en JavaScript pour faire des rollovers. Par exemple, le premier trouvé sur Google.

Mack_Os · 26 Juin 2005

ok merci beaucoup mais je crois que je vais me mettre serieusement au CSS sa sera sans doute plus facile.

Langellier · 28 Août 2006

Mack_Os a dit:
ok merci beaucoup mais je crois que je vais me mettre serieusement au CSS sa sera sans doute plus facile.

Bonjour, Je réalise assez souvent des rollovers (remplacement d'une image survolée par une autre, non pas pour réaliser des menus mais dans un but cognitif : exemple

J'ai deux scripts possibles :
1) avec javascript :

Bloc de code:

<head>
<script type = 'text/javascript'>
un = new Image(); deux = new Image();
un.src = "image1.jpg"; deux.src = "image2.jpg";
</script>
</head>
<body>
<p><a href="javascript:void(0)" 
onmouseover="document.images[0].src=deux.src" 
onmouseout="document.images[0].src=un.src">
<img src="image1.jpg" width="" height=""alt="" title=""/></a></p>
</body>

2) avec CSS :

Bloc de code:

<head>
<style type="text/css">
a.ro {display: block;width:...px;height:...px;background-image: url('image2.jpg')}
a.ro:hover {visibility: visible}
a.ro:hover img {visibility: hidden}
</style>
</head>
<body>
<div>
<a class="ro" href="#">
<img src="image1.jpg" width="" height="" alt="" title="" /></a>
</div>

Le premier script fonctionne en toutes circonstances, mais on m'a dit que du javascript intégré dans du html c'était pas bien

Le deuxième script ne fonctionne pas avec ma version d'opera. Mais on m'a dit que le css c'était mieux.
Deux exemples à comparer : campagnol 1er | campagnol 2e
J'ai aussi le choix de mettre ces scripts soit dans la page html soit en fichier texte indépendant. Or, ici je ne vois pas l'intérêt de cette dernière solution étant donné qu'ils contiennent des précisons spécifiques sur les images.
Merci de donner un avis.

Zeusviper · 28 Août 2006

Langellier a dit:

2) avec CSS :

Bloc de code:

<head>
<style type="text/css">
a.ro {display: block;width:...px;height:...px;background-image: url('image2.jpg')}
a.ro:hover {visibility: visible}
a.ro:hover img {visibility: hidden}
</style>
</head>
<body>
<div>
<a class="ro" href="#">
<img src="image1.jpg" width="" height="" alt="" title="" /></a>
</div>

quitte à faire css, autant le faire jusqu'au bout, ie virer la balise img (et surtt ses paramètres de taille qui n'ont rien à faire l&#224

et la mettre dans le fichier css.

Bloc de code:

[SIZE=1]a.ro{ 
     display: block; /* la balise a doit &#234;tre en bloc */
     width: 100px; /* largeur de l'image r&#233;active */
     height: 100px; /* hauteur de l'image r&#233;active */
     background-image: url(image1.jpg); /* source de l'image de d&#233;part */
     background-repeat: no-repeat;
}
a.ro:hover { /* d&#233;finition de la classe "image" de la balise <a> au survol */
     background-image: url(image2.jpg); /* source de l'image d'arriv&#233;e */
     }
[/SIZE]

J'ai aussi le choix de mettre ces scripts soit dans la page html soit en fichier texte indépendant. Or, ici je ne vois pas l'intérêt de cette dernière solution étant donné qu'ils contiennent des précisons spécifiques sur les images.
Merci de donner un avis.

l'intéret est de séparer la structure de la forme. Le fichier html n'est censé contenir aucun attribut de forme que ce soit des tailles, des bordures ou des images, tout ca devrait se trouver dans un fichier css distinct.
(ps : et accesoirement ton div est superflu puisque la balise a est deja un bloc.)

Langellier · 28 Août 2006

Zeusviper a dit:
quitte à faire css, autant le faire jusqu'au bout, ie virer la balise img (et surtt ses paramètres de taille qui n'ont rien à faire là) et la mettre dans le fichier css.
....
l'intéret est de séparer la structure de la forme. Le fichier html n'est censé contenir aucun attribut de forme que ce soit des tailles, des bordures ou des images, tout ca devrait se trouver dans un fichier css distinct.
(ps : et accesoirement ton div est superflu puisque la balise a est deja un bloc.)

D'abord merci pour la proposition de script qui me permet de mieux comprendre la puissance du css.
J'ai tenu compte des remarques :
J'ai fait un css externe appelé robb.css :

Bloc de code:

a.ro	{ 
     	display: block; /* la balise a doit être en bloc */
     	width: 324px; /* largeur de l'image réactive */
     	height: 237px; /* hauteur de l'image réactive */
     	background-image: url(campagnol1.jpg); /* source de l'image de départ */
     	background-repeat: no-repeat;
	float:left;margin:0px 10px 10px 0px;
	}
a.ro:hover { /* définition de la classe "image" de la balise <a> au survol */
     	background-image: url(campagnol2.jpg); /* source de l'image d'arrivée */
     	}

Voici la page dont le source a été modifié.
Je vois qqs inconvénients :
1) W3C m'indique une erreur avec la balise <a>
2) L'insertion de l'image n'apparaissant plus dans le html mais dans le css, comment les moteurs de recherche trouveront-ils cette image. Juqu'à présent, google-image (moteur pris taf au hasard) trouvait ma photo de campagnol...
3) Dans mon script d'origine, quand on survolait la première image et que la seconde s'affichait, j'avais une bulle qui la décrivait grâce à l'attribut title de la balise img, maintenant je n'ai plus de bulle.
4) Ça ne marche toujours pas avec opera.
Comment contourner ces inconvénients ?

momo-fr · 28 Août 2006

Langellier a dit:
1) W3C m'indique une erreur avec la balise <a>

Quelle erreur ? (j'ai la flemme d'aller voir le validateur...), si c'est un problème de balise vide tu mets un blanc insécable, mais faut être accro de validation.

Langellier a dit:
2) L'insertion de l'image n'apparaissant plus dans le html mais dans le css, comment les moteurs de recherche trouveront-ils cette image. Juqu'à présent, google-image (moteur pris taf au hasard) trouvait ma photo de campagnol...

Tu peux faire la même chose avec ta photo en insert au départ et un lien <a> qui te fais le survol...

Langellier a dit:
3) Dans mon script d'origine, quand on survolait la première image et que la seconde s'affichait, j'avais une bulle qui la décrivait grâce à l'attribut title de la balise img, maintenant je n'ai plus de bulle.

Met ton attribut "Title" sur le lien <a>.

Langellier a dit:
4) Ça ne marche toujours pas avec opera.

Avec ma version 9.01 ça marche très bien.

Zeusviper · 29 Août 2006

momo-fr a dit:
Quelle erreur ? (j'ai la flemme d'aller voir le validateur...), si c'est un problème de balise vide tu mets un blanc insécable, mais faut être accro de validation.

non non! la balise a se retrouve en effet vide ce quie st logique donc tu la fermes là où tu l'ouvre tt simplement. :

Bloc de code:

<a href=".." class="ro" />

momo-fr a dit:
Avec ma version 9.01 ça marche très bien.

oui marche trés bien chez moi aussi, le hover est reconnu depuis opera 7
c bizarre, peut etre un pb de page en cache.
ausis dans le css veille à garder un certain ordre dans les déclarations :

:link
:visited
:hover
:active

et quand à goggle, il semblerait que googgle ait commencé a parcourir les fichiers css et javascripts, rien d'officiel mais certains ont retrouvé des infos présentes dans leur css uniquement sur le moteur de recherche.
enfin si tu tiens vraiment à ce que ton image soit proprement référencé, oui il vaut peut etre mieux garder une balise img..

Zeusviper · 29 Août 2006

Langellier a dit:
1) W3C m'indique une erreur avec la balise <a>

en fait après avoir été voir le validateur ce n'est pas la balise vide qui pose pb mais le fait que le validateur considère la balise a comme un élément inline meme si tu le stipule en mode block dans le css..
en clair, ton code est juste et conforme mais le validateur n'est pas fichu de le remarquer..
donc si tu tiens à cette validation, soit tu remet ton lien dans un div ou un paragraphe..

Langellier · 30 Août 2006

Bonjour,
merci à tous. Voici la page maintenant corrigée .

Langellier · 19 Septembre 2006

Maintenant je peux comparer le remplacement d'une image par une autre en javascript (ce que je faisais depuis longtemps) et le rollover en css.
Le script css fourni ci-dessus, en fait, ne remplace pas une image par une autre, mais gère la superposition de deux images. Et quand on utilise des images gif on peut jouer avec la transparence, ce que j'ai fait ici.
Dans l'exemple présenté, l'image de fond est une image jpeg (pas de transparence) et l'image de dessus est une légende en gif transparent. Lors du chargement la visibilité de cette image est désactivée, elle ne redevient visible qu'au passage de la souris. L'internaute n'a la légende qu'à la demande.

rollover

Mack_Os

Membre confirmé

Membre supprimé 23628

Invité

molgow

Membre expert

Membre supprimé 23628

Invité

molgow

Membre expert

fredmac75

Membre expert

molgow

Membre expert

fredmac75

Membre expert

molgow

Membre expert

Mack_Os

Membre confirmé

Langellier

Membre actif

Zeusviper

Membre actif

Langellier

Membre actif

momo-fr

Ancien Aveyronnais

Zeusviper

Membre actif

Zeusviper

Membre actif

Langellier

Membre actif

Langellier

Membre actif

Sujets similaires