Zoom image en css (mais de certaines images)

Résolu/Fermé

hipnoz Messages postés 9 Date d'inscription jeudi 28 juin 2007 Statut Membre Dernière intervention 30 juin 2007 - 28 juin 2007 à 19:28
hipnoz Messages postés 9 Date d'inscription jeudi 28 juin 2007 Statut Membre Dernière intervention 30 juin 2007 - 30 juin 2007 à 13:18

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>

A voir également:

Zoom image en css (mais de certaines images)
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Image de profil - Guide
Google recherche par image - Guide
Faststone image viewer - Télécharger - Visionnage & Diaporama

14 réponses

Réponse 1 / 14

youplaboum
29 juin 2007 à 16:06

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

Réponse 2 / 14

hipnoz Messages postés 9 Date d'inscription jeudi 28 juin 2007 Statut Membre Dernière intervention 30 juin 2007 7
29 juin 2007 à 15:53

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

Réponse 3 / 14

hipnoz Messages postés 9 Date d'inscription jeudi 28 juin 2007 Statut Membre Dernière intervention 30 juin 2007 7
29 juin 2007 à 16:18

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) ?

Réponse 4 / 14

foobar47 Messages postés 13536 Date d'inscription jeudi 9 janvier 2003 Statut Contributeur Dernière intervention 16 mai 2014 532
29 juin 2007 à 16:38

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

Réponse 5 / 14

hipnoz Messages postés 9 Date d'inscription jeudi 28 juin 2007 Statut Membre Dernière intervention 30 juin 2007 7
29 juin 2007 à 16:45

ok merci je vais tester ça. J'ai rajouté les balises t'inquiètes, ça c'était juste une ébauche ;-)

Réponse 6 / 14

foobar47 Messages postés 13536 Date d'inscription jeudi 9 janvier 2003 Statut Contributeur Dernière intervention 16 mai 2014 532
29 juin 2007 à 16:46

Ok, tiens moi au courant...

Réponse 7 / 14

hipnoz Messages postés 9 Date d'inscription jeudi 28 juin 2007 Statut Membre Dernière intervention 30 juin 2007 7
29 juin 2007 à 17:07

ça ne marche pas :(
j'ai mis exactement ce que tu m'as dit en changeant juste le chemin des images.

Réponse 8 / 14

hipnoz Messages postés 9 Date d'inscription jeudi 28 juin 2007 Statut Membre Dernière intervention 30 juin 2007 7
29 juin 2007 à 17:11

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.

Réponse 9 / 14

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
29 juin 2007 à 17:39

Réponse 10 / 14

hipnoz Messages postés 9 Date d'inscription jeudi 28 juin 2007 Statut Membre Dernière intervention 30 juin 2007 7
29 juin 2007 à 18:22

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.

Réponse 11 / 14

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
29 juin 2007 à 18:55

le site plus haut ! est en ASP cela peut ce faire en php !!

Réponse 12 / 14

hipnoz Messages postés 9 Date d'inscription jeudi 28 juin 2007 Statut Membre Dernière intervention 30 juin 2007 7
30 juin 2007 à 13:18

ok, je savais pas. Merci pour l'info.
Si quelqu'un sait le programmé... merci
Sinon merci à tous de m'avoir aidé.

Réponse 13 / 14

foobar47 Messages postés 13536 Date d'inscription jeudi 9 janvier 2003 Statut Contributeur Dernière intervention 16 mai 2014 532
29 juin 2007 à 10:50

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+

Réponse 14 / 14

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
29 juin 2007 à 17:34

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

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

code couleur associé a une image

Comment enlever le rouge sur la photo svp ?

mon image prend une dominante bleue

Discussions similaires

Newsletters