iWeb Beginner Forum Iweb Beginner : Forum d'assistance sur Apple iWeb

par **camstramgram** » Ven 24 Avr 2009 13:08

]Bonjour à tous!

Je suis à la recette de la recette miracle qui m'aidera à créer plusieurs rollovers distants dans une page.

[attachment=0]Image-2.jpg[/attachment

CI-joint, l'image de ce que je voudrais réaliser.
On clic sur la vignette en haut de page, et l'image s'affiche en grand.

Je ne sais pas comment organiser mes iframes, comment créer une zone interactive, en gros, je suis un peu perdue...

Si vous avez des pistes...! Merci

Camille

Code: Tout sélectionner: <head> <style type="text/css"> a { margin: 0px 0px 0px 0px; text-decoration: none; } a span { display: none; } a:hover span { display: block; position: absolute; top: 100px; left: 10px; } </style> </head> <body> <a href=""> <img src="http://www.monsite.com/dossierimage/img1.jpg" width="120" height="50" border=0> <span><img src="http://www.monsite.com/dossierimage/img1.jpg" width="616" height="250" border=0></span></a> <a href=""> <img src="http://www.monsite.com/dossierimage/img2.jpg" width="120" height="50" border=0> <span><img src="http://www.monsite.com/dossierimage/img2.jpg" width="616" height="250" border=0></span></a> <a href=""> <img src="http://www.monsite.com/dossierimage/img3.jpg" width="120" height="50" border=0> <span><img src="http://www.monsite.com/dossierimage/img3.jpg" width="616" height="250" border=0></span></a> <a href=""> <img src="http://www.monsite.com/dossierimage/img4.jpg" width="120" height="50" border=0> <span><img src="http://www.monsite.com/dossierimage/img4.jpg" width="616" height="250" border=0></span></a> <a href=""> <img src="http://www.monsite.com/dossierimage/img5.jpg" width="120" height="50" border=0> <span><img src="http://www.monsite.com/dossierimage/img5.jpg" width="616" height="250" border=0></span></a> </body>

et les explications (voir image).

A+

par **philippe** » Sam 25 Avr 2009 11:07

Bonjour,

Pour ceux que ça intéresse, voici la version verticale.
http://www.phvillard.fr/exemples/rollover_deporte/test_vertical.html

Le principe pour les réglages est le même.
Voici le code :

Code: Tout sélectionner: <head> <style type="text/css"> #b { margin: 20px 0px 0px 0px; text-decoration: none; } a span { display: none; } a:hover span { display: block; position: absolute; top: 8px; left: 140px; } </style> </head> <body> <a href=""> <img src="img1.jpg" width="120" height="50" border=0> <span><img src="img1.jpg" width="616" height="330" border=0></span></a><div> <div id="b"> <a href=""> <img src="img2.jpg" width="120" height="50" border=0> <span><img src="img2.jpg" width="616" height="330" border=0></span></a><div> <div id="b"> <a href=""> <img src="img3.jpg" width="120" height="50" border=0> <span><img src="img3.jpg" width="616" height="330" border=0></span></a><div> <div id="b"> <a href=""> <img src="img4.jpg" width="120" height="50" border=0> <span><img src="img4.jpg" width="616" height="330" border=0></span></a><div> <div id="b"> <a href=""> <img src="img5.jpg" width="120" height="50" border=0> <span><img src="img5.jpg" width="616" height="330" border=0></span></a><div> </body>

A+

par **zepatente** » Sam 25 Avr 2009 12:14

Mee too j'utilise le css dans iweb

par **camstramgram** » Sam 25 Avr 2009 18:48

Un grand merci pour vos réponses!

J'ai donc inséré le code, il marche.
Par contre, j'ai 2 questions:
Tout d'abord, les images doivent être insérées dans la page iweb, sinon, le navigateur de fait pas le lien. J'ai donc du camoufler les img derrière des vignettes crées par le code.
Méthode peu orthodoxe, non?..
Et secundo, le rollover fait bien apparaître l'image, mais en agrandissant la vignette, elle apparaît donc complètement pixelisée. Hmm, que faire?

par **philippe** » Dim 26 Avr 2009 03:13

camstramgram a écrit:Un grand merci pour vos réponses!

J'ai donc inséré le code, il marche.
Par contre, j'ai 2 questions:
Tout d'abord, les images doivent être insérées dans la page iweb, sinon, le navigateur de fait pas le lien. J'ai donc du camoufler les img derrière des vignettes crées par le code.
Méthode peu orthodoxe, non?..
Et secundo, le rollover fait bien apparaître l'image, mais en agrandissant la vignette, elle apparaît donc complètement pixelisée. Hmm, que faire?

Bonjour,

1 / Il faut préparer des fichiers pour les vignettes (l'idéal est de les faires à la taille quelles auront dans la page).
Tu nommes par exemple une vignette " img1small.jpg "

2 / Il faut préparer des fichiers pour les grandes images (l'idéal est de les faires à la taille quelles auront dans la page).
Tu nommes par exemple une grande image " img1big.jpg "

Dans le code ça donnera cela :
<img src="http://www.monsite.com/dossierimage/img1small.jpg" width="120" height="50" border=0>
<span><img src="http://www.monsite.com/dossierimage/img1big.jpg" width="616" height="250" border=0></span></a>

3 / Tu dois placer toutes tes images sur ton serveur Internet.

4 / Dans iWeb ce n'est pas la peine de " camoufler " les vignettes, le code marche parfaitement si tu fais comme je te l'explique.

5 / Tu n'auras plus l'effet pixelisé si tu as un fichier pour les vignettes et un fichier pour les grandes images.
En fait ce que tu fais toi, c'est d'agrandir les vignettes.

A+

iWeb Beginner Forum Iweb Beginner : Forum d'assistance sur Apple iWeb

plusieurs rollovers distants sur une même page

plusieurs rollovers distants sur une même page

Publicité

Re: plusieurs rollovers distants sur une même page

Re: plusieurs rollovers distants sur une même page

Re: plusieurs rollovers distants sur une même page

Re: plusieurs rollovers distants sur une même page

Re: plusieurs rollovers distants sur une même page

Re: plusieurs rollovers distants sur une même page

Re: plusieurs rollovers distants sur une même page

Re: plusieurs rollovers distants sur une même page

Re: plusieurs rollovers distants sur une même page

Qui est en ligne