begin process at 2012 02 14 09:40:32
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets

 > BARRE DE DÉFILEMENT (SCROLLBAR) QUI CHANGE DE COULEUR AU SURVOL

BARRE DE DÉFILEMENT (SCROLLBAR) QUI CHANGE DE COULEUR AU SURVOL


 Information sur la source

Note :
10 / 10 - par 2 personnes
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Niveau :Débutant Date de création :08/07/2003 Date de mise à jour :08/07/2003 14:08:17 Vu :16 206

Auteur : olid

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

 Description

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

  • 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)
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/


 Sources du même auteur

AFFICHAGE AGRÉABLE D'UNE DATE DE PUBLICATION (EN ANGLAIS)
CALCULER L'ARRONDI D'UN PRIX ET LE METTRE EN FORME POUR L'AF...
ALTERNATIVE CONVIVIALE AUX REDIRECTIONS SI FRAMES ABSENTS (V...
PETITE ASTUCE POUR DES TEXTAREA ENVAHISSANTS...

 Sources de la même categorie

Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600

Commentaires et avis

Commentaire de mathieumg le 08/07/2003 15:56:04

Pour le textarea et le select il faut que tu définisse une feuille de style différente pour eux.

Merci

Mathieu M-G

Commentaire de bob3000 le 08/07/2003 19:41:52

pas mal, bravo!

Commentaire de olid le 08/07/2003 22:41:10

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

Commentaire de mathieumg le 08/07/2003 22:44:49

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.

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
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,671 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales