Zoom image en css (mais de certaines images)
Résolu
hipnoz
Messages postés
9
Date d'inscription
Statut
Membre
Dernière intervention
-
hipnoz Messages postés 9 Date d'inscription Statut Membre Dernière intervention -
hipnoz Messages postés 9 Date d'inscription Statut Membre Dernière intervention -
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>
A voir également:
- Zoom image en css (mais de certaines images)
- Image iso - Guide
- Des images - Guide
- Acronis true image - Télécharger - Sauvegarde
- Légender une image - Guide
- Reduire taille image - Guide
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
<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
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 :
voici ce que je mettrais :
puis, prends l'habitude de mettre des <div> :
Ajoute un alt à ton image aussi svp, ce sera plus propre.
En éspèrant que ça t'aide.
A++
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
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.
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.
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.
ok, je savais pas. Merci pour l'info.
Si quelqu'un sait le programmé... merci
Sinon merci à tous de m'avoir aidé.
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+
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 !!
RAD
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