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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  rollover css problème

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

rollover css problème

n°1645530
martomy
Posté le 19-11-2007 à 23:27:21  profilanswer
 

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:

mood
Publicité
Posté le 19-11-2007 à 23:27:21  profilanswer
 

n°1645543
SICKofitAL​L
Razoreater
Posté le 20-11-2007 à 00:32:21  profilanswer
 

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

---------------
"And at the end it is only YOU, ME AND THE VIOLENCE !"
n°1645651
martomy
Posté le 20-11-2007 à 10:37:03  profilanswer
 

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
n°1645762
SICKofitAL​L
Razoreater
Posté le 20-11-2007 à 13:08:40  profilanswer
 

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 ?


---------------
"And at the end it is only YOU, ME AND THE VIOLENCE !"
n°1645999
martomy
Posté le 20-11-2007 à 17:38:54  profilanswer
 

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

n°1646660
martomy
Posté le 21-11-2007 à 16:31:21  profilanswer
 

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  

n°1646700
SICKofitAL​L
Razoreater
Posté le 21-11-2007 à 17:15:41  profilanswer
 

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

---------------
"And at the end it is only YOU, ME AND THE VIOLENCE !"
n°1646738
martomy
Posté le 21-11-2007 à 18:35:41  profilanswer
 

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

n°1646771
SICKofitAL​L
Razoreater
Posté le 21-11-2007 à 19:57:54  profilanswer
 

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++


---------------
"And at the end it is only YOU, ME AND THE VIOLENCE !"
n°1646808
LVEP_ADMIN
Posté le 21-11-2007 à 21:31:51  profilanswer
 

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

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

  rollover css problème

 

Sujets relatifs
probleme avec un exoproblème usort() avec un tableau de 1000 - 2000 lignes
probléme de compilation avec code::blocksProblème avec héritage et méthode virtuelle
Probleme boucle (debutant) Urgenntttttttprobleme table de hachage dans requete find
Probleme de rollover sous Netscape et Operaproblème rollover avec IE
Problème de chargement d'images sur Rollover avec IERollover en CSS, probleme sous IE [ impossible, merci IE ]
Plus de sujets relatifs à : rollover css problème


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