[Javascript - CSS ] zoom image reactif
john
-
bg62 Messages postés 26230 Statut Modérateur -
bg62 Messages postés 26230 Statut Modérateur -
Bonjour
je souhaite faire une sorte de zoom image au passage de la souris , mais avec cependant la possibilite d'avoir des zones reactives dans la fenetre de zoom
j'ai deja reussi a faire mon zoom en feuille de style css avec un :hover
mais comment faire des zone de selection dans cette fenetre de zoom ?
merci d'avance
je souhaite faire une sorte de zoom image au passage de la souris , mais avec cependant la possibilite d'avoir des zones reactives dans la fenetre de zoom
j'ai deja reussi a faire mon zoom en feuille de style css avec un :hover
mais comment faire des zone de selection dans cette fenetre de zoom ?
merci d'avance
A voir également:
- [Javascript - CSS ] zoom image reactif
- Image iso - Guide
- Appel zoom - Guide
- Légender une image - Guide
- Reduire taille image - Guide
- Acronis true image - Télécharger - Sauvegarde
6 réponses
mais la je sais pas comment definir d'autres zones sur cette image la vu que c dans du code css
Bah au lieu d'appliquer #zone1 a ton image tu dois faire une autre map en CSS sur le modèle de #zone1 mais tu l'appelles #zone2 et c'est elle que t'appliques a ton image , non ?!
Zep3k!GnO
-->hi i hi o on va pas au boulot :P
Bah au lieu d'appliquer #zone1 a ton image tu dois faire une autre map en CSS sur le modèle de #zone1 mais tu l'appelles #zone2 et c'est elle que t'appliques a ton image , non ?!
Zep3k!GnO
-->hi i hi o on va pas au boulot :P
bjr a vous,
en fait ce qu'il veut dire c'est ca:
tu as une premiere image (Photo1) ok.
Photo1=> tu lui aplike un zoom1 en css. Ce zoom1 est en fait une autre image appelé Photo2. ensuite tu répéte ton code comme tu le souhaites.
Photo2=> tu lui applike un zoom2 en définissant ce dernier sur ton css.
c clair??
en fait ce qu'il veut dire c'est ca:
tu as une premiere image (Photo1) ok.
Photo1=> tu lui aplike un zoom1 en css. Ce zoom1 est en fait une autre image appelé Photo2. ensuite tu répéte ton code comme tu le souhaites.
Photo2=> tu lui applike un zoom2 en définissant ce dernier sur ton css.
c clair??
merci pour la reponse , mais j'ai deja regarde du cote des balise MAP et AREA :)
Effectivement , a la relecture , mon message est plutot confus
en fait , j'ai une image de fond , avec des zones reactives ( MAP , AREA ) , qui au survol de la souris , affichent un cadre representant un zoom de la partie survolee.
ce que j'aimerai avoir c'est dans ce cadre de zoom qui s'affiche , avoir d'autres zones reactives sur lequelles on pourrait clicker
une mise en abime en sorte
une zone qui affiche un cadre , et dans ce cadre d'autres zones ..
le tout en restant dans la meme page
Suis-je plus clair la ?
( j'ai pas trop l'impression :/ )
Effectivement , a la relecture , mon message est plutot confus
en fait , j'ai une image de fond , avec des zones reactives ( MAP , AREA ) , qui au survol de la souris , affichent un cadre representant un zoom de la partie survolee.
ce que j'aimerai avoir c'est dans ce cadre de zoom qui s'affiche , avoir d'autres zones reactives sur lequelles on pourrait clicker
une mise en abime en sorte
une zone qui affiche un cadre , et dans ce cadre d'autres zones ..
le tout en restant dans la meme page
Suis-je plus clair la ?
( j'ai pas trop l'impression :/ )
ben c'est deja une autre image le zoom ( zone1.jpg)
voila le code css
#zone1:hover {
width : 216px;
height: 169px;
left: 110px;
top: 15px;
border: 1px dotted white;
background: url(zone1.jpg) top left no-repeat;
z-index: 100;
}
mais la je sais pas comment definir d'autres zones sur cette image la vu que c dans du code css
voila le code css
#zone1:hover {
width : 216px;
height: 169px;
left: 110px;
top: 15px;
border: 1px dotted white;
background: url(zone1.jpg) top left no-repeat;
z-index: 100;
}
mais la je sais pas comment definir d'autres zones sur cette image la vu que c dans du code css
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question