Zoom image en css (mais de certaines images)
Résolu
hipnoz
Messages postés
9
Statut
Membre
-
hipnoz Messages postés 9 Statut Membre -
hipnoz Messages postés 9 Statut Membre -
Voilà, je réactualise mon site actuellement et j'aimerais pouvoir effectuer des zoom sur certaines images mais pas toute. Hors tout ce que je trouve ressemble à cette source (voir en dessous) qui applique le zoom sur toutes mes images de la page (normal vu la prog).
Merci de me répondre j'ai galéré toute la journée et je n'ai rien trouvé encore. Merci d'avance.
source que j'ai:
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
a img {border:none} /* pas d'encadrement des images */
a:hover {border:0px } /* hack pour IE - ne sert sinon à rien */
a:hover img {width:300px ; height:216px} /* agrandi les images lors du survol */
</style>
</head>
<body>
<a href="#"><img src="image.jpg" width="200" height="144" alt=""></a>
</body>
</html>
Merci de me répondre j'ai galéré toute la journée et je n'ai rien trouvé encore. Merci d'avance.
source que j'ai:
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
a img {border:none} /* pas d'encadrement des images */
a:hover {border:0px } /* hack pour IE - ne sert sinon à rien */
a:hover img {width:300px ; height:216px} /* agrandi les images lors du survol */
</style>
</head>
<body>
<a href="#"><img src="image.jpg" width="200" height="144" alt=""></a>
</body>
</html>
Configuration: Windows XP Internet Explorer 7.0
14 réponses
-
pour ajouter une class a une mig tout la rajoute a ta balise img
<img class="nomdetaclasse" src="......>
et dans ton fichier css tu met
.nomdeteclasse {
width="....px";
height="....px";
etc....;}
voila -
non je ne l'ai pas fait. C'est pas faute de vouloir mais je ne connais absolument pas le css (je vois en gros ce que fait le prog mais c'est tout) donc si tu pouvais m'aider à créer la source ce serait super cool :-P
Merci -
ouais ok ça je vois mais le fichier css, ça se présente comment ? c'est ça que je connais pas, y'a des balise (comme html) ?
-
Tu peux mettre le code dans un fichier CSS ou bien laisser le code dans le HTML :
Ceci est ton code CSS actuel :<style type="text/css"> a img {border:none} /* pas d'encadrement des images */ a:hover {border:0px } /* hack pour IE - ne sert sinon à rien */ a:hover img {width:300px ; height:216px} /* agrandi les images lors du survol */ </style>
voici ce que je mettrais :<style type="text/css"> .zoom { height:400px; } .zoom p { text-align:center; } .zoom img { border:none } .zoom img:hover { border:0px; width:300px; height:400px; } </style>
puis, prends l'habitude de mettre des <div> :
<div class="zoom"> <a href="#"><img src="image.jpg" width="200" height="144" alt=""></a> </div>
Ajoute un alt à ton image aussi svp, ce sera plus propre.
alt="Mon image"
En éspèrant que ça t'aide.
A++ -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
ok merci je vais tester ça. J'ai rajouté les balises t'inquiètes, ça c'était juste une ébauche ;-)
-
-
ça ne marche pas :(
j'ai mis exactement ce que tu m'as dit en changeant juste le chemin des images. -
En fait à la base je voulais faire comme dans l'exemple avec la voiture de ce site : http://www.xcess.info/izoom/fr/
Mais déjà c'est chaud avec mon script alors avec celui là...
Mais bon si quelqu'un sait comment on peut faire cet effet je suis preneur.
Merci. -
-
ok merci c'est impeccable.
Au passage t'as été voir le site que j'ai cité plus haut ?
On sait jamais des fois que tu saurais me programmé ça :-P
Encore merci. -
le site plus haut ! est en ASP cela peut ce faire en php !!
-
ok, je savais pas. Merci pour l'info.
Si quelqu'un sait le programmé... merci
Sinon merci à tous de m'avoir aidé. -
Salut,
As-tu essayé de créer une classe pour ton zomm et d'ajouter cette classe dans la balise img des images que tu veux zommer ?
A+ -
SALUT
si tu crais une class il faut lui assigne un style !!! une image avec zoom une sans !!
<html> <head> <meta http-equiv=Content-Type content="text/html; charset=iso-8859-1"> <style type="text/css"> a img {border:none} a:hover {border:0px } .zoom a img {border:none} .zoom a:hover {border:0px } .zoom a:hover img {width:300px ; height:216px} </style> </head> <body> <div class="zoom"> <a href="#"><img src="image.jpg" width="200" height="144" alt=""></a> </div> <a href="#"><img src="image.jpg" width="200" height="144" alt=""></a> </body> </html>
RAD
