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
la communauté d'entraide francophone dédiée au PHP
DIV qui change de couleur
Eléphanteau du PHP |
33 Messages
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 #0000000Tu peux utiliser du javascript onmouseover, onmouseout
Regarde à cette page il y a un exemple de ce que tu veux faire.
http://www.startyourdev.com/html/evenem ... nmouseover
http://www.startyourdev.com/html/evenem ... nmouseover
Eléphanteau du PHP |
33 Messages
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 #0000000Tu peux utiliser du javascript onmouseover, onmouseout
Par exemple si je veux 3 div les une après les autres :
Eléphanteau du PHP |
33 Messages
Regarde à cette page il y a un exemple de ce que tu veux faire.
http://www.startyourdev.com/html/evenem ... nmouseover
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...) ?
Eléphanteau du PHP |
33 Messages
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
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
onmouseover pour un background 
. C'est du n'importe quoi !
En CSS !
. 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;}
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
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
Eléphanteau du PHP |
33 Messages
Merci pour ton aide (encore une fois), je vais tester ça. Je vous fais le retour au plus vite