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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Survol d'une image...

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Survol d'une image...

n°1390395
fgiuliano
Posté le 19-06-2006 à 13:20:27  profilanswer
 

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. }
  9. a.image:hover
  10. {
  11. background-image: url(images/s_nav/new_s_nav/FlecheHaut2.jpg);
  12. }


 
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
mood
Publicité
Posté le 19-06-2006 à 13:20:27  profilanswer
 

n°1390402
afbilou
pouet your life
Posté le 19-06-2006 à 13:29:16  profilanswer
 

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

n°1390403
gatsu35
Blablaté par Harko
Posté le 19-06-2006 à 13:30:03  profilanswer
 

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

n°1390413
fgiuliano
Posté le 19-06-2006 à 13:37:49  profilanswer
 

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

n°1390458
fgiuliano
Posté le 19-06-2006 à 14:16:32  profilanswer
 

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" />
  3. <style type="text/css">
  4.  a.image {
  5.   display:   block;
  6.   width:    16px;
  7.   height:   18px;
  8.   background-image: url(images/s_nav/new_s_nav/FlecheHaut.jpg);
  9.  }
  10.  a.image:hover {
  11.   background-image: url(images/s_nav/new_s_nav/FlecheHaut2.jpg);
  12.  }
  13. </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:

n°1390480
xtof_83
Freeride Spirit
Posté le 19-06-2006 à 14:34:47  profilanswer
 

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

n°1390488
fgiuliano
Posté le 19-06-2006 à 14:41:03  profilanswer
 

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:

n°1390492
afbilou
pouet your life
Posté le 19-06-2006 à 14:45:20  profilanswer
 

<a classe="image">

n°1390503
fgiuliano
Posté le 19-06-2006 à 14:52:40  profilanswer
 

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:  
 

n°1390534
afbilou
pouet your life
Posté le 19-06-2006 à 15:27:03  profilanswer
 

de riiiiien  :ange:

mood
Publicité
Posté le 19-06-2006 à 15:27:03  profilanswer
 

n°1391419
fgiuliano
Posté le 20-06-2006 à 13:50:59  profilanswer
 

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!

n°1391425
afbilou
pouet your life
Posté le 20-06-2006 à 13:54:13  profilanswer
 

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 ?

n°1391433
fgiuliano
Posté le 20-06-2006 à 13:57:46  profilanswer
 

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" />
  3. <style type="text/css">
  4.  a.image {
  5.   display:   block;
  6.   width:    16px;
  7.   height:   18px;
  8.   background-image: url(images/s_nav/new_s_nav/FlecheHaut.jpg);
  9.  }
  10.  a.image:hover {
  11.   background-image: url(images/s_nav/new_s_nav/FlecheHaut2.jpg);
  12.  }
  13. </style>


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

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


 


 
Tjs le même code... sorry


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

  Survol d'une image...

 

Sujets relatifs
zoom sur image??Image Submit
Soumettre avec une image[javascript] affichage de l'iamge au survol de l'image
Zoom sur survol d'imageimage au survol d'un texte
Image qui se modifie au survol de la souris[CSS] affichage d'une image au survol d'un texte
[VB] image qui change au survol de la souris..comment ouvrir une image au survol d'un liens? SVP
Plus de sujets relatifs à : Survol d'une image...


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