11548 sujets

JavaScript, DOM et API Web HTML5

Problème Hover du background

Bonjour,

J'ai un souçi avec mon background-image.

Explication :
Je souhaiterai changer l'image de fond quand je passe ma souris sur une certaine zone de l'écran.

Ci-dessous le code CSS :

body.intro{
  background: url("lampOFF2.jpg") no-repeat black;
}

body.intro:hover{
  background: url("lampON2.jpg") no-repeat black;
}

body.intro a{
  float:right;
  margin-top:475px;
  margin-right:350px;
  cursor:pointer;
  padding:35px 175px;
}


Et ci-dessous le code HTML :

<html>
<head>
<link type="text/css" rel="stylesheet" href="styles.css" />
</head>

<body class="intro">

<img style="display:none;" src="lampOFF2.jpg" />
<img style="display:none;" src="lampON2.jpg" />

<a href="#"></a>


</body>
</html>


ça fonctionne sous Firefox mais c'est tout ^^'

J'ai conscience que mon code CSS ne respect pas les principes de base, d'où les problèmes de fonctionnement vous me direz. Smiley biggol

Voici le lien (a ouvrir avec firefox) :http://folio.net63.net/

Merci de votre attention.

PS : J'aimerai éviter le JavaScript. Sauf si c'est la seul solution....
Modifié par molp (12 May 2011 - 20:19)
çà me fait bizarre que tu mettes une class sur le body...
et du JS simplifierai beaucoup ton problème, tu fais un span/div/a href auquel tu attribue sur l’événement onclick ou autre et cela envoi vers change_fond() qui est une fonction JS qui attribue une nouvelle class Smiley smile

j'ai créé un sujet qui pourrait t'aider : http://forum.alsacreations.com/topic-4-55495-1-resolu-Changer-le-style-dun-lien-selon-un-evenement-onClick.html

tu peux adapter les styles à un changement de background-image et je pense que le tour est joué ;p
Modifié par mini-truc (13 May 2011 - 10:17)
Bonjour,

J'ai donc utilisé le JS, pas trop le choix apparemment donc voici mon code :

<a href="acceuil.html" class="intro"
 onmouseover="document.body.style.backgroundImage='url(lampON2.jpg)'"
onmouseout="document.body.style.backgroundImage='url(lampOFF2.jpg)'">
</a>


Avec l'initialisation du background-image en CSS dans la même page :

  body{
    background-image: url("lampOFF2.jpg");
  }


Et celui de la feuille de style qui ne conserve que :

 a.intro{
  float:right;
  margin-top:475px;
  margin-right:350px;
  cursor:pointer;
  padding:35px 175px;
}


Quoi qu'il en soit ça fonctionne très bien sous IE et FF.

Merci d'avoir prêter attention à mon problème Smiley biggrin !
Modifié par molp (13 May 2011 - 14:38)
Sujet clos
Aller à