1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Barre de défilement (scrollbar) qui change de couleur au survol

Barre de défilement (scrollbar) qui change de couleur au survol

4/5 (4 avis)

Snippet vu 17 896 fois - Téléchargée 27 fois

Commenter

Contenu du snippet

Méthode simple pour que la barre de défilement (scrollbar) change de couleur quand elle est survolée par la souris.

C'est une amélioration (et correction) d'un code dont j'ai oublié l'origine... Dézolé :op

Ce code marche uniquement avec Internet Explorer 5.5 (ou supérieur).

Le code est ci-dessous, et le paramétrage ne devrait pô vous poser de problémes :op

NB: J'essaye de trouver une astuce pour que le script ne change pô les couleurs des scrollbar des balises TEXTAREA ou SELECT ....merzi pour vos astuces et conseils :o)

Source / Exemple : 


1/ Créer un fichier 'scrollbar.js' avec le code ci-dessous (modifiez les variables avec vos couleurs) :

couleurligne = "#ffedb2";
couleurligneover = "#EF9B00";
couleurbase = "#ffffff";
couleurbaseover = "#FFFDEF";
couleurfond = "#ffffff";

function scrollBar(face,line)
	{
	with(document.body.style)
		{
		scrollbarDarkShadowColor=line;
		scrollbar3dLightColor=line;
		scrollbarArrowColor=line;
		scrollbarBaseColor=face;
		scrollbarFaceColor=face;
		scrollbarHighlightColor=face;
		scrollbarShadowColor=face;
		scrollbarTrackColor=couleurfond;
		}
	}
	
function colorBar(){
		var w = document.body.clientWidth;
		var h = document.body.clientHeight;
		var x = event.clientX;
		var y = event.clientY;
		if ((x>w) & (x<(w+17))) colorBarOver();
		else colorBarOut;
	}
	
function colorBarOut(){
	scrollBar(couleurbase,couleurligne);
	}
	
function colorBarOver(){
	scrollBar(couleurbaseover,couleurligneover);
	}
	
if (document.all){
scrollBar(couleurbase,couleurligne);
document.onmousemove=colorBar;
document.onmouseout=colorBarOut;
}

2/ Dans vos pages HTML, placez le code ci-dessous juste aprés la balise <BODY> (pour charger le fichier créé ci-dessus) :

<SCRIPT LANGUAGE="javascript" src="./scrollbar.js" type="text/javascript"></SCRIPT>

On peut pô plus simple, non ? :o)

Conclusion :


Si vous êtes un utilisateur de Yahoo! Messenger, on recherche des volontaires pour notre plug-in intitulé Yahoo! Plus

Le site officiel pour le télécharger:
http://www.yahooplus.fr.st

Le projet commun sur VBFrance (réseau Codes-Sources) :
http://www.vbfrance.com/projetcommun.aspx?ID=238

Le Yahoo! Groupe des utilisateurs du plug-in :
http://fr.groups.yahoo.com/group/yplus/

A voir également

Ajouter un commentaire Commentaires
Signaler
Messages postés
558
Date d'inscription
mardi 4 février 2003
Statut
Membre
Dernière intervention
18 février 2006
Ah désolé mois je sais juste un CSS.

Mais je suis pas sur essaie (En JS):

document.nom_de_la_form.nom_de_la_boite.style.propriété = valeur

J'ai déja vu ça quelque part.
Signaler
Messages postés
296
Date d'inscription
lundi 2 septembre 2002
Statut
Membre
Dernière intervention
28 janvier 2008
Je voudrais bien Mathieu, mais ma doc Javascript nindique pô de propriete pour changer les attributs de style des scrollbars des balises TEXTAREA et SELECT ....et meme par tatonnement, je trouve pô ! :o(((

NB: Zinon, en CSS, je zais le faire.... mais za zerais mieux dans le .js non ?!! :op
Signaler
Messages postés
406
Date d'inscription
mardi 7 mai 2002
Statut
Membre
Dernière intervention
2 octobre 2004
pas mal, bravo!
Signaler
Messages postés
558
Date d'inscription
mardi 4 février 2003
Statut
Membre
Dernière intervention
18 février 2006
Pour le textarea et le select il faut que tu définisse une feuille de style différente pour eux.

Merci

Mathieu M-G
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_olid)