begin process at 2012 02 14 09:09:00
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > CHANGER LA CLASSE CSS D'UN ÉLÉMENT AVEC JAVASCRIPT

CHANGER LA CLASSE CSS D'UN ÉLÉMENT AVEC JAVASCRIPT


 Information sur la source

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :css classe, javascript, changer, changer classe Niveau :Initié Date de création :17/03/2008 Vu :17 612
Auteur : cheveche4

Ecrire un message privé
Site perso
Commentaire sur cette source (7)
Ajouter un commentaire et/ou une note

 Description

Changer une classe de feuille de style avec Javascript est en fait simple. Ici, l'exemple reprend un système d'onglets utilisés normallement avec ajax...

Source

  • <html>
  • <head>
  • <script>
  • v_menuitemactu = 'null'; //Page d'acceuil (il n'y a pas d'onglet sélectionné)
  • //Appel de la page...
  • //file ne sert ici à rien
  • //menuclick est l'id de l'objet sur lequel on clique
  • function LoadPage(file, menuclick){
  • //...
  • //on remet l'ancienne classe pour l'ancien élément. Attention qu'il est possible qu'aucun ne soit utilisé, à ce moment, il faut faire une condition pour éviter d'interrompre la fonction
  • if(v_menuitemactu != 'null') document.getElementById(v_menuitemactu).className = "menuitem";
  • //Mise à jour de l'onglet actuel
  • v_menuitemactu = menuclick;
  • //On change le style de l'onglet qui vient d'être sélectionné
  • document.getElementById(v_menuitemactu).className = "menuitemactu";
  • }
  • </script>
  • <style type="text/css">
  • /* !! Attention, ici, seules les images changent !! */
  • /*Onglet non sélectionné...*/
  • td.menuitem{
  • height: 35px;
  • width: 200px;
  • background-image: url("../images/menubutton_noselect.png");
  • text-align: left;
  • padding-left: 12px;
  • }
  • /* Onglet non-sélectionné survolé */
  • td.menuitem:hover{
  • background-image: url("../images/menubutton_mouseon.png");
  • }
  • /* Onglet sélectionné */
  • td.menuitemactu{
  • height: 35px;
  • width: 200px;
  • background-image: url("../images/menubutton_select.png");
  • text-align: left;
  • padding-left: 12px;
  • }
  • </style>
  • </head>
  • <body>
  • <table width=200 cellpadding=0 cellspacing=0 border=0>
  • <tr><td id="ml_01" class="menuitem" onclick="LoadPage('test.html', 'ml_01');"><a href="#" class="menulink">Mon Compte</a></td></tr>
  • <tr><td id="ml_02" class="menuitem" onclick="LoadPage('test.html', 'ml_02');"><a href="#" class="menulink">Carte</td></tr>
  • <tr><td id="ml_03" class="menuitem" onclick="LoadPage('test.html', 'ml_02');><a href="#" class="menulink">Mes Villes</td></tr>
  • <tr><td id="ml_04" class="menuitem" onclick="LoadPage('test.html', 'ml_02');><a href="#" class="menulink">Explorateur</td></tr>
  • </table>
  • </body>
<html>
<head>
<script>
v_menuitemactu = 'null'; //Page d'acceuil (il n'y a pas d'onglet sélectionné)

	//Appel de la page...	
        //file ne sert ici à rien
        //menuclick est l'id de l'objet sur lequel on clique
	function LoadPage(file, menuclick){
		//...	

		//on remet l'ancienne classe pour l'ancien élément. Attention qu'il est possible qu'aucun ne soit utilisé, à ce moment, il faut faire une condition pour éviter d'interrompre la fonction
		if(v_menuitemactu != 'null') document.getElementById(v_menuitemactu).className  = "menuitem"; 
		//Mise à jour de l'onglet actuel
                v_menuitemactu = menuclick;
                //On change le style de l'onglet qui vient d'être sélectionné
		document.getElementById(v_menuitemactu).className  = "menuitemactu";
	}
</script>

<style type="text/css">
/* !! Attention, ici, seules les images changent !! */
/*Onglet non sélectionné...*/
td.menuitem{
	height: 35px;
	width: 200px;
	background-image: url("../images/menubutton_noselect.png");
	text-align: left;
	padding-left: 12px;
}
/* Onglet non-sélectionné survolé */
td.menuitem:hover{
	background-image: url("../images/menubutton_mouseon.png");
}
/* Onglet sélectionné */
td.menuitemactu{
	height: 35px;
	width: 200px;
	background-image: url("../images/menubutton_select.png");
	text-align: left;
	padding-left: 12px;
}
</style>
</head>
<body>
	<table width=200 cellpadding=0 cellspacing=0 border=0>
		<tr><td id="ml_01" class="menuitem" onclick="LoadPage('test.html', 'ml_01');"><a href="#" class="menulink">Mon Compte</a></td></tr>
		<tr><td id="ml_02" class="menuitem" onclick="LoadPage('test.html', 'ml_02');"><a href="#" class="menulink">Carte</td></tr>
		<tr><td id="ml_03" class="menuitem" onclick="LoadPage('test.html', 'ml_02');><a href="#" class="menulink">Mes Villes</td></tr>
		<tr><td id="ml_04" class="menuitem" onclick="LoadPage('test.html', 'ml_02');><a href="#" class="menulink">Explorateur</td></tr>		
	</table>
</body>

 Conclusion

Ayant une longue recherche sur Exalead, je n'ai pas trouvé de source faisant ce que fait celle-ci... Donc, voilà! Je pense que cela servira à beaucoup.

Je l'ai testé sous Firefox et cela marche parfaitement. À vous d'adapter selon vos besoins.
Je l'ai mis dans cette cathégorie, car elle est applicable à bien plus qu'un simple système d'onglet.


 Sources de la même categorie

Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS par kazma
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol
Toutes les sources de la catégorie Graphique

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Source avec Zip Source avec une capture COPIER DU TEXTE par m22001111
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol
Source avec Zip FRACTALES, FOUGÈRE, TRIANGLE, CARRÉ par william voirol

Commentaires et avis

Commentaire de cheveche4 le 17/03/2008 18:46:35

Juste un petit commentaire: les liens utilisent un style que je n'ai pas définit dans la source.

Commentaire de Arto_8000 le 17/03/2008 21:10:02

C'est davantage un snippet qu'une source et honnêtement l'attribut className est loin d'être quelque chose de méconnu en Javascript. Cette source risque d'être supprimé par un administateur.

Commentaire de XtremDuke le 18/03/2008 11:47:55

Même remarque que Arto_8000.

Tu aurais pu, par exemple, montrer comment implémenter plusieurs classes, en ajouter une, en supprimer une, vérifier l'existence d'une classe, etc...

Commentaire de cheveche4 le 18/03/2008 18:30:23

Ben tant pis alors, je pensais que ce serait utile...

Commentaire de Equilibrius le 25/07/2008 16:21:02

Merci pour la source, moi sa ma appris un truc :p

++

Commentaire de mahlaoui le 13/11/2008 00:58:42

Thanks

Commentaire de Frank_klein le 13/05/2011 09:55:17 10/10

il faut arreter d'etre negatifs, cette source est utile, il faut pas attendre qu'on vous dit tout, c'est pas un service livre paye, il faut l'adapter a des travaux personnels, il y a des pistes de developement interesantes avec cette source.
merci a l'auteur

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

changer source iframe avec js sous differents browsers [ par martiall ] Salut &#224; toutes et tous,en essayant de faire simple....Sur ma page, j'ai une iframe du style :&lt;IFRAME id="toto" name="toto" src="page1.php" hei changer de place à une <div> [ par mickael56100 ] Bonjour tout le monde je laisse un message sur ce forum car jai un petit probleme. En fait je m'y connais pas trop en javascript et j'aurais besoin de Changer le Background image via onmouseover [ par dorian53 ] Bonjour,J'ai une question de NB mais je n'ai pas trouvé ma réponse :Comment changer d'image (et pas couleur comme on trouve partout) en background sur javascript [ par belkhayaty ] salut,dans quelques pages de codes-sources.com, il y a es zip à télécharger où il y a un fichier .swf et autre .fla moi je voulais un menu dynamique s Script javascript... [ par mydoom54 ] Bonjour, je voudrais avoir un code comme sa : PS: j'ai chercher partout j'ai pas trouverA B C D E F G H I J K L M N O P Q R S T U V W X Y Z            Traitement d'image et javascript [ par dd58007 ] Bonjour, Est-il possible de lire les pixels d'une image sur internet avec javascript, activeX....?Merci Formulaire Changer de focus avec la touche point [ par nzangel ] Bonjour,J'ai un formulaire qui demande une adresse IP, ce formulaire demande 4 champs et je voudrais savoir si il est possible de remplacer la touche passer une variable php dans du javascript [ par ciju ] Bonjour,J'ai un soucis d'exactitude dans la definition de mon code,  est ce quelqu'un pourrait  me donner la solution,  etant definitevement  nul !   calendar javascripte [ par arouwa ] Bonjour,je veux verifier si la date a été sélectionnée dans ma page, alors je vbeux le faire avec du javascripte alors je passe mon objet calendar dan Javascript unobtrusive [ par duterte ] Bonjour, Débutant en javascript, j'ai créé un script très utile pour afficher du contenu dynamique dans plusieurs div à la demande. Je souhaiterais re


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Beautiful woman in a bikini meditating on the beach
Photo Japan Kultur Zen Buddismus 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,889 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)