Modification feuille de style en javascript - Forum Alsacréations : CSS et Standards Web

Auteur
maximuz	# 05 May 2008 - 12:26:07
2 Posts	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 : 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)
2 Posts
maximuz	# 06 May 2008 - 16:35:53
2 Posts	Je suis arrivé à me dépatouiller, dsl pour le dérangement. Voici la syntaxe : onmouseover="this.className='CadreInformationsOuvert'" onmouseout="this.className='CadreInformations'"
2 Posts
Prévenir un modérateur

Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles - Location vacances France - Location vacances Europe

Nikozen : Hébergement - Réalisation : Alsacreations.fr