Problème avec hover.

Problème avec hover. - HTML/CSS - Programmation

Marsh Posté le 19-03-2007 à 12:32:09    

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
Reply

Marsh Posté le 19-03-2007 à 12:32:09   

Reply

Marsh Posté le 19-03-2007 à 15:14:43    

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
Reply

Marsh Posté le 19-03-2007 à 15:29:39    

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

Reply

Marsh Posté le 19-03-2007 à 15:36:39    

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
Reply

Marsh Posté le 20-03-2007 à 08:54:37    

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

Reply

Marsh Posté le 20-03-2007 à 09:50:37    

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed