begin process at 2010 02 09 23:55:11
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
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 :14 044
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...
Toutes les sources de olid

 Sources de la même categorie

Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx
Source avec Zip Source avec une capture [DSI] DÉPLACEMENTS SUR IMAGES par Bul3
Source avec Zip Source avec une capture [ZI] ZOOM (LOUPE) SUR IMAGE par Bul3
Toutes les sources de la catégorie Effets

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


HTC Magic
Entre 429€ et 429€

Visiter le guide achat

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

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

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)