Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2810 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème avec hover.

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème avec hover.

n°1530474
grafvon
Posté le 19-03-2007 à 12:32:09  profilanswer
 

Bonjour,    
 
Je suis en train de faire un petit site avec des photos que je dois agrandir quand je passe avec la souris dessus. Quand  on arrive pour la prémiere fois sur le site toutes les photos ont la même taille en occurence de petite taille. Sauf que chaque photo au passage de la souris dessus devra avoir de width et height différent car chaque image a une taille différente de l'autre en pixel autrement ça s'affiche bizarrement.
J'aimerais que le site s'affiche correctement sur IE plus que sur MFF.
 
J'ai pris un petit bout de code html et css sur internet qui est censé fonctionner correctement car quand j'essaye depuis le site où j'ai pris le code ça marche bien donc sur IE, mais quand j'essaye depuis mon non domaine ça ne marche pas sur IE.
 
Voici le code HTML:
 

Code :
  1. <html>
  2. <head>
  3.  <link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="Essai.css" />
  4.  </head>
  5.    <body>
  6. <div class="zoom1">
  7.     <p>
  8.         <a href="#"></a>
  9.     </p>
  10. </div>
  11. </body>
  12. </html>


 
Maintenant le code CSS:
 

Code :
  1. .zoom1 {
  2. width: 400px;
  3. height: 300px;
  4. background-image: url(machaon1.jpg);
  5. background-repeat: no-repeat;
  6. margin: 0 auto;
  7. }
  8. .zoom1 p, .zoom1 a {
  9. height: 300px;
  10. display: block;
  11. margin:0}
  12. .zoom1 a:hover {
  13. background-image: url(machaon1.jpg);
  14. background-position: 0px -300px;
  15. background-repeat:no-repeat;
  16. cursor:help;}


 
----------------------------------------------
Ceci est mon code que j'essaye de faire marcher.
 

Code :
  1. <HTML>
  2. <HEAD>
  3. <style type="text/css">
  4. .toto
  5. {
  6. a image {border: none;}
  7. a:hover {border: 0px;}
  8. a:hover image {width: 377px; height: 650px;}
  9. }
  10. .toto1
  11. {
  12. a image {border: none;}
  13. a:hover {border: 0px;}
  14. a:hover image {width: 200px; height: 400px;}
  15. }
  16. </style>
  17. </HEAD>
  18. <BODY>
  19. <div class="toto">
  20. <a href="#"><img src="P7160150COMP.jpg" width="31px" height="51px" alt="" >
  21. </a>
  22. <div class="toto1">
  23. <a href="#"><img src="P7160150COMP.jpg" width="31px" height="51px" alt="">
  24. </a>
  25. </div>
  26. </BODY>
  27. </HTML>


 
J'aimerais que l'histoire de class marche pour je puisse définir les paramètre de taille de chaque photo lorsque la souris passe dessus.
 
Merci beaucoup de l'avoir lu et m'avoir aidé.


Message édité par grafvon le 19-03-2007 à 13:16:03
mood
Publicité
Posté le 19-03-2007 à 12:32:09  profilanswer
 

n°1530543
cgo2
Dum spiro spero
Posté le 19-03-2007 à 15:14:43  profilanswer
 

J'ai pas trop compris, mais je dirais quelque chose du genre :
a img { ... }
a:hover img { ... }


---------------
When it's from Finland it's good.  - Mon blog
n°1530559
grafvon
Posté le 19-03-2007 à 15:29:39  profilanswer
 

Non, je viens d'essayer ce que vous me proposez et ça ne marche pas. En faite ce que je voulais c'est donner des paramètres de taille différents pour chaque photo lorsque la souris passe sur la photo comme montre les lignes 8 et 14.
Merci

n°1530569
cgo2
Dum spiro spero
Posté le 19-03-2007 à 15:36:39  profilanswer
 

Bah oui sauf que dans les lignes 8 et 14 c'est écrit "image" alors que c'est "img".


---------------
When it's from Finland it's good.  - Mon blog
n°1530882
grafvon
Posté le 20-03-2007 à 08:54:37  profilanswer
 

Bonjour,
 
J'ai corrigé les lignes 8 et 14 en mettant img à la place de image et ça ne marche pas. Le problème n'est même pas là car avec image ça marchait aussi. Le problème c'est que je n'arrive pas à faire marcher les class pour chaque photo et c'est ça que je ne comprends pas.
 
Merci

n°1530907
grafvon
Posté le 20-03-2007 à 09:50:37  profilanswer
 

C'est bon j'ai résolu le problème.
 
Merci beaucoup quand même.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème avec hover.

 

Sujets relatifs
applet : probleme compatibilité jre mac os...[AS] Problème tout bête de classe/AttachMovie
Positionnement de texte, problème sous IE (Au secours)Probleme creation newsletter au format HTML
[CSS] List style, image et hoverCSS probleme de cascading avec les a:link, a:hover...
Problème de sélecteur ( :hover et compagnie)[CSS] Problème avec hover & active
Problème d'affichage sous IE avec :hoverCSS : probleme de hover avec Internet Explorer
Plus de sujets relatifs à : Problème avec hover.


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR