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

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

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)