le rollover expliqué à une débutante ??

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : le rollover expliqué à une débutante ??

Polly Peachum

Bonjour tout le monde,

Je suis arrêtée dans la construction de mon site par un problème de rollover.
Quelqu'un pourrait-il guider une débutante en html ?
J'ai passé quasiment la journée et la soirée à chercher mais, même si j'ai appris beaucoup de choses, mes résultats ne sont guère brillants !

J'ai besoin de faire une page comportant beaucoup de petites photos (.gif). Comme elles sont petites elles sont évidemment "illisibles" et un rollover serait la solution.

Malheureusement j'ai beau avoir fait une recherche ici avec le mot Rollover et une autre très longue sur Google, je trouve quantité de scripts (qui se ressemblent presque tous, d'ailleurs) mais pas grand chose en ce qui concerne leur utilisation.

En gros, le code html à inclure serait ceci :
<a href="votrepage.html">
<img src="img1.gif" border="0"
onMouseOver="this.src='img2.gif'" onMouseOut="this.src='img1.gif'">
</a>

Si j'ai bien compris, je peux aussi bien l'écrire entre les balises <head> qu'entre les balises <body>. J'ai donc créé une nouvelle page, je l'ai nommée essai.htm et j'ai pris une photo d'exemple, en deux tailles différentes, que j'ai nommées essai1.gif (pour la petite) et essai2.gif (pour la grande). Et le code de ma page donne ceci :

<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
</head>

<body>
<a href="essai.html">
<img src="images/photos%20page%20Photos/essai1.gif" border="0"
onMouseOver="this.src='essai2.gif'" onMouseOut="this.src='images/photos%20page%20Photos/essai1.gif'" width="142" height="106">
</a>
</body>

</html>

J'obtiens en guise de résultat une image affichée (la petite) mais lorsque je passe la souris dessus elle est remplacée par un cadre vide (qui semble être de la même taille que la petite image) et en haut duquel s'affiche à gauche l'incontournable petite croix rouge.
Ma photo 2 (la plus grande) étant bien sûr au même endroit que la petite, j'ai essayé de remplacer la syntaxe
onMouseOver="this.src='essai2.gif'"
par le même nom de chemin que l'image 1 :
onMouseOver="this.src='images/photos%20page%20Photos/essai2.gif"
mais le résultat est pire car la petite image reste désespérement fixe, je n'ai même plus l'effet de rollover débouchant sur une image vide !!

Si quelqu'un avait la gentillesse de m'aider ...
J'ai bien conscience que ce doit être là une question d'archi débutante mais les débutante aussi (surtout ??) ont besoin de conseils très détaillés ... :whistle:
Merci à vous par avance ... :jap:

Publicité

gatsusat

déjà evite les espaces dans les noms des repertoires et les noms de fichiers, ca va fite conduire à ta perte.

il faut effectivement bien indiquer le répertoire de l'image.
qui dans ce cas est "images/photo ..."
donc du coup ta syntaxe serait correcte avec ta deuxième solution.
Mais si tu veux remplacer une petite image par une grande image, lors d'un effet over, ce n'est pas la bonne solution. Puisque l'image possède une taille fixe dans ton HTML

donc tu aura bo foutre n'importe kelle image, ca fera toujours pareil, une image de meme taille.

et puis les rollover en JS c'est dépassé. en CSS on fait des choses merveilleuses

http://css.alsacreations.com/Tutor [...] map-en-CSS
http://css.alsacreations.com/xmedi [...] /maps2.htm

---------------
Les CSS c'est bon mangez-en

bixibu

Ca ... c'est fait!

Rien a voir désolé mais ca fait 5 minute que je regarde l'image... c'est quoi la bestiole qui est montrée la?? 2 araignées enormes??

ps:encore dsl du HS, promis j'insisterais pas: p

gatsusat

c'est une photo qui circule sur le net montrant soit disant une araignée du désert, mais en fait c'est juste un fake, une araignée en plastique géant.
cf hoaxbuster : http://www.hoaxbuster.com/hoaxlist [...] icle=20421

---------------
Les CSS c'est bon mangez-en

bixibu

Ca ... c'est fait!

Okay merci beaucoup je me disais aussi

[/hs}

Polly Peachum

Merci beaucoup Gatsusat, pour ton aide.
Le CSS, oui, j'y avais pensé et j'ai cherché de ce côté là mais déjà que je n'arrive pas à faire un rollover en JS (JS ou HTML, en l'occurrence ??), je n'ose même pas imaginer les heures que je vais passer à m'essayer au CSS ! (et j'ai un besoin assez urgent professionnellement de terminer ce site)

Si j'ai compris ce que tu me dis la première chose à faire, c'est déjà de virer les espaces de mes noms de fichiers et de dossiers.
En revanche ce que tu m'expliques au sujet de la taille de mes 2 images me parait à la fois lumineux et obscur. Lumineux parce qu'en effet si les 2 images ont la même taille, l'effet est réduit à néant. Obscur parce que : en vrai, sur mon disque, les deux images n'ont PAS la même taille !
Est-ce que tu aurais la gentillesse de me dire quelle doit être la bonne syntaxe pour que l'image n'ait pas une taille fixe dans le HTML et que l'effet over existe réellement ??

Merci à toi ...

PS : Bixibu, où est-ce que tu vois des araignées ??? De quelle image parles-tu ?? J'ai pas bu le même apéro que toi ou bien ????
edit : sorry, je n'avais pas cliqué sur le lien n°2 !

Message édité par Polly Peachum le 11-10-2005 à 23:34:34

jmbianca

https://configurateurpc.com/

Salut

Puisque Gatsusat a l'air d'avoir un empechement, je me permet de te filer un coup de main.

Alors, pour enlever les tailles fixes dans ton code, il suffit d'enlever les width et height dans

<img src="images/photos%20page%20Photos/essai1.gif" border="0"
onMouseOver="this.src=''images/photos%20page%20Photos/essai2.gif'" onMouseOut="this.src='images/photos%20page%20Photos/essai1.gif'" width="142" height="106">
Le probleme de cette solution est que ca risque de te casser ta mise en page a chaque fois que tu va survoler une image.

L'autre solution, plus propre, serait d'avoir tes petites images d'un coté, et une grande de l'autre, et au survol de ta petite image, tu remplace le contenu de la grande.
Ex rapide :

<img name="grandeimage" src="grande_image.jpg">
<img src="petite_image1.jpg" onmouseover="document.grandeimage.src='grande_image1.jpg'" onmouseout="document.grandeimage.src='petite_image1.jpg'"><br>
<img src="petite_image2.jpg" onmouseover="document.grandeimage.src='grande_image2.jpg'" onmouseout="document.grandeimage.src='petite_image2.jpg'"><br>
<img src="petite_image3.jpg" onmouseover="document.grandeimage.src='grande_image3.jpg'" onmouseout="document.grandeimage.src='petite_image3.jpg'">

Voila ! Et bon courage !

JM

Polly Peachum

Merci mille fois pour ta gentillesse, jmbianca !
Entre temps j'ai un peu progressé sur ce problème et il semble que mon idée première ne soit pas réalisable : le résultat que je souhaite obtenir c'est une page web couverte de petites photos dans tous les sens, un peu comme si on avait renversé une boite de photos par terre. Et je souhaitais qu'en passant la souris sur chaque photo elle puisse s'agrandir. pas énormément remarque, juste assez pour être "lisible".

Le problème, apparemment, est au niveau du poids de la page et du temps de chargement que ça va induire. J'ai quelque chose comme 70 petite photos. Elle font environ 10 ko chacune. 10 ko auxquels je dois rajouter les 35 environ que fait chaque photo à une taille lisble. Tout ça additionné va faire un temps de chargement beaucoup trop long.

De plus, si je lis bien ce que tu m'expliques, mon procédé risque de me causer des soucis avec la mise en page et tu comprends bien avec mon descriptif que je ne peux pas non plus opter pour la solution que tu me proposes, à savoir petites images d'un côté et une grande de l'autre.

Donc, depuis hier, j'étudie une autre possibilité : celle des zones réactives sur une image.
Je veux dire que je ferais un jpg ou un gif d'une grande image pleine page qui serait un composite de toutes les petites photos (calques écrasés) et je déterminerais ensuite pour chaque petite photo une zone réactive qui amènerait la photo agrandie.

Malheureusement, je rame autant sur ce code là que sur le précédent (lol !!!). Je me demande comment font les autres ? Mon idée n'est quand même pas révolutionnaire et tout le monde n'est pas expert en html ou js, si ???

En tous cas, merci encore pour ton explication au sujet des tailles fixes. A lire ça parait simplissime mais je ne l'aurais pas inventé toute seule ... sourire ...
Si par hasard tu as une bonne idée pour les zones réactives, je suis preneuse ...

edit : sur le lien donné par Gatsusat, il y a un excellent tuto qui fait exactement ce que je cherche. Malheureusement c'est pour du CSS et pour ne rien te cacher, je ne comprends rien du tout ...

Message édité par Polly Peachum le 13-10-2005 à 14:02:43

jmbianca

https://configurateurpc.com/

Content de rendre service !

Si la solution que tu veux, c'est celle d'Alsacréation (trés bon site d'ailleurs), elle n'est pas tres compliqué a developper. Il faut que tu définisse 1 style pour chaque zone réactive, avec 2 états : normal et hover.
Le principe est, quand on passe sur la zone, d'afficher une autre image pour laquelle on aura défini la position et la taille.

CEPENDANT, cela n'enleve pas le probleme de la taille de tes images multiplié par leur nombre. Meme si tu va y gagner avec l'image composite, 35x70 Ko sur 1 page, c'est beaucoup. Et en meme temps, si tu précharge pas tes images, elles risquent de se charger qu'au moment du survol, ce qui va enlever beaucoup a "l'effet" voulu.

Donc, préconisation : garder ton image avec zone réactive, et ouvrir une popup pour voir l'image en grand. Ca te permettra de ne pas trop sacrifier la qualité des images par une compression trop importante.

A toi de voir...

JM

Polly Peachum

Merci JM. J'y ai passé du temps mais grâce à tes conseils (et à des nuits de prise de tête !) j'y suis enfin arrivée !!!
Et je suis très contente du résultat ...
Encore un grand Merci à toi.

Publicité

jmbianca

https://configurateurpc.com/

Tu nous filera l'adresse qu'on puisse admirer !! :bounce:

JM

Polly Peachum

sourire ... je te la donnerai dès que le site sera terminé et en ligne ... Si tu veux mon avis j'ai encore de belles semaines de casse-tête chinois en perspective !!
D'abord parce que j'ai encore beaucoup de travail à faire sur mes pages, ensuite parce que je n'ai pas, mais alors pas la moindre idée de la façon dont on met un site en ligne !!! (heureusement, j'ai engrangé dans mes favoris plein de liens qui font rien qu'à parler de ça ... Mais j'ai la comprenette difficilette et je ne suis pas au bout de mes peines !! ;o))))

gatsusat

le forum HFR est là au cas où

Message cité 1 fois

---------------
Les CSS c'est bon mangez-en

Polly Peachum

gatsusat a écrit :

le forum HFR est là au cas où

voui ... et bien précieux, comme je le constate sans cesse !! :love:

Message cité 1 fois

gatsusat

Polly Peachum a écrit :

voui ... et bien précieux, comme je le constate sans cesse !! :love:

met pas trop de :love: on va finir par baver

---------------
Les CSS c'est bon mangez-en

Polly Peachum

looool 1 seul dans une page entière, ça va, non ? Vous devriez arriver à tenir le choc ... (ou alors c'est que vous êtes émotionnellement très très fragiles !! ;o))))))))

FORUM HardWare.fr

Programmation

HTML/CSS

le rollover expliqué à une débutante ??

Sujets relatifs
Rollover differants sur plusieur images ?? (avec des exemples...)	je suis débutante help me !!!plz
Un "rollover" en CSS ne fonctionne pas, contrairement aux autres	Créer un rollover sur un rollover
[HTML/CSS/Javascript] z-index avec rollover sur image ( zoom CSS )	debutante en c++ cherche cours
Rollover map	rollover !
Débutante SQL : modélisation système train	debutante fille postgres transactions dblinks
Plus de sujets relatifs à : le rollover expliqué à une débutante ??

Page générée en 0.053 secondes