rollover déporté

Le 19/01/2015 22:01, docanski a écrit :

Salut la foule (enfin ... ce qu'il reste de la belle époque ... :-) ),

J'ai abandonné le développement de pages Web depuis belle lurette (mais
un copain me supplie de lui faire un p'tit kékchose pour une maison de
vacances à louer) et, la mémoire défaillant (l'âge, que voulez-vous
...), j'ai du mal à rassembler mes esprits et mes souvenirs pour créer
ce qui, de prime abord, devrait être assez simple : un "rollover"
déporté de vignettes vers des images de dimensions plus confortables.
Il y a une époque où j'ai fait cela, mais c'était en JS, moins élégant
qu'une solution "tout CSS". Je n'aime pas trop, je souhaite trouver
autre chose, en CSS vious l'aurez compris.
Et c'est là que le bât blesse ... et que le gars coince.
En bref, il s'agit d'une ch'tite page au bas de laquelle sont affichées
jusqu'à 8 vignettes.
Je cherche à afficher sur le texte existant la photo correspondant à la
vignette mais au format 600px * 400 px voire un peu plus, par le simple
passage du curseur de souris sur ces vignettes.
Les rares exemples du web ne me satisfont pas, je cherche quelque chose
de plus simple que le simple.
Quelqu'un aurait ça en stock ?
Ah oui, cela concerne cette page :
http://docanski.free.fr/toscane/page5b.html
... où un embryon de styles attend patiemment qu'on le complète.
Les vignettes sont en place et la 1ère photo de bonne taille
(photog1.jpg) est sur le serveur.
D'avance, tous les remerciements du copain ... et de moi-même, évidemment.

Cordialement,

Bonjour Monsieur

Merci pour les détails.

Dur à lire.

Comme on dit : "Fort en Amour, dur en affaire". ;)

Respectueusement.

Jean François Ortolo

Le 19/01/15 22:01, docanski a écrit :


un truc pas trop compliqué :
(rollover au survol)

<div id="afficheur">
<a href="javascript:void()">
<img src="ma_vignette_1.jpg" alt="diapo" title="Fraises de Plougastel">
<span><img src="vrai_vue_1.jpg"></span>
</a>
<a href="javascript:void()">
<img src="ma_vignette_1.jpg" alt="diapo" title="tulipes de Hollande">
<span><img src="vrai_vue_1.jpg"></span>
</a>
</div><!-- fin 'afficheur' -->


css :

#afficheur { position: relative; width: 800px }
#afficheur a { display: block; }
#afficheur a span { display: none; position: absolute; top:0; right: 0;}
#afficheur a:hover span { display:block }
#afficheur a img { width: 200px }
#afficheur a span img { width: 500px }

Ah oui, cela concerne cette page :
http://docanski.free.fr/toscane/page5b.html

Bon, alors là on pourrait essayer

compléter la css avec :

.index { position: relative }

corriger :

a span {display: none;
position:absolute;top:10px;left:100px;width:600px;height:400px;}
a:hover span {display:block}
a span img { width: inherit; }

et les grandes vues seront affichées par dessus le texte

Les vignettes sont en place et la 1ère photo de bonne taille
(photog1.jpg) est sur le serveur.

<div style="padding-top:120px">
<a href="javascript:void()" title"les belles collines">
<img src="photos/photoq1.jpg.jpg" alt="diapo">
<span>
<img src="photos/photo1.jpg" alt="">
</span>
</a>
<a href="javascript:void()" title"mon beau vallon">
<img src="photos/photoq2.jpg.jpg" alt="diapo">
<span>
<img src="photos/photo2.jpg" alt="">
</span>
</a>
<a href="javascript:void()" title"cimes enchanteresses">>
<img src="photos/photoq3.jpg.jpg" alt="diapo"
<span>
<img src="photos/photo3.jpg" alt="">
</span>
</a>
etc. ...
</div>

D'avance, tous les remerciements du copain ...

tu y étais presque !
Suffit de tourner le blème à rebrousse-poil ;-)



Ce procédé de rollover, comme tu as pu t'en rendre compte, est bien
moins inintéressant que celui par JS qui ne charge les grandes vues qu'à
la demande (au onclick).
On peut cependant faire de même en css

Les images grandes vues devront impérativement avoir été toutes
redimensionnées en 600/400 sinon si plus grandes elles seront rognées

css complémentaires à placer après les autres ci-haut :

a span {display: block; background: no-repeat center center; }
a:hover span.p1 { background-image:url(photos/photo1.jpg);
a:hover span.p2 { background-image:url(photos/photo2.jpg);
a:hover span.p3 { background-image:url(photos/photo3.jpg);
a:hover span.p4 { background-image:url(photos/photo4.jpg);
a:hover span.p5 { background-image:url(photos/photo5.jpg);

Modif du html :

<div style="padding-top:120px">
<a href="javascript:void()">
<img src="photos/photoq1.jpg.jpg" alt="diapo">
<span class="p1"></span>
</a>
<a href="javascript:void()">
<img src="photos/photoq2.jpg.jpg" alt="diapo">
<span class="p2"></span>
</a>
<a href="javascript:void()">
<img src="photos/photoq3.jpg.jpg" alt="diapo">
<span class="p3"></span>
</a>
etc. ...
</div>


et, bien sûr, même phénomène qu'en JS : il faudra un peu attendre le
chargement de la grande vue, ce qui peut être un peu déroutant avec un
rollover par simple survol au lieu de clic



css2:
http://www.yoyodesign.org/doc/w3c/css2/indexlist.html

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8

Le 22/01/15 03:42, SAM a écrit :

Le 19/01/15 22:01, docanski a écrit :

Ah oui, cela concerne cette page :
http://docanski.free.fr/toscane/page5b.html

Bon, alors là on pourrait essayer

http://stephane.moriaux.pagesperso-orange.fr/truc/rollover_deporte.htm
ou mieux ?
http://stephane.moriaux.pagesperso-orange.fr/truc/rollover_deporte_nu.htm


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8

SAM a écrit le 22/01/2015 03:42 :

Ah oui, cela concerne cette page :
http://docanski.free.fr/toscane/page5b.html

Salut Steph !

J'ai enfin eu un peu de temps pour installer les styles et script dans
la page, après petite correction, essentiellement au niveau de
l'affichage des photos en taille normale.
Cela se passe toujours sur la même page, 3 vignettes sont provisoirement
utilisables, le reste viendra quand je recevrai les photos de mon copain.
Faudra pour cela qu'il retourne en Toscane car il a tout perdu lors d'un
plantage de son Ouindo$e que son beau-frère ... programmeur (faut
l'faire !) a tenté de lui réparer.

Merci pour ton aide, elle m'a permis d'écarquiller un peu mieux les yeux ;-)

--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/

docanski a écrit le 25/01/2015 11:55 :

J'ai enfin eu un peu de temps pour installer les styles et script dans
la page, après petite correction, essentiellement au niveau de
l'affichage des photos en taille normale.

... et surtout centrées au bon endroit car elles débordaient dès qu'on
agrandissait la fenêtre du navigateur. Un détail, quoi.

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/