Sujet Précédent Sujet Suivant

Changer le fond d'un bloc

tussjean34 Messages postés 8 Date d'inscription vendredi 15 octobre 2004 Statut Membre Dernière intervention 17 avril 2007 - 15 avril 2007 à 03:37
tussjean34 Messages postés 8 Date d'inscription vendredi 15 octobre 2004 Statut Membre Dernière intervention 17 avril 2007 - 17 avril 2007 à 16:21
Bonjour,
j'aimerais savoir s'il est possible de changer la couleur du fond lorsque la souris passe sur un bloc
ex :

<li>je suis un bloc</li>
<li>je suis un 2eme bloc ^^</li>
<li>et moi , un 3ème !</li>
<li>bon , vous allez arrêter tous les 3 !</li>

alors voilà mon problème,imaginons que chaque bloc a un fond nommé fond.png , j'aimerais que lorsque la souris passe sur un bloc , le fond devient fond2.png et lorsque la souris n'est plus dessus alors il reprend son fond normal ,c-à-d fond.png.
Est -ce possible ? Et encore une petite chose , j'aimerais que ce soit le fond d'un bloc( <li> ) qui change et pas toute la liste ( ) !
Voilà , je vous remercie d'avance de votre aide !

ps : et tout ceci par css pour faciliter la chose ,ex : class .normal ( donc normal )
                                                                            class .dessus ( donc le fond change)
                                                                            class .parti (lorsque la souris part ) 
et encore une fois ,
MERCI de votra attention

8 réponses

Réponse 1 / 8
stfou Messages postés 450 Date d'inscription samedi 16 avril 2005 Statut Membre Dernière intervention 18 avril 2007 3
15 avril 2007 à 10:57
Bonjour,
En CSS:




li{
background:url("fichier1.jpg");
}
li:hover
{
background:url("fichier2.jpg");
}




Cependant, le hover n'est peut-être pas compatible avec tous les navigateurs.
En javascript :

<li name="rollover"></li>
<li name="rollover"></li>
<!-- Tu nomme toutes tes balises <li> "rollover"-->


Et tu rajoute ce script :


<script>
var bloc=document.getElementsByName("rollover");
for(i=0;i







<hr />



<hr />
<sup>
STFOU
</sup>
0
Réponse 2 / 8
FREMYCOMPANY Messages postés 276 Date d'inscription jeudi 12 janvier 2006 Statut Membre Dernière intervention 22 décembre 2008
15 avril 2007 à 14:50
getElementsByName ==> Sous IE, seul les objets ayant le droit de recevoir un attribut name sont compatbilisés (INPUT, TEXTAREA, BUTTON et c'est tout, je pense)...

Pourquoi notre PC fait-il toujours ce qu'on lui demande ... et pas ce qu'on veut ???
0
Réponse 3 / 8
stfou Messages postés 450 Date d'inscription samedi 16 avril 2005 Statut Membre Dernière intervention 18 avril 2007 3
15 avril 2007 à 15:58
Euh, tout les objets ont le droit de recevoir un attribut name, et moi j'utilise getElementsByName sur des images, des divs etc.. et ça marche très bien.

<hr /><hr />STFOU
0
Réponse 4 / 8
tussjean34 Messages postés 8 Date d'inscription vendredi 15 octobre 2004 Statut Membre Dernière intervention 17 avril 2007
16 avril 2007 à 18:48
Merci Stfou,
mais comme l'a fait remarqué Fremycompany,
<li> ne peut pas prendre l'attribut name...
ni
ni
!

J'utilise Dreamweaver et il m'a fait remarqué que je ne pouvais pas utiliser l'attribut name...
Une autre solution peut-être ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
tussjean34 Messages postés 8 Date d'inscription vendredi 15 octobre 2004 Statut Membre Dernière intervention 17 avril 2007
16 avril 2007 à 18:58
PS : je peux toutefois utiliser onMouseOver , OnMouseOut sur n'importe balise...
est - ce que vous n'auriez pas une petite idée car je pense que l'on peut faire <li OnMouseOver:"javascript{je ne sais pas}">blabla</li>
J'aimerais une petite fonction en javascript pour faire appel à une class nommé '.liover' lorsque la souris est dessus.
Est - ce que ceci est correct         <li OnMouseOver="javascript:{set.class='liover'}">blabla</li>
Je ne connais rien en javascript , j'ai donné l'exemple en rapport avec les connaissances que j'ai en php...
0
Réponse 6 / 8
stfou Messages postés 450 Date d'inscription samedi 16 avril 2005 Statut Membre Dernière intervention 18 avril 2007 3
16 avril 2007 à 19:23
Dans ce cas simplement avec style plutot que de créer une class.

<hr /><hr />STFOU
0
Réponse 7 / 8
stfou Messages postés 450 Date d'inscription samedi 16 avril 2005 Statut Membre Dernière intervention 18 avril 2007 3
17 avril 2007 à 09:55
Oui, c'est correct en javascript, mais pourquoi faire compliqué quand on peut faire simple, prend mon exemple css, c'est plus simple. mais si tu veux je te fais quand même un code javascript :

<script>
function bg1(object)
{
object.style.background="url(fond1.jpg)";
}

function bg2(object)
{
object.style.background="url(fond2.jpg)";
}
</script>
<li onmouseover="bg2(this)" onmouseout="bg1(this)">

Par exemple

<hr /><hr />STFOU
0
Réponse 8 / 8
tussjean34 Messages postés 8 Date d'inscription vendredi 15 octobre 2004 Statut Membre Dernière intervention 17 avril 2007
17 avril 2007 à 16:21
Merci stfou ,
ça a marché !
0

Discussions similaires

mettre en commentaire tout un bloc
Daydayer -
Daydayer -

3 réponses
passer en commentaire plusieurs lignes de code VBA rapidement
zncpo -
zncpo -

2 réponses
Commentaire
hamardfred -
ScSami -

4 réponses
bloc note simple php edité et enregistrer dans un txt
Zelda78 -
Zelda78 -

4 réponses
Question idiote : mise en commentaire de plusieures lignes
cs_oluha -
cs_oluha -

2 réponses
Rejoignez-nous