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 18 141 fois - Téléchargée 29 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
mathieumg
Messages postés
558
Date d'inscription
mardi 4 février 2003
Statut
Membre
Dernière intervention
18 février 2006
8 juil. 2003 à 22:44
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.
cs_olid
Messages postés
296
Date d'inscription
lundi 2 septembre 2002
Statut
Membre
Dernière intervention
28 janvier 2008
8 juil. 2003 à 22:41
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
bob3000
Messages postés
406
Date d'inscription
mardi 7 mai 2002
Statut
Membre
Dernière intervention
2 octobre 2004
8 juil. 2003 à 19:41
pas mal, bravo!
mathieumg
Messages postés
558
Date d'inscription
mardi 4 février 2003
Statut
Membre
Dernière intervention
18 février 2006
8 juil. 2003 à 15:56
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)