rollover css problème

rollover css problème - HTML/CSS - Programmation

Marsh Posté le 19-11-2007 à 23:27:21    

salut, :hello:
 
j'ai une partie de code css symple où je voudrai créer un rollover mais voila:
l'image est en background et je n'ai pas trouvé sur google le code aproprié.
 

Code :
  1. #menu2
  2. {
  3.    float: left;
  4.    width: 220px;
  5.    height: 50px;
  6.    background-image: url("images/menu_gauche_index.gif" );/*index*/
  7.    background-repeat: no-repeat;
  8. margin-bottom: 0px;
  9. margin-left: -220px;
  10. margin-top: 50px ;
  11. }


 
mon 2em image se nomme: menu_index_survol.gif
 
est il possible de faire se que je recherche ou est-il aubligatoire de créer une liste?
merci beaucoup, a+ :bounce:

Reply

Marsh Posté le 19-11-2007 à 23:27:21   

Reply

Marsh Posté le 20-11-2007 à 00:32:21    

1) prends des cours de francais, tu verras c'est pratique ;)

 

2) ca marche pas ca tout simplement ?

Code :
  1. #menu2:hover
  2. {
  3.    background-image: url("menu_index_survol.gif" );
  4. }
 

EDIT:
ah oui, sur IE je sais pas ce que ca donne, mais il parait que IE7 gere mieux les hover sur autre chose que des tags A [:spamafote]

Message cité 1 fois
Message édité par SICKofitALL le 20-11-2007 à 00:33:17

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 20-11-2007 à 10:37:03    

SICKofitALL a écrit :

1) prends des cours de francais, tu verras c'est pratique ;)


j'en prends j'en prends, mais promi je vais faire des efforts ;)
 

SICKofitALL a écrit :


2) ca marche pas ca tout simplement ?
[code]
#menu2:hover
{
   background-image: url("menu_index_survol.gif" );
}


 
effectivement ce code marche (mais pas sous IE)  
par contre je viens de voir que sous firefox mes images sont déplacées par rapport a IE, :sweat: (enfin juste celles du milieu sont remontées)
 
pour FF je dois mettre

Code :
  1. margin-top: -140px;


alors que pour IE je dois mettre

Code :
  1. margin-top: -1051px;


c'est étrange  :heink:    (normal?? :??: )
 
merci pour ton aide SICKofitALL  :jap:


Message édité par martomy le 20-11-2007 à 10:54:09
Reply

Marsh Posté le 20-11-2007 à 13:08:40    

Pour ton survol, créés deux classes spécifiques (survolées ou pas) et utilise du javascript pour changer la classe à la volée
 
pour le CSS et IE, ben bienvenue dans le monde merveilleux des standards pas respectés par MS :/
Tu as un lien où je pourrais mater à koi ca ressemble ?


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 20-11-2007 à 17:38:54    

oui biensur, voici l'url: http://martomy.free.fr
 
(je n'ai pas encore mis le javascript)

Reply

Marsh Posté le 21-11-2007 à 16:31:21    

j'ai créé deux css différents pour les navigateurs et tout marche très bien. :wahoo:  
 
tu aurais un exemple pour le changement de classe à la volée?  
j'ai trouvé ni sur google ni dans la barre "recherche" la solution a ce problème  :s  

Reply

Marsh Posté le 21-11-2007 à 17:15:41    

ah damned j'avais zappé ce topic dsl :D

 

donc grossomodo tu peux faire comme ca :

Code :
  1. <style>
  2. .maClasse {
  3.   background-image: url(ton_image.jpg);
  4. }
  5. .maClasseHover {
  6.   background-image: url(ton_imageHover.jpg);
  7. }
  8. </style>
  9. ...
  10. ...
  11. <script>
  12. var pseudoHover = function (el, state)
  13. {
  14.   if (state) // state == true -> hover
  15.     el.className = "maClasseHover"
  16.   else
  17.     el.className = "maClasse"
  18.   return true;
  19. }
  20. </script>
  21. ...
  22. ...
  23. <body>
  24.   <div id="menu2" onmouseover="pseudoHover (this, true)" onmouseout="pseudoHover (this, false)">...</div>
  25. </body>
  26. ...
 

voilà en gros c un truc comme ca :)

 

N'oublies pas que pour précharger tes images dans le cache et éviter que lors du Hover de tes elements n'apparaisse un vide (car l'image est en chargement), tu peux vite fait mettre en place un script du style :

Code :
  1. <script>
  2.   var mesImages = ["mon_image1.jpg", "mon_image2.jpg", "mon_image3.jpg", "mon_image4Hover.jpg"]; // les images à précharger
  3.   for (var i = 0; i < mesImages.length; i++)
  4.   {
  5.     var pic = new Image ();
  6.     pic.src = mesImages[i]; // on crée un objet Image, on lui donne une source vers une image à afficher, et donc le browser l'a met en cache :)
  7.   }
  8. </script>
 

bonne chance :)


Message édité par SICKofitALL le 21-11-2007 à 17:16:04

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 21-11-2007 à 18:35:41    

merci pour tout ça, :jap:  j'ai néanmoin quelques questions :p  
 
-les balises <style> et <script> se mettent bien dans le head?
et faut-il laisser le background-image dans le css en plus du JV ?
 
(je demande parce que je n'ai pas réussi a le faire marcher pour l'instant :sweat: )

Reply

Marsh Posté le 21-11-2007 à 19:57:54    

oui les balises sytle et script sont dans le head, ici j'ai schématisé :jap:
 
le background-image oui tu les mets dans le CSS, et le tu te serts du JS pour précharger les images, mais comme dit c en option en fait :)
 
Et à propos ne confond pas le Java (JV ?) et le JavaScript ;)
 
a++


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 21-11-2007 à 21:31:51    

Citation :

j'ai créé deux css différents pour les navigateurs et tout marche très bien. :wahoo:  
 
tu aurais un exemple pour le changement de classe à la volée?  
j'ai trouvé ni sur google ni dans la barre "recherche" la solution a ce problème  :s


 
Tu peux l'intergrer dans un javascript sinon
 
if(!window.Event){
document.onmouseover=function(){
    var x=window.event.srcElement;if(x.tagName=="INPUT" )x.className="hover_IE"}
document.onmouseout=function(){
    var x=window.event.srcElement;if(x.tagName=="INPUT" )x.className="";}
}


---------------
Immobilier entre particulier: www.lvep.fr
Reply

Sujets relatifs:

Leave a Replay

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