Problème de chargement d'images sur Rollover avec IE

Problème de chargement d'images sur Rollover avec IE - HTML/CSS - Programmation

Marsh Posté le 02-03-2005 à 21:39:47    

Je suis en train de refaire un site et j'ai un menu dont l'image de fond change quand on passe la souris dessus.
Ca marche niquel avec Firefox, mais chez certains avec IE ça déconne (sur mon pc avec IE6 ça déconne, sur mon portable toujours IE6, ça marche....) : au moment d'afficher l'image de survol IE va la chercher sur le serveur ce qui provoque un petit temps de flotement pendant lequel il n'y a aucune image d'affichée. Et ce même s'il a déjà chargé l'image et donc placée dans le cache.
J'ai essayé de mettre un JS qui précharge les images, mais ça change rien :/
 
Afin que vous voyez de quoi je veux parler : http://www.pagededemarrage.net/v2
 
Si quelqu'un a une solutuion je suis preneur parce que je peut quand même pas laisser ça comme ça...

Reply

Marsh Posté le 02-03-2005 à 21:39:47   

Reply

Marsh Posté le 02-03-2005 à 23:39:32    

hmm si tu parles de la barre orange qui apparait au rollover, ca marche niquel avec IE pour moi. Es-tu sur que ce n'est pas un problème avec ton navigateur sur ton pc?

Reply

Marsh Posté le 02-03-2005 à 23:40:56    

C'est quoi ce rollover en javascript sur des cases de tableau [:mlc]
 
et ton CSS, rien qu'en sa forme actuelle, pourrait être méchamment amélioré, par exemple:


    margin-bottom: 0;  
    margin-left: 0;  
    margin-right: 0;  
    margin-top: 0;
    background-image:url("fond.jpg" );
    background-repeat:repeat-x;  
    background-color:#D1F4FF;


peut être remplacé par


    margin: 0;
    background: #D1F4FF url(fond.jpg) repeat-x;


Message édité par masklinn le 02-03-2005 à 23:43:24

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 02-03-2005 à 23:47:05    

Si l'image survolée n'a que la partie supérieure qui deviens orange, on peut le faire sans images en changant la couleur de la bordure supérieure ;)

Reply

Marsh Posté le 02-03-2005 à 23:48:59    

masklinn a écrit :

C'est quoi ce rollover en javascript sur des cases de tableau [:mlc]
 
et ton CSS, rien qu'en sa forme actuelle, pourrait être méchamment amélioré, par exemple:


    margin-bottom: 0;  
    margin-left: 0;  
    margin-right: 0;  
    margin-top: 0;
    background-image:url("fond.jpg" );
    background-repeat:repeat-x;  
    background-color:#D1F4FF;


peut être remplacé par


    margin: 0;
    background: #D1F4FF url(fond.jpg) repeat-x;



Le rollover est en javascript parce qu'en CSS ca marche pas avec IE
 
Et le css pour le moment je m'en bat un peu les couilles, ce genre de trucs je le nettoirai une fois que tout le reste sera niquel [:spamafote]

Reply

Marsh Posté le 02-03-2005 à 23:50:45    

Comment ça en CSS ça marche pas sous IE :??:

Reply

Marsh Posté le 02-03-2005 à 23:51:41    

FlorentG a écrit :

Si l'image survolée n'a que la partie supérieure qui deviens orange, on peut le faire sans images en changant la couleur de la bordure supérieure ;)


Pas con, j'y avais même pas pensé :D
A la base ca changais aussi la couleur du dégradé pour ça que j'avais mis les images.
 
Merci  :jap:  
 
PS : enfin, bon, si quelqu'un sait comment corriger ce problème qu'il n'hésite pas :D

Reply

Marsh Posté le 02-03-2005 à 23:51:50    

il me semble (si je me rappelle bien le tuto de Masklinn), que le rollover ne marche que sur les balise a avec IE... mais en l'occurence ca ne pose pas de problème dans ton cas, puisque c'est effectivement un menu de lien ... aucun problème à appliquer le rollover CSS dans ton cas donc (enfin suis encore noob avec CSS, j'espère pas dire de bêtises)
 
je te conseille donc ce topic : http://forum.hardware.fr/hardwaref [...] 4743-1.htm


Message édité par Djebel1 le 02-03-2005 à 23:52:52
Reply

Marsh Posté le 02-03-2005 à 23:52:02    

harrysauce a écrit :

Le rollover est en javascript parce qu'en CSS ca marche pas avec IE


 [:petrus75]  
 
haha

Djebel1 a écrit :

il me semble (si je me rappelle bien le tuto de Masklinn), que le rollover ne marche que sur les balise a avec IE...


Exactement :)  
 
MSIE ne gère la pseudo-classe "hover" que sur les ancres (balises "a" )
Ce qui n'est pas spécialement gênant


Message édité par masklinn le 02-03-2005 à 23:56:56

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 02-03-2005 à 23:52:55    

FlorentG a écrit :

Comment ça en CSS ça marche pas sous IE :??:


Pour faire un rollover en CSS faut utiliser le "hover" et sous IE ça marche que sur les liens (c'est toi qui me l'avait dit je crois en plus :D)

Reply

Marsh Posté le 02-03-2005 à 23:52:55   

Reply

Marsh Posté le 02-03-2005 à 23:53:52    

Djebel1 a écrit :

il me semble (si je me rappelle bien le tuto de Masklinn), que le rollover ne marche que sur les balise a avec IE... mais en l'occurence ca ne pose pas de problème dans ton cas, puisque c'est effectivement un menu de lien ... aucun problème à appliquer le rollover CSS dans ton cas donc (enfin suis encore noob avec CSS, j'espère pas dire de bêtises)
 
je te conseille donc ce topic : http://forum.hardware.fr/hardwaref [...] 4743-1.htm


Si ça pose un problème parce que même si ce sont des liens le rollover est sur un tableau, donc des balises <td>

Reply

Marsh Posté le 02-03-2005 à 23:54:08    

bah oui, et ton menu il est fait de quoi? d'artichauts peut-être? :p
ha oui bah oublie les tableaux aussi ;) tu n'en as absolument pas besoin pour réaliser ce que tu veux faire
 
d'ailleurs sur alsacreation y a une excellente explication de création de menu, par contre je peux pas te retrouver l'adresse j'ai un pti bug la, mais ca doit se trouver facilement


Message édité par Djebel1 le 02-03-2005 à 23:56:49
Reply

Marsh Posté le 02-03-2005 à 23:56:52    

harrysauce a écrit :

Pour faire un rollover en CSS faut utiliser le "hover" et sous IE ça marche que sur les liens (c'est toi qui me l'avait dit je crois en plus :D)


Comme te l'ont fait remarqué les autres, t'as des liens, donc pas de probs  [:itm]

Reply

Marsh Posté le 02-03-2005 à 23:58:02    

harrysauce a écrit :

Si ça pose un problème parce que même si ce sont des liens le rollover est sur un tableau, donc des balises <td>


1- tu dégages le tableau (voir Listamatic que j'ai linké plus haut) et tu remplaces par une liste
2- tu mets le hover sur les liens (voir listamatic que j'ai linké plus haut)
3- ???
4- PROFIT !


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 03-03-2005 à 00:49:39    

Ca y'est, j'ai mis le rollover sur les liens, ben ça change rien au problème, c'est EXACTEMENT comme avant [:spamafote]
Reste le solution de FlorentG (ne changer que la couleur de la bordure supérieur) mais ça me fait un peu chier parce que si plus tard je veux pouvoir changer le dégradé par le rollover je pourrai plus :/


Message édité par harrysauce le 03-03-2005 à 00:50:16
Reply

Marsh Posté le 03-03-2005 à 09:22:52    

Bah si, tu met ET la bordure ET l'image de fond dans le :hover

Reply

Marsh Posté le 03-03-2005 à 13:01:59    

Ben au moment où l'utilisateur va passer la souris sur le lien  IE va quand même aller chercher l'imache de fond sur le serveur [:spamafote]
Et donc ça changera pas grand chose :/

Reply

Marsh Posté le 03-03-2005 à 13:47:47    

Reply

Marsh Posté le 24-08-2008 à 00:15:37    

J'ai eu le même souci en utilisant qqch du genre :
var img = new Image();
img.src = "l'url de mon image";
img.onload = function()
{
    affichage de mon image...
}
 
Quand je rafraichis la page sous IE (uniquement) parfois l'image s'affiche, parfois non...  
 
le problème n'apparait plus si je n'attends pas l'evênement onload. :pfff:

Reply

Sujets relatifs:

Leave a Replay

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