11550 sujets

JavaScript, DOM et API Web HTML5

Modification feuille de style en javascript

Bonjour tout le monde,

Je rencontre un petit problème et j'aurais souhaité savoir qui quelqu'un aurait la gentillesse de m'aider.

Le souci : Je voudrais pouvoir modifier dynamiquement un cadre fait en CSS, pour cela j'ai crée 2 class "CadreInformations" & "CadreInformationsOuvert".


Je souhaiterai que lorsque l'utilisateur passe son pointeur sur le bouton le cadre se déroule et lorsqu'il retire son pointeur du bouton que le cadre revienne à l'état initial.

Etant débutant en javascript je pense qu'il faut que j'utilise les évènements "onmouseover" et "onmouseout" ainsi que l'attribut className dans mon script mais je ne voie pas comment faire.

J'espère avoir été clair, si vous pouviez m'aider ce serait vraiment sympa. MERCI d'avance.

Voici le cadre :
upload/16603-cadre.JPG

Voici mon code simplifié...

Mon fichier CSS :

#boutonInformations
{
border:				none;
cursor:				default;
position: 			absolute;
top: 				-19%;
left: 				72%;
width: 				23px;
height: 			23px;
}

#CadreInformations
{
position:			absolute;
width: 				15%;
height: 			5%;
margin-top:			16%;
margin-left: 		75%;
padding: 			10px;
background-color: 	#96a8d2;
border-left: 		1px solid #2763f6;
border-right: 		1px solid #2763f6;
border-bottom: 		1px solid #2763f6;
border-top: 		1px solid #2763f6;
}

#CadreInformationsOuvert
{
position:			absolute;
width: 				15%;
height: 			20%;
margin-top:			16%;
margin-left: 		         75%;
padding: 			10px;
background-color: 	#96a8d2;
border-left: 		1px solid #2763f6;
border-right: 		1px solid #2763f6;
border-bottom: 		1px solid #2763f6;
border-top: 		1px solid #2763f6;
}

#positionTitreInformations
{
position: 			absolute;
width: 				67%;
height: 			45%;
top: 				-20%;
left: 				4%;
border-left: 		1px solid #2763f6;
border-right: 		1px solid #2763f6;
border-bottom: 		1px solid #2763f6;
border-top: 		1px solid #2763f6;
background-color:	#96a8d2;
font-size: 			1em;
font-weight:		bold;
color: 				blue;
}


Ma page WEB :

<html>

<head>
<link rel='stylesheet' type='text/css' href='index.css' />
<script type='text/javascript' src='java.js'>
</head>


<body>
		<div id='CadreInformations'>
		<input type='text' id='positionTitreInformations' value=' Informations '>
		<a href='#' onmouseover="window.status=''; return true;" onmouseout="window.status=''; return true;"><img src='fleche_bas.png' id='boutonInformations' onmouseover="" onmouseout=""></a>
			<div id='positionInformations'>
			
			</div>
		</div>

</body>

Modifié par maximuz (06 May 2008 - 14:10)
Je suis arrivé à me dépatouiller, dsl pour le dérangement.

Voici la syntaxe :
onmouseover="this.className='CadreInformationsOuvert'" onmouseout="this.className='CadreInformations'"
Sujet clos
Aller à