Script java pour zoom sur image

Renseigne-toi sur les attributs CSS :focus et :hover, puis écris-le en CSS ;)

A noter que ce n'est pas forcément esthétique si tu utilises un site centré horizontalement avec des marges relatives (car on doit souvent "positionner" le hover avec des marges absolues).

Sinon, Scriptaculous permet d'afficher des images à partir de miniatures en cliquant dessus, sans recharger la page.

SiDi.35,

je connais Scriptaculous (d'ailleurs je m'en sert pour un autre site) mais par rapport au design du nouveau site ça n'ira pas ensemble. j'ai essayé le css mais mon site est fait de tableaux (ce qui a pour effet de grossir mon tableau en meme temps). Je pense que quelqu'un doit bien avoir un petit script java qui me conviendrait ;)

Bonjour,

Le superbe Lightbox ne te convient pas ?

L'exemple que tu donnes n'est pas fait en Java.
Et ce n'est pas un zoom.

Tu sembles confondre Java et Javascript.
Pas d'abréviations hasardeuses (-;

Si c'est du 2e que tu parles, on trouve des scripts qu'on peut adapter (il doit y en avoir de tout prêts mais où ?).

J'ai eu l'occasion de répondre à un post concernant l'affichage de bulles d'aides http://www.commentcamarche.net/forum/affich 4199063 images reactives dans nouvelle fenetre

Après adaptation, il me semble que j'ai obtenu l'effet que tu montres.
Cette adaptation va chercher le contenu de l'attribut “name” de la vignette “<img>” plutôt que celui du “title" de la zone de la map.
Elle crée le code HTML pour afficher une image, celle de grande taille, dans la <div> prévue pour ça.
Ce “name” doit contenir le nom de l'image de grande taille (n'hésite pas à ajouter des “alt”).

<img onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" src="photo_v.gif" name="photo.gif" width="210" height="110" border="0" />

Tu peux en voir le résultat dans cet exemple.

On doit pouvoir s'y prendre autrement.
Un “preload” améliorerait encore ça.
À tester.

++
Je ne suis pas sûr que l'auteur soit d'accord avec cette adaptation amateur.

--

bonjour à tous,

Gihef,

du coup je faisais fausse route, il me fallait juste une info bulle au survol de la sourie affichant une image plus grande :) c 'est tout mais quand on débute en création de site on a du mal a connaitre les termes techniques (et la technique) :)

le problème c'est que ma div bulle apparait en arrière plan (des éléments passe devant) pour moi c'est une vidéo.. je sais pas comment faire passer ma div bulle en avant plan. Si quelqu'un a une idée ? je suis sur DW

mais sinon pour moi ça fonctionne... (pas sans peine) lol

merci

Un petit screen pour vous montrez mon probleme

http://www.photomania.com/...

on voit que la vidéo passe en avant plan et non l'info-bulle

une solution?

Le problème c'est qu'on n'y voit rien.

--

http://images2.photomania.com/271835/1/rad75C1E.jpg

j'ai fait un autre screen pour vous permettre de mieux comprendre la situation. On voit bien que la bulle passe en arrière plan à cause d'une vidéo et c'est la meme chose lorsqu'il y a une animation flash.

Je ne sais pas trop.

Le tooltip a un

   z-index:100;

Peut-être qu'en en affectant un inférieur au bloc de la vidéo…

   z-index:50;

--

J'ai essayé par le z-index mais rien y fait.
Surement que le probleme se pose lorsqu'on utilise des tableaux ( le z-index ne fonctionne pas). Y'a t'il un moyen de le faire avec un script CSS ?

Salut Faureste :

le script que tu mentionne ici http://www.xcess.info/izoom/fr/ est un contrôle asp.net qui génère du JavaScript pour positionner l'image en haut, en bas, sur les cotés de l'élément source ....

pour ta dernière question concernant le z-index qui marches pas, je suis sure que ta vidéo est affiché par un lecteur flash, et le problème avec ca c'est que rien ne peut être affiché dessus car c'est des 'OBJECTS'

Donc pas de solution, il faudrait l'éloigner des vidéos. :( J’ai eu le même problème avec ce widget http://www.6lyrics.com/widgets.aspx en essayant de le placer en absolue sur une animation flash (c'est dommage).

Un peu tard comme réponse mais y'a ça qui marche pas mal non plus... :

<img src="image_origine.jpg" onmouseover="this.src='image_plus_grande.jg';" onmouseout="this.src=image_origine.jpg';" />

comprendre
onmouseover="this.src='image_plus_grande.jpg';

et pas sans le P de jpg... :)

Je ne recommande pas du tout la solution de O-PUCES.

Tout simplement parce que la hauteur de la nouvelle image forcera le navigateur à recalculer la hauteur de son conteneur, puis du conteneur de celui-ci, etc, et risque au final de décaler beaucoup de choses (sauf si on ajoute une grosse couche de javascript, mais bon...).

Pour ce qui est du problème des animations Flash qui refusent de passer en arrière-plan, c'est un problème très très récurrent. En cherchant sur google (ou sur alsacreations.com), on devrait pouvoir trouver la solution.