Some details can make your web page attracting. We have learn that how to make the colorful frame in one article. Now we will learn how to make the scroll bar change colors when the mouse is on it. In fact, it is common that many scroll bars of web sites can change their color when the mouse is on it. You can find this phenomenon in almost every website. So it is necessary for us to master how to achieve this special effect whether you want to use it or not at the moment. Now follow me step by step.

First, open the web page you have made in the past. The original web page is like the following picture. The color of the scroll bar is definite by the Internet Explorer automatically.

Dreamweaver 8.0 Tutorial ---- Make The Scroll Bar That Can Change Colors When Mouse Is On It 001

Second, click the code button and open the code view. Then put the following blue text into the section between <head> and </head>.

  1. <script language="JavaScript1.2">
  2. <!--
  3. function scrollBar(line,face,theme)
  4.     {
  5.         if (!line||!face)
  6.             {
  7.                 line=null;
  8.                 face=null;
  9.                 switch(theme) // Predefined themes
  10.                     {
  11.                         case "blue":
  12.                             var line="#78AAFF";
  13.                             var face="#EBF5FF";
  14.                             break;
  15.                         case "orange":
  16.                             var line="#FBBB37";
  17.                             var face="#FFF9DF";
  18.                             break;
  19.                         case "red":
  20.                             var line="#FF7979";
  21.                             var face="#FFE3DD";
  22.                             break;
  23.                         case "green":
  24.                             var line="#00C600";
  25.                             var face="#D1EED0";
  26.                             break;
  27.                         case "neo":
  28.                             var line="#BC7E41";
  29.                             var face="#EFE0D1";
  30.                             break;
  31.                     }
  32.             }
  33.  
  34.                 with(document.body.style)
  35.                     {
  36.                         scrollbarDarkShadowColor=line;
  37.                         scrollbar3dLightColor=line;
  38.                         scrollbarArrowColor="black";
  39.                         scrollbarBaseColor=face;
  40.                         scrollbarFaceColor=face;
  41.                         scrollbarHighlightColor=face;
  42.                         scrollbarShadowColor=face;
  43.                         scrollbarTrackColor="#F3F3F3";
  44.                     }
  45.             }
  46.  
  47. /*------------------[Pointer coordinates catcher]---------------*/
  48. function colorBar(){
  49.         var w = document.body.clientWidth;
  50.         var h = document.body.clientHeight;
  51.         var x = event.clientX;
  52.         var y = event.clientY;
  53.         if(x>w) scrollBar('#000080','#BFDFFF'); // Your colors
  54.         else scrollBar(null,null,"neo"); // A predefined theme
  55.     }
  56.  
  57. if (document.all){
  58. scrollBar(null,null,"neo");
  59. document.onmousemove=colorBar;
  60. }
  61. //-->
  62. </script>

Third, go back to the design view and save the document. Then press F12 key to preview the effect in the Internet Explorer. The scroll bar’s colors are like the following picture. You can see the scroll bar of the first picture, whose color is pink. And the color of the second picture’s scroll bar is light blue when the mouse is on it.

Dreamweaver 8.0 Tutorial ---- Make The Scroll Bar That Can Change Colors When Mouse Is On It 002

 

Dreamweaver 8.0 Tutorial ---- Make The Scroll Bar That Can Change Colors When Mouse Is On It 003

OK, now we have already finished the special effect that the scroll bar can change color when the mouse is on it. Of course you can change it into other colors. It is very easy. We just need to use the “function scrollBar” and “function colorBar” function codes. This special effect is very common, so we should master it adroitly. Practice again until you master these ways.

Related Posts