rollover css problème

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : rollover css problème

martomy

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 :

#menu2
{
float: left;
width: 220px;
height: 50px;
background-image: url("images/menu_gauche_index.gif" );/*index*/
background-repeat: no-repeat;
margin-bottom: 0px;
margin-left: -220px;
margin-top: 50px ;
}

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:

Publicité

SICKofitALL

misanthrope

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

2) ca marche pas ca tout simplement ?

Code :

#menu2:hover
{
background-image: url("menu_index_survol.gif" );
}

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

martomy

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 :

margin-top: -140px;

alors que pour IE je dois mettre

Code :

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

SICKofitALL

misanthrope

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

martomy

oui biensur, voici l'url: http://martomy.free.fr

(je n'ai pas encore mis le javascript)

martomy

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

SICKofitALL

misanthrope

ah damned j'avais zappé ce topic dsl

donc grossomodo tu peux faire comme ca :

Code :

<style>
.maClasse {
background-image: url(ton_image.jpg);
}
.maClasseHover {
background-image: url(ton_imageHover.jpg);
}
</style>
...
...
<script>
var pseudoHover = function (el, state)
{
if (state) // state == true -> hover
el.className = "maClasseHover"
else
el.className = "maClasse"
return true;
}
</script>
...
...
<body>
<div id="menu2" onmouseover="pseudoHover (this, true)" onmouseout="pseudoHover (this, false)">...</div>
</body>
...

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 :

<script>
var mesImages = ["mon_image1.jpg", "mon_image2.jpg", "mon_image3.jpg", "mon_image4Hover.jpg"]; // les images à précharger
for (var i = 0; i < mesImages.length; i++)
{
var pic = new Image ();
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 :)
}
</script>

bonne chance

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

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

martomy

merci pour tout ça, :jap: j'ai néanmoin quelques questions

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

SICKofitALL

misanthrope

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

LVEP_ADMIN

Citation :

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

FORUM HardWare.fr

Programmation

HTML/CSS

rollover css problème

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

Page générée en 0.053 secondes