li:hover sur IE

li:hover sur IE - HTML/CSS - Programmation

Marsh Posté le 16-02-2005 à 13:32:15    

Code :
  1. .colorlist
  2. {
  3. padding: 0px;
  4. margin:auto;
  5. }
  7. .colorlist li
  8. {
  9. padding: 0px;
  10. margin: 2px;
  11. width:10px;
  12. height:10px;
  13. border: 1px solid #CCCCCC;
  14. float:left;
  15. list-style: none outside;
  16. position : relative;
  17. }
  19. .colorlist li:hover
  20. {
  21. width:10px;
  22. height:10px;
  23. border: 1px solid #FF0000;
  24. list-style: none outside;
  25. position : relative;
  26. cursor:pointer;
  27. }


 
la partie .colorlist li:hover n'a pas l'air de fonctionner sur IE ? :(
en fait j'ai encore epuré ma fonction DOM en Javascript en éliminant le <a href="#"....onclick="... return false;"> sur l'image... j'ai laissé l'image quand même pour pas que mon carré de couleur ne soit plus un carré de 10x10 (sur IE) mais sur IE :
 
1° la fonction onclick ne fonctionne pas...
2° le .colorlist li:hover...
 
d'habitude c firefox et les autres qui sont succeptibles... maintenant c l'inverse ! :lol:
 
http://clonecopy.net/php/ezdocs/
 
 
PS :
 
revoici le Javascript :
 

Code :
  1. function AffichePalette(nom,div,champ)
  2. {
  3. var hex_array=["00","33","66","99","CC","FF"];
  4. var d="Choisissez votre couleur \n";
  5. var doc=document.getElementById(div);
  6. element0=document.createTextNode(d);
  7. doc.appendChild(element0);
  9. for(red in hex_array)
  10. {
  11. element1=document.createElement("div" );
  12. doc.appendChild(element1);
  13. element1.setAttribute("id", "coulrange"+ hex_array[red]);
  14. element1.className= "coulrange";
  16. element2=document.createElement("ul" );
  17. element1.appendChild(element2);
  18. element2.className = "colorlist";
  21. for(green in hex_array)
  22. {
  23.  for(blue in hex_array)
  24.  {
  25.  element3=document.createElement("li" );
  26.  element2.appendChild(element3);
  27.  element3.style.backgroundColor="#"+ hex_array[red] + hex_array[green] + hex_array[blue];
  28.  element4=document.createElement("img" );
  29.  element3.appendChild(element4);
  30.  element4.setAttribute("src", "dummy.gif" );
  31.  element4.setAttribute("alt",  hex_array[red] + hex_array[green] + hex_array[blue]);
  32.  element4.setAttribute("width", "10" );
  33.  element4.setAttribute("height", "10" );
  34.  element4.setAttribute("onclick", "ActionColor('"+ hex_array[red] + hex_array[green] + hex_array[blue] +"','"+nom+"','"+div+"','"+champ+"');" );
  35.  }
  37. }
  39. }
  40. }


Message édité par freed102 le 16-02-2005 à 13:39:25
Reply

Marsh Posté le 16-02-2005 à 13:32:15   

Reply

Marsh Posté le 16-02-2005 à 13:36:39    

RECHERCHE
 
GOOGLE
 
ALTAVISTA
 
ALSACREATION
 
 
MSDN
 
 
etc....
 
Tu aura pu voir que la pseudo-classe hover ne fonctionne que sur les <a> avec IE...

Reply

Marsh Posté le 16-02-2005 à 13:37:45    

FlorentG a écrit :

RECHERCHE
 
GOOGLE
 
ALTAVISTA
 
ALSACREATION
 
 
MSDN
 
 
etc....
 
Tu aura pu voir que la pseudo-classe hover ne fonctionne que sur les <a> avec IE...


 
arf.... c dommage !:(

Reply

Marsh Posté le 16-02-2005 à 13:53:49    

j'ai remis un a href et ça :
 
.colorlist li a:hover
{
width:12px;
height:12px;
border: 1px solid #FF0000;
list-style: none outside;
position : relative;
cursor: pointer;
}
 
ça marche sur les deux.. Mais ça affiche une barre verticale sur firefox.. c bizarre... enfin bref je vais me debrouiller avec ça
 
par contre pour le prob du onclick qui marche pas (sur IE ! car sur firefox ça marche nickel)... je sais pas pourquoi ! pourtant il ne provoque plus d'erreur JS ! mais l'action ne se fait pas


Message édité par freed102 le 16-02-2005 à 13:59:36
Reply

Marsh Posté le 16-02-2005 à 14:07:14    

salut freed102,
 
Ne fixe pas de taille pour ton A,
met plutôt un "display:block"
 
par défault la balise a est inline, c'est normal,
pour un menu un a est un block dans un block li...

Reply

Marsh Posté le 16-02-2005 à 14:10:31    

salut rompi
 
merci pour ton conseil
 
j'ai mis donc ça :
 
.colorlist li a:hover
{
border: 1px solid #FF0000;
cursor: pointer;
}
 
mais j'ai toujours le même prob sur firefox

Reply

Marsh Posté le 16-02-2005 à 15:05:18    

J'ai pas tout compris a ton problème de barre vertical,
mais tu peux t'inspire de ce tutoriel :
http://www.alsacreations.com/articles/menu/
 
Autre conseil, allège tes CSS, c'est pas la peine de répéter  
dans un :hover ce que tu as mis dans la règle principale...
( désolé je connais plus le vocabulaire CSS)
 
pour ton onclick, je ne sais pas et j'ai pas le temps de regarder plus...

Reply

Marsh Posté le 16-02-2005 à 16:27:20    

pour mon prob de onclick...
 
ce code là vous choque-ti-il ?

Code :
  1. [...]
  2. <li style="background-color: rgb(0, 0, 51);">
  3. <a onclick="ActionColor('000033','couleuradresse1','couladresse1','couleuradresse');" href="#">
  4. <img alt="000033" src="dummy.gif" height="10" width="10">
  5. </a>
  6. </li>
  7. <li style="background-color: rgb(0, 0, 102);">
  8. <a onclick="ActionColor('000066','couleuradresse1','couladresse1','couleuradresse');" href="#">
  9. <img alt="000066" src="dummy.gif" height="10" width="10">
  10. </a>
  11. </li>
  12. <li style="background-color: rgb(0, 0, 153);">
  13. <a onclick="ActionColor('000099','couleuradresse1','couladresse1','couleuradresse');" href="#">
  14. <img alt="000099" src="dummy.gif" height="10" width="10">
  15. </a>
  16. </li>
  17. [...]


 
... j'ai mis un alert('toto') au debut de ma fonction ActionColor()... mais rien n'apparait !:(


Message édité par freed102 le 16-02-2005 à 16:27:41
Reply

Marsh Posté le 16-02-2005 à 16:42:45    

pour info :
 
[...]
element4=document.createElement("a" );
element3.appendChild(element4);
element4.setAttribute("href", "#" );
element4.setAttribute("onclick", "alert('toto')" );
 
ça marche pas non plus !  :heink:  :ouch:  :sarcastic:

Reply

Marsh Posté le 16-02-2005 à 16:45:13    

element4=document.createElement("a" );
element3.appendChild(element4);
element4.setAttribute("href", "javascript:ActionColor('"+ hex_array[red] + hex_array[green] + hex_array[blue] +"','"+nom+"','"+div+"','"+champ+"');return false;" );
 
... comme ça ça marche pas non plus....  :sleep:

Reply

Marsh Posté le 16-02-2005 à 16:45:13   

Reply

Marsh Posté le 16-02-2005 à 16:50:22    

element4=document.createElement("a" );
element3.appendChild(element4);
element4.setAttribute("href", "#" );
element4.setAttribute("onclick", "java script:return(ActionColor('"+ hex_array[red] + hex_array[green] + hex_array[blue] +"','"+nom+"','"+div+"','"+champ+"');return false;)" );
 
j'ai vu ça sur Google... mais ça marche pas ! :lol:

Reply

Marsh Posté le 16-02-2005 à 16:58:07    

je viens de lire un truc peut etre interessant :
 
http://lists.evolt.org/archive/Wee [...] 59771.html
 
 

Citation :

The DOM attribute handling really shouldn't be used for event handling. The DOM has another system for dealing with events. In your case, unless you're serving as XML, you should use the old DOM0 way of handling it:
 
    [object HTMLElement].onevent=functionreference;
 
In this specific case,  
    document.getElementById('thelink').onclick=foo;
 
In cases where you want to send it an argument,
    document.getElementById('thelink').onclick=function(e){
        e=e||window.event;
        /*code to run when the event triggers*/
    };


Message édité par freed102 le 16-02-2005 à 16:59:48
Reply

Marsh Posté le 16-02-2005 à 17:27:39    

donc resultat... le code qui est le bon a l'air d'etre celui là :
 

Code :
  1. element4=document.createElement("a" );
  2. element3.appendChild(element4);
  3. element4.setAttribute("href", "#" );
  4. element4.setAttribute("id", hex_array[red] + hex_array[green] + hex_array[blue]);
  5. document.getElementById(hex_array[red] + hex_array[green] + hex_array[blue]).onclick=function(e){
  6. e=e || window.event;
  7. ActionColor('"+ hex_array[red] + hex_array[green] + hex_array[blue] +"','"+nom+"','"+div+"','"+champ+"');
  8. };


 
mais ça m'a chamboullé un truc encore avec les document.getElementById(input).value ... qui ne fonctionnent plus de nouveau ! (mais au moins j'arrive à executer la fonction ! c deja ça !)

Reply

Marsh Posté le 16-02-2005 à 18:09:09    

:pt1cable: :lol:
 

Reply

Marsh Posté le 17-02-2005 à 00:52:02    

Je te conseille la lecture de cet article sur pompage.net :
http://www.pompage.net/pompe/separation/
 
Il traite de la separation entre la structure du document et son "comportement".

Reply

Marsh Posté le 17-02-2005 à 11:22:34    

Cerel a écrit :

Je te conseille la lecture de cet article sur pompage.net :
http://www.pompage.net/pompe/separation/
 
Il traite de la separation entre la structure du document et son "comportement".


 
Merci !
si je comprends bien... l'ideal serait de tester chaque élément de ma page avec une boucle (par exemple) ? ça n'allourdit pas le truc ça?


Message édité par freed102 le 17-02-2005 à 11:22:43
Reply

Marsh Posté le 17-02-2005 à 15:00:38    


pfew !je lutte là ! j'ai trois parametres à faire passer comme ça... je sais pas par ou commencer
 

Code :
  1. function extract_hex()
  2. {
  3. var a= document.getElementsByTagName('a);
  5. for (var i = 0; i < a.length; i++)
  6. {
  7.  var hex = a[i].getAttribute('id');
  8.   if (a != '')
  9.   {
  10.   a[i].onclick=function(){ ActionColor(hex,nom,div,input);return false}
  11.   }
  12. }
  13. }


 
... là comme ça je recupere bien la couleur (à priori)... Mais je recupere pas le div à masquer, ni le champ dans lequel je dois passer la valeur de la couleur... grrr !

Reply

Marsh Posté le 18-02-2005 à 10:01:26    

Oula, fait une recherche, on en a parlé y'a pas longtemps ;)

Reply

Sujets relatifs:

Leave a Replay

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