Survol d'une image...

Survol d'une image... - HTML/CSS - Programmation

Marsh Posté le 19-06-2006 à 13:20:27    

Bonjour à tous,  
 
Je me retrouve bloqué à cause, j'en suis sûre, de qqch de très facile mais que je n'arrive pas à comprendre...  
J'essaie de faire un survol sur une image (quand je passe sur mon image, elle change...)et je ne m'en sors pas.  
 
Voilà ce que j'ai fait:  
Sur ma page .htm:  
 

Code :
  1. <a class = "image" href = "#top"><img src = "images/s_nav/new_s_nav/FlecheHaut.jpg"></a>


 
Sur ma page .css:  
 

Code :
  1. a.image
  2. {
  3. display: block;
  4. width: 16px;
  5. height: 18px;
  6. background-image: url (images/s_nav/new_s_nav/FlecheHaut.jpg);
  7. background-repeat: no-repeat;
  8. }
  10. a.image:hover
  11. {
  12. background-image: url(images/s_nav/new_s_nav/FlecheHaut2.jpg);
  13. }


 
Quel est le problème?  
Mon image s'affiche mais si je passe dessus, rien ne se passe...  
Merci   :)


Message édité par fgiuliano le 20-06-2006 à 13:48:13
Reply

Marsh Posté le 19-06-2006 à 13:20:27   

Reply

Marsh Posté le 19-06-2006 à 13:29:16    

il faut que tu enleves l'element img a l'interieur de ton lien.
Dans ton cas l'element a englobe parfaitemenent l'image et cette image ne permet pas de voir le fond appliqué au <a>.
 
evite les espaces entre un attribut et sa valeur :
class = "truc"  --> class="truc"
 
pour faire un rollover plus efficace que ce que tu fais tu peux faire :
http://afbilou.free.fr/tmp/preload.html
le but etant de creer un fichier image contenant les deux etats en meme temps : normal et hover
de positionner correctement le background-image en fonctione de cet etat
ca permet de ne pas attendre que le navigateur charge la nouvelle image au survol du lien

Reply

Marsh Posté le 19-06-2006 à 13:30:03    

tu vire la balise img qu'il y a dans ton code ca marchera ptet mieux [:petrus75]

Message cité 1 fois
Reply

Marsh Posté le 19-06-2006 à 13:37:49    

gatsu35 a écrit :

tu vire la balise img qu'il y a dans ton code ca marchera ptet mieux [:petrus75]


 
ok, déjà merci pour vos réponses... Ensuite, si je comprends bien, il faudrait enlever cette ligne:
 

Code :
  1. <img src = "images/s_nav/new_s_nav/FlecheHaut.jpg">


?
 
En faisant ceci, j'ai bien ma seconde image qui apparaît quand je passe dessus avec ma souris mais la première non...
 
Bon, je vais aller sur le lien que afbilou m'a conseillé et je vais voir si je m'en sors...
Merci :)

Reply

Marsh Posté le 19-06-2006 à 14:16:32    

Bon, ben... j'ai beau essayer, je n'y arrive pas...  :(  
 
voilà mon code dans mon <head>:

Code :
  1. <title>Chargement instantanné des images</title>
  2. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  4. <style type="text/css">
  5.  a.image {
  6.   display:   block;
  7.   width:    16px;
  8.   height:   18px;
  10.   background-image: url(images/s_nav/new_s_nav/FlecheHaut.jpg);
  11.  }
  12.  a.image:hover {
  13.   background-image: url(images/s_nav/new_s_nav/FlecheHaut2.jpg);
  14.  }
  15. </style>


 
et au moment de l'affichage de l'image:

Code :
  1. <a classe="image" href="#top"></a>


 
Qu'est-ce qui ne va pas?!  :pt1cable:

Message cité 1 fois
Reply

Marsh Posté le 19-06-2006 à 14:34:47    

avoir rien dans le a :p
 
met un &nbsp;

Message cité 1 fois
Reply

Marsh Posté le 19-06-2006 à 14:41:03    

xtof_83 a écrit :

avoir rien dans le a :p
 
met un &nbsp;


 
je viens de le faire... mais ça ne fonctionne tjs pas... :pfff:

Reply

Marsh Posté le 19-06-2006 à 14:45:20    

<a classe="image">

Message cité 1 fois
Reply

Marsh Posté le 19-06-2006 à 14:52:40    

afbilou a écrit :

<a classe="image">


 
 :ange:  
 
Désolée pour le temps passé juste pour cela mais je vous remercie, tout fonctionne correctement maintenant...
 :hello:  
 

Reply

Marsh Posté le 19-06-2006 à 15:27:03    

de riiiiien  :ange:

Reply

Marsh Posté le 19-06-2006 à 15:27:03   

Reply

Marsh Posté le 20-06-2006 à 13:50:59    

Re bonjour à tous... alors tout fonctionne correctement mais...
 
avec Internet Explorer et pas avec FireFox...  :fou:  
 
En effet, sous FireFox, l'image n'apparaît pas du tout...    :(  
Je suis en train de regarder à droite et à gauche mais je ne vois pas pourquoi...
 
Est-ce que quelqu'un aurait une idée?  :??:  
 
Merci d'avance!

Message cité 1 fois
Reply

Marsh Posté le 20-06-2006 à 13:54:13    

fgiuliano a écrit :

Re bonjour à tous... alors tout fonctionne correctement mais...
 
avec Internet Explorer et pas avec FireFox...  :fou:  
 
En effet, sous FireFox, l'image n'apparaît pas du tout...    :(  
Je suis en train de regarder à droite et à gauche mais je ne vois pas pourquoi...
 
Est-ce que quelqu'un aurait une idée?  :??:  
 
Merci d'avance!


On cherche a partir de koi ?

Reply

Marsh Posté le 20-06-2006 à 13:57:46    

fgiuliano a écrit :


 
voilà mon code dans mon <head>:

Code :
  1. <title>Chargement instantanné des images</title>
  2. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  4. <style type="text/css">
  5.  a.image {
  6.   display:   block;
  7.   width:    16px;
  8.   height:   18px;
  10.   background-image: url(images/s_nav/new_s_nav/FlecheHaut.jpg);
  11.  }
  12.  a.image:hover {
  13.   background-image: url(images/s_nav/new_s_nav/FlecheHaut2.jpg);
  14.  }
  15. </style>


 
et au moment de l'affichage de l'image:

Code :
  1. <a class="image" href="#top"></a>


 


 
Tjs le même code... sorry

Reply

Sujets relatifs:

Leave a Replay

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