Page 1 sur 1
DIV qui change de couleur
Posté : 06 janv. 2014, 21:21
par pereablanco
Bonjour,
Je suis débutant, j'ai conçu moi même mon site. Mais je n'arrive pas a créer un effet.
Je souhaiterai que lorsque la sourie passe sur une div, elle change de couleur (l'arrière plan par exemple,). J'avais mis la main sur une ligne de code mais cette dernière fait l'effet que sur le lien hypertexte.
Merci par avance de votre aide
Meilleurs voeux
Re: DIV qui change de couleur
Posté : 06 janv. 2014, 21:39
par benv8nam
Tu peux utiliser du javascript onmouseover, onmouseout
Re: DIV qui change de couleur
Posté : 06 janv. 2014, 22:22
par pereablanco
Tu peux utiliser du javascript onmouseover, onmouseout
j'ai oublié de préciser mon niveau de Poulpe en la matière lol. Sur Dreamweaver j'arrive à le faire avec des images mais pas avec une div et une couleur #0000000
Re: DIV qui change de couleur
Posté : 06 janv. 2014, 22:25
par benv8nam
Regarde à cette page il y a un exemple de ce que tu veux faire.
http://www.startyourdev.com/html/evenem ... nmouseover
Re: DIV qui change de couleur
Posté : 06 janv. 2014, 22:26
par pereablanco
Tu peux utiliser du javascript onmouseover, onmouseout
j'ai oublié de préciser mon niveau de Poulpe en la matière lol. Sur Dreamweaver j'arrive à le faire avec des images mais pas avec une div et une couleur #0000000
Par exemple si je veux 3 div les une après les autres :
Re: DIV qui change de couleur
Posté : 06 janv. 2014, 22:28
par pereablanco
Je n'avais pas vu merci pour le lien.
Avec ce javascrit pensez-vous qu'il serait compatible avec la plupart des navigateurs (safari, IE...) ?
Re: DIV qui change de couleur
Posté : 06 janv. 2014, 22:31
par benv8nam
C'est compatible sur tous les navigateurs récent (après IE7).
Re: DIV qui change de couleur
Posté : 06 janv. 2014, 22:39
par pereablanco
Merci pour votre aide
juste une dernière question,
[javascript]<div style="width:300px; height:600px; border:solid 1px black; text-align:center;"
onmouseover="this.innerHTML='Dedans'; this.style.backgroundColor='#87CEFA';"
onmouseout="this.innerHTML='Dehors'; this.style.backgroundColor='lightgrey';">
</div>[/javascript]
Sur cet exemple de javascript, comment puis-je en aligner trois (div) l'une apres l'autre et en les espacent de 10 pixels environ. Sans retourner à la ligne (dans la limite de ma lrgeur de page, disons 900 pixels)
Une div, un espace,
une div, un espace et
une div
Merci Benv8nam
Re: DIV qui change de couleur
Posté : 07 janv. 2014, 21:06
par niuxe
onmouseover pour un background
. C'est du n'importe quoi !
En CSS !
div{background : blue;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;}
div:hover{background : red;}
Re: DIV qui change de couleur
Posté : 08 janv. 2014, 10:20
par nico63800
Bonjour,
voilà un exemple que j'ai mis en ligne pour test:
http://nico63800.byethost10.com/div.php
le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>titre de la page</title>
<style type="text/css">
.global{
width: 900px;
min-height: 100px;
overflow: hidden;
background-color: yellow;
}
.part{
float:left;
margin-left: 10px;
width: 280px;
height: 150px;
background-color: grey;
transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;
}
.part:hover{background : red;}
</style>
</head>
<body>
<div class="global">
<div class="part">ma div 1 de 280 pixels</div>
<div class="part">ma div 2 de 280 pixels</div>
<div class="part">ma div 3 de 280 pixels</div>
</div>
</body>
</html>
l'espacement entre les div est assuré avec le margin-left à 10px
Re: DIV qui change de couleur
Posté : 10 janv. 2014, 19:49
par pereablanco
Merci pour ton aide (encore une fois), je vais tester ça. Je vous fais le retour au plus vite