Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1595 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Agrandir images avec survol de la souris

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Agrandir images avec survol de la souris

n°2134173
scaryfan
Apple Inside
Posté le 01-04-2012 à 17:44:40  profilanswer
 

Bonjour,
Je souhaite créer une page web avec quelques photos en taille réduite.
Et je souhaite qu'à chaque fois que j'en survole une, celle-ci s'agrandit et occupe le milieur de la page... pas l'intégralité mais une partie... comme ça, quand je bouge la souris, l'image agrandie disparaît...
Est-ce réalisable ?
Merci pour votre aide !
 :hello:


---------------
iMac 4Ghz (fin 2015) RAM 16Go SSD 256Go SSD 2To
mood
Publicité
Posté le 01-04-2012 à 17:44:40  profilanswer
 

n°2134175
abais
Posté le 01-04-2012 à 19:10:58  profilanswer
 

C'est réalisable, oui, le mieux étant de t'appuyer sur une librairie JS comme JQuery.
Il faut bien sûre une bonne base en XHTML/CSS/JS !

 

Sinon, ce que tu proposes n'est pas top d'un point de vue ergonomique, c'est pas très intuitif le coup du "bouger la souris"... pars sur une logique de clic, ou alors garde cette idée mais met un temps de survol minimum avant de déclencher l'agrandissement, sinon ça risque d'être chaotique, surtout si le centre de l'image zoomé n'est pas le même que celui de la vignette !


Message édité par abais le 01-04-2012 à 19:11:44

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2134178
synoyx
Codeur fou
Posté le 01-04-2012 à 19:53:26  profilanswer
 

T'as pas forcement besoin de JS, avec les pseudo-classes du CSS tu peux déjà le faire ( hover / blur ) et si en plus tu es en HTML5/CSS3 avec les transitions tu peux faire un truc sympa sans problème :)


Message édité par synoyx le 01-04-2012 à 19:59:26

---------------
L'ennui est le pire ennemi d'un travail réussi
n°2134185
scaryfan
Apple Inside
Posté le 01-04-2012 à 20:59:18  profilanswer
 

Merci à vous pour vos réponses.
J'ai bien trouvé un lien (http://css.mammouthland.net/zoomer [...] ec-css.php) mais je ne vois pas où mettre le img:hover ...  :(  
J'ai dû louper un truc.


---------------
iMac 4Ghz (fin 2015) RAM 16Go SSD 256Go SSD 2To
n°2134188
scaryfan
Apple Inside
Posté le 01-04-2012 à 21:29:16  profilanswer
 

Finalement, j'ai trouvé un code qui fonctionne : http://batraciens.net/css-astuces/ [...] l-zoom.htm
Par contre, lorsque je survole une image, elle s'agrandit et "pousse" les autres.
L'effet que je cherche, c'est plutôt une image qui s'agrandit au milieu de l'écran et se superposant au-dessus du site...
Bon, suis-je assez clair dans ma description ?  :D


---------------
iMac 4Ghz (fin 2015) RAM 16Go SSD 256Go SSD 2To
n°2134208
synoyx
Codeur fou
Posté le 02-04-2012 à 09:32:23  profilanswer
 

Tu le met en position absolute avec un z-index le plus grand et ça sevrait le faire


---------------
L'ennui est le pire ennemi d'un travail réussi

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Agrandir images avec survol de la souris

 

Sujets relatifs
Superposer deux images sur un JButtonPHP :Galerie d'images
probleme gestion sourisScript upload images
Jlist avec des images[resolue] impossible d'afficher des images sur un spring MVC
carrousel d'images avec vignettes qui défilentdefilement horizontal d'images
Afficher plusieur Images avec NetbeansDemande d'aide: fondu entre deux images sous htm
Plus de sujets relatifs à : Agrandir images avec survol de la souris


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR