High-Tech Santé Médecine Droit-Finances

Réalisation

vidéo numérique

Rechercher : dans
Par :

[Javascript - CSS ] zoom image reactif

Dernière réponse le 12 déc 2008 à 11:45:04 john, le 26 oct 2005 à 10:27:04 
 Signaler ce message aux modérateurs

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

Meilleures réponses pour « [Javascript CSS ] zoom image reactif » dans :
Javascript - Librairies d'effets pour vos images VoirAu gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus...
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Une popup d'information au survol sans Javascript ni CSS VoirParfois, il peut être utile d'afficher des informations supplémentaire au survol du curseur sur une zone de l'écran, par exemple "Cliquez pour agrandir" sur une image, un descriptif sur une abbréviation ou des détails sur un lien. On trouve...
Javascript - Les événements VoirQu'appelle-t-on un événement? Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
Posez votre question Répondre

1

StreM, le 26 oct 2005 à 10:30:43

Salut,
renseigne toi sur les balises MAP et AREA.
Mais ton message n'est pas très clair...

Moins le blanc est intelligent, plus le noir lui parait bête

   
Répondre à StreM

2

john, le 26 oct 2005 à 10:46:16

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 :/ )

   
Répondre à john

3

Zep3k!GnO, le 26 oct 2005 à 12:03:45

Ben pourquoi tu refais pas des images pour tes zones de ZOOM ( ton image en grand ) et sur ces nouvelles images, tu places tes MAP et toyt le tralala.... ?!


Zep3k!GnO
-->hi i hi o on va aps au boulot :P

   
Répondre à Zep3k!GnO

4

john, le 26 oct 2005 à 13:09:50
  • +1

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

   
Répondre à john

5

Zep3k!GnO, le 26 oct 2005 à 13:55:12
  • +1

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

   
Répondre à Zep3k!GnO

6

John, le 26 oct 2005 à 16:20:22

J'vois pas vraiment ce que tu veux dire ....

Concretement ca donne quoi ?

   
Répondre à John

7

syphaks, le 12 déc 2008 à 09:19:59

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

   
Répondre à syphaks

8

 bg62, le 12 déc 2008 à 11:45:04

Bonjour
... allez .. je "repique ma crise" :
ce forum est un forum d'entraide, l'inscription y est gratuite, alors pourquoi rester 'anonyme' ?
cela ne coûte rien de s'inscrire, et c'est beaucoup plus sympa vis-à-vis de ceux qui voudront vous aider ...
@+
b g
le 'www' est fait aussi pour communiquer, partager et échanger, non ?

   
Répondre à bg62
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net