Discussion :

[artotal]

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]

[Anduriel]

C'est du javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Quelque chose comme ça.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[siddh]

le :hover n'est géré que sur les liens dans ie

[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"
;-)

[Michaël]

trop nul ie faut vraiment équiper tout le monde avec firefox

mais dans ce cas, il ne faut pas oublier de mettre un onmouseout

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!-- couleur d'origine du td : blanche -->
<td onmousover="this.style.background='red'" onmouseout="this.style.background='white'">

[artotal]

Merci pour cette piste :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[GregPeck]

Essai ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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 element.style.zIndex
  background-color element.style.backgroundColor

[GregPeck]

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!

[siddh]

de rien,
en fait on applique tout simplement les règles syntaxiques de 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
  ...

[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...

[siddh]

oui c est vrai

peut etre car c'est un accronyme ? (comme pour responseXML)

[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

[siddh]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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&eacute;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

[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 ?

[siddh]

oui met celui la en résolu et créé en un nouveau

[artotal]

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