¤ Comportement de couleur ¤

Version imprimable

01/01/2006, 02h16
artotal

¤ Comportement de couleur ¤

Bonjour,
Voilà sa fait un moment que je me demande comment ces effets sont conçus !
http://classes.scriptsphp.org/
Quand on passe la souris sur un cadre, celui-ci change de couleur sans avoir de comportement cliquable.
Merci d'avance[/u][/code]
01/01/2006, 12h23
Anduriel

C'est du javascript:

Code:

<td OnMouseOver="this.style.background='red'">

Quelque chose comme ça.
01/01/2006, 12h24
Michaël
salut,
tu peux le faire en js, mais c'est se prendre la tête pour pas grand chose... avec css et le hover, ça suffit ;)
Code:

1 2 3 4 5 6 7 8 <style type="text/css">.zone:hover { background-color: #fff; } .zone { background-color: #000000; }</style> <div class="zone">mon texte</div>
01/01/2006, 13h01
siddh

le :hover n'est géré que sur les liens dans ie ;)
01/01/2006, 14h08
artotal

exact le pseudo element hover, n'est pas utilisez dans ces cas là !
sans ie n'a plus de comportement !
et justement c'est se qui m'interresse de faire cela sans "a"
;-)
01/01/2006, 14h10
Michaël
trop nul ie :lol: faut vraiment équiper tout le monde avec firefox

mais dans ce cas, il ne faut pas oublier de mettre un onmouseout ;)
Code:

1 2  <td onmousover="this.style.background='red'" onmouseout="this.style.background='white'">

Merci pour cette piste :

Code:

1
2
3
4
5
6
7
<div id="introduction" onmousover="this.style.background='red'" onmouseout="this.style.background='white'">
	<h3><span>formations</span></h3> 
	Mes logiciels 	de pr&eacute;dilection :<br />
Photoshop; Illustrator; flash; 3d max.<br />
Mes langages de programmations :<br />
xhtml/css;	php/mysql(notion).<br />
</div>

le css correspondant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
#introduction {
	position:absolute;
	top:45px;
	left:288px;
	word-spacing:2px;
	font-size:105%;
	border-color:#CCC;
	border-style:double;
	padding:0 50px 0 50px;
	height: 148px;
	z-index:2;
}

curieusement sa ne fonctionne pas, c'est la 1ere fois que je me sers de .js !
{ la page en questions:http://creatif-web.be/port_folio/formation.php;}
Merci

Essai ça:

Code:

1
2
3
4
5
6
7
<div id="introduction" onmouseover="this.style.bgcolor='red'" onmouseout="this.style.bgcolor='white'">
	<h3><span>formations</span></h3> 
	Mes logiciels 	de pr&eacute;dilection :<br />
Photoshop; Illustrator; flash; 3d max.<br />
Mes langages de programmations :<br />
xhtml/css;	php/mysql(notion).<br />
</div>

J'ai changé background en bgcolor et onmousover en onmouseover.

01/01/2006, 16h19
siddh
Règle à connaitre pour passer d'une propriété de style css à celle qui correspond en javascript :
- On remplace les - par une majuscule sur le mot suivant
Exemples :
- z-index :arrow: element.style.zIndex
  background-color :arrow: element.style.backgroundColor
01/01/2006, 16h28
GregPeck

Citation:

Envoyé par siddh

On remplace les - par une majuscule sur le mot suivant

Alors ça c'est une super info, je n'avais jamais fait le rapprochement et je galère toujours pour trouver ça.

Merci siddh!
01/01/2006, 16h36
siddh
de rien,
en fait on applique tout simplement les règles syntaxiques de javascript,

Citation:

Envoyé par Mr javascript

Les noms des propriétés et méthodes commencent par des minuscules.
Ensuite, on met une majuscule a chaque début de nouveau mot.

Exemples :
- getElementById
  parseInt
  scrollLeft
  ...
01/01/2006, 16h38
GregPeck

Trop fort !
J'oubli aussi tout le temps pour getElementById....

Par contre un autre que j'oubli et qui ne se résoud pas avec ta méthodes c'est innerHTML, je suis en général tenté de mettre innerHtml...
01/01/2006, 16h40
siddh

oui c est vrai :D

peut etre car c'est un accronyme ? (comme pour responseXML)
01/01/2006, 16h43
artotal

il manquait une voyelle, ha, ha !
le bgcolor ne passe pas, avec le background sa fonctionne.
J'ai pas compris pour le tiret et la règle pour passer du .js au css ?
ok j'ai compris, j'avais pas recharger ma page
Merci

tout simplement, l'équivalent javascript de la propriété css background-color est backgroundColor.
Code:

1 2 3 4 5 6 7 <div id="introduction" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'"> <h3><span>formations</span></h3> Mes logiciels de prédilection :<br /> Photoshop; Illustrator; flash; 3d max.<br /> Mes langages de programmations :<br /> xhtml/css; php/mysql(notion).<br /> </div>
tu peux bien entendu juste utiliser background ;)

penses a mettre :resolu:

01/01/2006, 16h51
artotal

il manquait une voyelle, ha, ha !
le bgcolor ne passe pas, avec le background sa fonctionne.
Maintenant j'ai un soucis avec mon switcher qui est en .js, si j'appele ma page avec le style bleu, je ne vais plus avoir la tonalité bleu, l'idée pour se site est de séparer le contenu de la présentation.
Comment faire pour l'intégrer au changement de design, là c'est le trou noir !
J'ai des notion en .js, par rapport au php, y a des trucs bizarre.
Merci
PS : je crois devoir créer un post pour le switch ?
01/01/2006, 16h52
siddh

oui met celui la en résolu et créé en un nouveau
01/01/2006, 17h35
artotal

excellent la règle syntaxique du tiret:"Je remplace le tiret par une Maj"
:o