149、页面顶部图片导航

149、页面顶部图片导航

脚本说明:

把如下代码加入<body>区域中

<SCRIPT type=text/javascript>

document.onmouseover = doOver;

document.onmouseout  = doOut;

document.onmousedown = doDown;

document.onmouseup   = doUp;

 

 

function doOver() {

       var toEl = getReal(window.event.toElement, "className", "coolButton");

       var fromEl = getReal(window.event.fromElement, "className", "coolButton");

       if (toEl == fromEl) return;

       var el = toEl;

      

//     alert(el);

      

//     var cDisabled = el.getAttribute("cDisabled");

       var cDisabled = el.cDisabled;

//     alert(cDisabled);

       cDisabled = (cDisabled != null); // If CDISABLED atribute is present

      

       if (el.className == "coolButton")

              el.onselectstart = new Function("return false");

      

       if ((el.className == "coolButton") && !cDisabled) {

              makeRaised(el);

              makeGray(el,false);

       }

}

 

function doOut() {

       var toEl = getReal(window.event.toElement, "className", "coolButton");

       var fromEl = getReal(window.event.fromElement, "className", "coolButton");

       if (toEl == fromEl) return;

       var el = fromEl;

 

//     var cDisabled = el.getAttribute("cDisabled");

       var cDisabled = el.cDisabled;

       cDisabled = (cDisabled != null); // If CDISABLED atribute is present

 

       var cToggle = el.cToggle;

       toggle_disabled = (cToggle != null); // If CTOGGLE atribute is present

 

       if (cToggle && el.value) {

              makePressed(el);

              makeGray(el,true);

       }

       else if ((el.className == "coolButton") && !cDisabled) {

              makeFlat(el);

              makeGray(el,true);

       }

 

}

 

function doDown() {

       el = getReal(window.event.srcElement, "className", "coolButton");

      

       var cDisabled = el.cDisabled;

       cDisabled = (cDisabled != null); // If CDISABLED atribute is present

      

       if ((el.className == "coolButton") && !cDisabled) {

              makePressed(el)

       }

}

 

function doUp() {

       el = getReal(window.event.srcElement, "className", "coolButton");

      

       var cDisabled = el.cDisabled;

       cDisabled = (cDisabled != null); // If CDISABLED atribute is present

      

       if ((el.className == "coolButton") && !cDisabled) {

              makeRaised(el);

       }

}

 

 

function getReal(el, type, value) {

       temp = el;

       while ((temp != null) && (temp.tagName != "BODY")) {

              if (eval("temp." + type) == value) {

                     el = temp;

                     return el;

              }

              temp = temp.parentElement;

       }

       return el;

}

 

function findChildren(el, type, value) {

       var children = el.children;

       var tmp = new Array();

       var j=0;

      

       for (var i=0; i<children.length; i++) {

              if (eval("children[i]." + type + "==\"" + value + "\"")) {

                     tmp[tmp.length] = children[i];

              }

              tmp = tmp.concat(findChildren(children[i], type, value));

       }

      

       return tmp;

}

 

function disable(el) {

 

       if (document.readyState != "complete") {

              window.setTimeout("disable(" + el.id + ")", 100);      // If document not finished rendered try later.

              return;

       }

      

       var cDisabled = el.cDisabled;

      

       cDisabled = (cDisabled != null); // If CDISABLED atribute is present

 

       if (!cDisabled) {

              el.cDisabled = true;

             

              if (document.getElementsByTagName) {     // IE5

                     el.innerHTML =     "<span style='background: buttonshadow; filter: chroma(color=red) dropshadow(color=buttonhighlight, offx=1, offy=1); width: 100%; height: 100%; text-align: center;'>" +

                                                 "<span style='filter: mask(color=red); width: 100%; height: 100%; text-align: center;'>" +

                                                 el.innerHTML +

                                                 "</span>" +

                                                 "</span>";

              }

              else { // IE4

                     el.innerHTML =     '<span style="background: buttonshadow; width: 100%; height: 100%; text-align: center;">' +

                                                 '<span style="filter:Mask(Color=buttonface) DropShadow(Color=buttonhighlight, OffX=1, OffY=1, Positive=0); height: 100%; width: 100%%; text-align: center;">' +

                                                 el.innerHTML +

                                                 '</span>' +

                                                 '</span>';

              }

             

              //.inner {

              //     font: menu;

              //     width: 100px;

              //     filter: mask(color=red);

              //}

              //

              //.outer {

              //     width: 100px;

              //     background: buttonshadow;

              //     filter: chroma(color=red) dropshadow(color=buttonhighlight, offx=1, offy=1);

              //}

 

              if (el.onclick != null) {

                     el.cDisabled_onclick = el.onclick;

                     el.onclick = null;

              }

       }

}

 

function enable(el) {

       var cDisabled = el.cDisabled;

      

       cDisabled = (cDisabled != null); // If CDISABLED atribute is present

      

       if (cDisabled) {

              el.cDisabled = null;

              el.innerHTML = el.children[0].children[0].innerHTML;

 

              if (el.cDisabled_onclick != null) {

                     el.onclick = el.cDisabled_onclick;

                     el.cDisabled_onclick = null;

              }

       }

}

 

function addToggle(el) {

       var cDisabled = el.cDisabled;

      

       cDisabled = (cDisabled != null); // If CDISABLED atribute is present

      

       var cToggle = el.cToggle;

      

       cToggle = (cToggle != null); // If CTOGGLE atribute is present

 

       if (!cToggle && !cDisabled) {

              el.cToggle = true;

             

              if (el.value == null)

                     el.value = 0;          // Start as not pressed down

             

              if (el.onclick != null)

                     el.cToggle_onclick = el.onclick;    // Backup the onclick

              else

                     el.cToggle_onclick = "";

 

              el.onclick = new Function("toggle(" + el.id +"); " + el.id + ".cToggle_onclick();");

       }

}

 

function removeToggle(el) {

       var cDisabled = el.cDisabled;

      

       cDisabled = (cDisabled != null); // If CDISABLED atribute is present

      

       var cToggle = el.cToggle;

      

       cToggle = (cToggle != null); // If CTOGGLE atribute is present

      

       if (cToggle && !cDisabled) {

              el.cToggle = null;

 

              if (el.value) {

                     toggle(el);

              }

 

              makeFlat(el);

             

              if (el.cToggle_onclick != null) {

                     el.onclick = el.cToggle_onclick;

                     el.cToggle_onclick = null;

              }

       }

}

 

function toggle(el) {

       el.value = !el.value;

      

       if (el.value)

              el.style.background = "URL(/images/tileback.gif)";

       else

              el.style.backgroundImage = "";

 

//     doOut(el);     

}

 

 

function makeFlat(el) {

       with (el.style) {

              background = "";

              border = "1px solid buttonface";

              padding      = "1px";

       }

}

 

function makeRaised(el) {

       with (el.style) {

              borderLeft   = "1px solid buttonhighlight";

              borderRight  = "1px solid buttonshadow";

              borderTop    = "1px solid buttonhighlight";

              borderBottom = "1px solid buttonshadow";

              padding      = "1px";

       }

}

 

function makePressed(el) {

       with (el.style) {

              borderLeft   = "1px solid buttonshadow";

              borderRight  = "1px solid buttonhighlight";

              borderTop    = "1px solid buttonshadow";

              borderBottom = "1px solid buttonhighlight";

              paddingTop    = "2px";

              paddingLeft   = "2px";

              paddingBottom = "0px";

              paddingRight  = "0px";

       }

}

 

function makeGray(el,b) {

       var filtval;

      

       if (b)

              filtval = "gray()";

       else

              filtval = "";

 

       var imgs = findChildren(el, "tagName", "IMG");

             

       for (var i=0; i<imgs.length; i++) {

              imgs[i].style.filter = filtval;

       }

 

}

      

 

document.write("<style>");

document.write(".coolBar     {background: buttonface;border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight;       border-bottom: 1px solid buttonshadow; border-right: 1px solid buttonshadow; padding: 2px; font: menu;}");

document.write(".coolButton {border: 1px solid buttonface; padding: 1px; text-align: center; cursor: default;}");

document.write(".coolButton IMG       {filter: gray();}");

document.write("</style>");

</SCRIPT>

 

<SCRIPT type=text/javascript>

var floatWidth = 200;

var floatHeight = 24;     // extra 4 for the border

var snapHorizSize = 50;

var snapVertSize = 20;

var horizDockWidth = 50;     // When docked to the left or right

var vertDockHeight = 20;

var toolbarPos = "top";  // Start at this position

 

 

// The following three are global, don't edit

var errorInSetup = false;

var dragging = false;

var tx;

var ty;

 

var ie4 = document.all != null;;

var ie5 = document.all != null && document.getElementsByTagName != null;

 

/////////////////////////////////////////////////////////////////////////////

// Set up the event handlers

if     (ie5) {     // IE5 way of setting up event handlers is way too good to ignore

       window.attachEvent("onload", fixSize);

       window.attachEvent("onresize", fixSize);

       document.attachEvent("onmousedown", dockBarOnMouseDown);

       document.attachEvent("onmouseup", dockBarOnMouseUp);

       document.attachEvent("onmousemove", dockBarOnMouseMove);

}

else if (ie4) {

       window.onload=fixSize;

       window.onresize=fixSize;

       document.onmousedown = dockBarOnMouseDown;

       document.onmouseup = dockBarOnMouseUp;

       document.onmousemove = dockBarOnMouseMove;

}

 

// Set up the CSS

if (ie4 || ie5) {

document.styleSheets[0].addRule("#handle", "border-left: 1 solid buttonhighlight; border-right: 1 solid buttonshadow; border-top: 1 solid buttonhighlight; border-bottom: 1 solid buttonshadow;" +

                                                        "padding: 0; margin: 1; cursor: move; width: 3; height: 18; overflow: hidden;");

document.styleSheets[0].addRule("#toolbar", "cursor: default; position: absolute; top: 0; left: 0; background: buttonface; border: 0;" +

                                                        "height: 20; width: 100%; padding: 0px;      overflow: hidden; z-index: 1;");

document.styleSheets[0].addRule("#contentDiv","position: absolute; overflow:auto; XXXz-index: -1; height: 100%; width:100%; border: 2 inset white;");

document.styleSheets[0].addRule("body", "margin: 0; border: 0; overflow: hidden;");

}

 

function fixSize() {

       if (toolbar == null || handle == null || contentDiv == null || !(ie4 || ie5)) {

              if (!errorInSetup)

                     alert("The setup of this page is not correct for this script to work. Contact the author of the page.");

              errorInSetup = true;

              return;

       }

      

       switch (toolbarPos) {

              case"top":

              toolbar.style.border = "0 solid buttonface";

              toolbar.style.width = "100%";

              toolbar.style.height = vertDockHeight;

              toolbar.style.top = 0;

              toolbar.style.left = 0;

             

              contentDiv.style.top = vertDockHeight;

              contentDiv.style.left = 0;

              contentDiv.style.height = document.body.clientHeight - vertDockHeight;

              contentDiv.style.width = "100%";

 

              handle.style.height = vertDockHeight - 2;

              handle.style.width = 3;

              break;

      

              case "bottom":

              toolbar.style.border = "0 solid buttonface";

              toolbar.style.width = "100%";

              toolbar.style.height = vertDockHeight;

              toolbar.style.top = document.body.clientHeight - vertDockHeight;

              toolbar.style.left = 0;

      

              contentDiv.style.top = 0;

              contentDiv.style.left = 0;

              contentDiv.style.height = document.body.clientHeight - vertDockHeight;

              contentDiv.style.width = "100%";

 

              handle.style.height = vertDockHeight - 2;

              handle.style.width = 3;

              break;

      

              case "left":

              toolbar.style.border = "0 solid buttonface";

              toolbar.style.width = horizDockWidth;

              toolbar.style.height = "100%";

              toolbar.style.top = 0;

              toolbar.style.left = 0;

 

              contentDiv.style.top = 0;

              contentDiv.style.left = horizDockWidth;

              contentDiv.style.height = "100%";

              contentDiv.style.width = document.body.clientWidth - horizDockWidth;

             

              handle.style.height = 3;

              handle.style.width = horizDockWidth -2;

              break;

 

              case "right":

              toolbar.style.border = "0 solid buttonface";

              toolbar.style.width = horizDockWidth;

              toolbar.style.height = "100%";

              toolbar.style.top = 0;

              toolbar.style.left = document.body.clientWidth - horizDockWidth;

             

              contentDiv.style.top = 0;

              contentDiv.style.left = 0;

              contentDiv.style.height = "100%";

              contentDiv.style.width = document.body.clientWidth - horizDockWidth;

             

              handle.style.height = 3;

              handle.style.width = horizDockWidth -2;

              break;

             

              case "float":

              toolbar.style.width = floatWidth;

              toolbar.style.height = floatHeight;

              toolbar.style.border = "2px outset white";

             

              contentDiv.style.top = 0;

              contentDiv.style.left = 0;

              contentDiv.style.height = "100%";

              contentDiv.style.width = "100%";              

 

              handle.style.height = floatHeight - 6;

              handle.style.width = 3;

       }

       if (toolbar.ondock != null) {

              if (typeof(toolbar.ondock) == "function")

                     toolbar.ondock();

              else

                     eval(toolbar.ondock);

       }

}

/////////////////////////////////////////////////////////////////////////////

 

 

function dockBarOnMouseDown() {

       if(window.event.srcElement.id == "handle") {

              ty = (window.event.clientY - toolbar.style.pixelTop);

              tx = (window.event.clientX - toolbar.style.pixelLeft);

 

              dragging = true;

             

              window.event.returnValue = false;

              window.event.cancelBubble = true;

       }

       else {

              dragging = false;

       }    

}

 

function dockBarOnMouseUp() {

       dragging = false;

}

 

function dockBarOnMouseMove() {

       if(dragging) {

              // Top

              if((window.event.clientY) <= snapVertSize

                     && toolbarPos != "left" && toolbarPos != "right") {

                     toolbarPos = "top";

                     fixSize();

              }

              // Bottom

              else if (window.event.clientY >= document.body.clientHeight - snapVertSize

                     && toolbarPos != "left" && toolbarPos != "right") {

 

                     toolbarPos="bottom";

                     fixSize();

              }

              // Left

              else if (window.event.clientX <= snapHorizSize

                     && toolbarPos != "top" && toolbarPos != "bottom") {

 

                     toolbarPos = "left";

                     fixSize();

              }

              // Right

              else if (window.event.clientX >= document.body.clientWidth - snapHorizSize

                     && toolbarPos != "top" && toolbarPos != "bottom") {

 

                     toolbarPos = "right";

                     fixSize();

              }

              else {

                     toolbar.style.left = window.event.clientX;

                     toolbar.style.top = window.event.clientY - ty;

 

                     toolbarPos = "float";

                     fixSize();

              }

 

              window.event.returnValue = false;

              window.event.cancelBubble = true;

       }

}

 

</SCRIPT>

<STYLE type=text/css>BODY {

       BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN: 0px

}

.coolButton {

       HEIGHT: 20px; MARGIN: 1px; WIDTH: 20px

}

</STYLE>

<DIV id=toolbar onselectstart="return false"><SPAN id=handle

title="Drag to move the container"></SPAN>

<SPAN class=coolButton

onclick="window.location='http://www.163.com'" title=网易><IMG align=absMiddle

height=16 src="arrowleft.gif" width=16></SPAN>

<SPAN onclick="window.location='http://www.sohu.com'" title=搜狐

class=coolButton id=next title=Next><IMG align=absMiddle height=16

src="arrowright.gif" width=16></SPAN>

<SPAN

class=coolButton onclick="window.open('http://www.1stscript.com/','_top')"

title=首页><IMG align=absMiddle height=16

src="favicon.gif" width=16></SPAN><SPAN

class=coolButton

onclick="window.open('http://www.sina.com.cn','_top')"

title="新浪网"><IMG align=absMiddle height=16

src="desktop.gif" width=16></SPAN>

<SPAN class=coolButton

onclick="window.location='http://www.163.com'" title=网易><IMG align=absMiddle

height=16 src="arrowleft.gif" width=16></SPAN>

<SPAN onclick="window.location='http://www.sohu.com'" title=搜狐

class=coolButton id=next title=Next><IMG align=absMiddle height=16

src="arrowright.gif" width=16></SPAN><SPAN

class=coolButton onclick="window.open('http://www.1stscript.com/','_top')"

title=首页><IMG align=absMiddle height=16

src="favicon.gif" width=16></SPAN><SPAN

class=coolButton

onclick="window.open('http://www.sina.com.cn','_top')"

title="新浪网"><IMG align=absMiddle height=16

src="desktop.gif" width=16></SPAN>

<SPAN class=coolButton

onclick="window.location='http://www.163.com'" title=网易><IMG align=absMiddle

height=16 src="arrowleft.gif" width=16></SPAN>

<SPAN onclick="window.location='http://www.sohu.com'" title=搜狐

class=coolButton id=next title=Next><IMG align=absMiddle height=16

src="arrowright.gif" width=16></SPAN><SPAN

class=coolButton onclick="window.open('http://www.1stscript.com/','_top')"

title=首页><IMG align=absMiddle height=16

src="favicon.gif" width=16></SPAN><SPAN

class=coolButton

onclick="window.open('http://www.sina.com.cn','_top')"

title="新浪网"><IMG align=absMiddle height=16

src="desktop.gif" width=16></SPAN>

<SPAN class=coolButton

onclick="window.location='http://www.163.com'" title=网易><IMG align=absMiddle

height=16 src="arrowleft.gif" width=16></SPAN>

<SPAN onclick="window.location='http://www.sohu.com'" title=搜狐

class=coolButton id=next title=Next><IMG align=absMiddle height=16

src="arrowright.gif" width=16></SPAN><SPAN

class=coolButton onclick="window.open('http://www.1stscript.com/','_top')"

title=首页><IMG align=absMiddle height=16

src="favicon.gif" width=16></SPAN><SPAN

class=coolButton

onclick="window.open('http://www.sina.com.cn','_top')"

title="新浪网"><IMG align=absMiddle height=16

src="desktop.gif" width=16></SPAN>

</DIV>

<DIV id=contentDiv>这里是正文内容

 

Write a comment

Comments: 0