The Dreamweaver controllable that make is transverse scroll

1.A layer is inserted in DreamWeaver, this layer as scroll area. The parameter that sets a layer is as follows:



Setting layer number is: Slayer, namely the ID attribute of the layer.

Left be worth with what go up is a position in the page can install according to needing proper motion; It is here 100 with 120 elephants element.

Wide and tall the size that is a layer, also install according to need;

Editing and rearrangement is the active area that points to a layer, be concealed in the part beyond editing and rearrangement, we use this active area to conceal the part of the right side of the layer, this active area is controlled while control layer is mobile next, will achieve the scroll area result that we want.

The setting is right for what show wide, it is here 340; Be equal to below tall.

The code of the layer is below:

<Div Id="slayer" Style="position:aBsolute; Top: 120px; Left: 100p x; Clip: Rect(0 340 120 0); Height: 120px; Background-color: #CCCCCC; Layer-background-color: #CCCCCC; Border: 1px None #000000; Width: 670px" >

We are in a few pictures can be put in the sidewards in the layer, here is replaced with form. And above the size just in time of the layer of the setting can include all pictures.

2.Code is a scroll code below, we insert a mark<Of Div > below:

The cost that LayerW notes when inserting is editing and rearrangement (the value with right Clip) , it is here 340.

<Script Language="javascript" >

<! - - / / By Hve
Of active area of set of Var LayerW=340; // wide
Var LayerH=parseInt(slayer.style.height);
Var LayerL=parseInt(slayer.style.left);
Var LayerT=parseInt(slayer.style.top);
Var Step=0; //scroll Value
Function Movstar(a, time){
If (a<0&&step >-parseInt(slayer.scrollWidth)+layerW | | A >0&&step<0)
Mov(a);
Movx=setTimeout("movstar("+a+" , "+ Time+")" , time);

}
Function Movover(){
ClearTimeout(movx);

}
Function Mov(a){
Slayer.style.left = (step+=a) + LayerL;
ClipL=0-step;
ClipR=layerW-step;
ClipB=layerH;
ClipT=0;
Slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";

}

/ /- - >

</ Script >

3.Insert a layer to place again " control pushbutton " .

Of the facing before this layer relies on to be in below, with will place " control pushbutton " , the position can be adjusted according to needing proper motion, pursue as follows. The color that form uses here piece regard as control pushbutton, it is better to if make the picture of two arrowheads appearance,be met.

4.In " control pushbutton " fluctuation face code is added respectively in mark.

Here is to be added in form mark<In Td > , if you use a picture to do pushbutton to be added in<In Img > mark.

Wrong button:
OnMouseDown="movover();movstar(3, 2)" OnMouseOut="movover()" OnMouseOver="movstar(1, 20)" OnMouseUp="movover();movstar(1, 20) "

Right button:
OnMouseDown="movover();movstar(-3, 2)" OnMouseOut="movover()" OnMouseOver="movstar(-1, 20)" OnMouseUp="movover();movstar(-1, 20) "

The meaning of code is above point to pushbutton to begin an action when the mouse, press accelerate rate, the mouse leaves pushbutton to suspend an action, - number moves to return way.

5.Finish

Point to when the mouse " control pushbutton " when, meeting towards the left or roll right, nod a mouse to be not put can accelerate scroll rate.

Whole code is: (can copy check in BODY area)

<Div Id="slayer" Style="position:aBsolute; Top: 120px; Left: 100px; Clip: Rect(0 340 120 0); Height: 120px; Background-color: #CCCCCC; Layer-background-color: #CCCCCC; Border: 1px None #000000; Width: 670px ">

<Script Language="javascript" >

<! - - / / By Hve
Of active area of set of Var LayerW=340; // wide
Var LayerH=parseInt(slayer.style.height);
Var LayerL=parseInt(slayer.style.left);
Var LayerT=parseInt(slayer.style.top);
Var Step=0; //scroll Value
Function Movstar(a, time){
If (a<0&&step >-parseInt(slayer.scrollWidth)+layerW | | A >0&&step<0)
Mov(a);
Movx=setTimeout("movstar("+a+" , "+ Time+")" , time);

}
Function Movover(){
ClearTimeout(movx);

}
Function Mov(a){
Slayer.style.left = (step+=a) + LayerL;
ClipL=0-step;
ClipR=layerW-step;
ClipB=layerH;
ClipT=0;
Slayer.style.clip="rect("+clipT+" "+clipR+ " "+clipB+" "+clipL+")";

}

/ /- - >

</ Script >

<Table Cellspacing="10" Border="0" Cellpadding="0" >

<Tr Bgcolor="#FFCC99 ">

<Td Height="100" Width="100" ></ Td >

<Td Height="100" Width="100" ></ Td >

<Td Height="100" Width="100" ></ Td >

<Td Height="100" Width="100" ></ Td >

<Td Height="100" Width="100" ></ Td >

<Td Height="100" Width="100" ></ Td >

</ Tr >

</ Table >

</ Div >

<Div Id="Layer1" Style="position:aBsolute; Width:344px; Height:20px; Z-index:1; Left: 97px; Top: 244px ">

<Table Width="100%" Height="100%" >

<Tr>

<Td Bgcolor="#CCCCCC" Height="14" OnMouseDown="movover();movstar(3, 2)" OnMouseOut="movover()" OnMouseOver="movstar(1, 20)" OnMouseUp="movover();movstar(1, 20)" Width="14" ></ Td >

<Td ></ Td >

<Td Bgcolor="#CCCCCC" Height="14" OnMouseDown="movover();movstar(-3, 2)" OnMouseOut="movover()" OnMouseOver="movstar(-1, 20)" OnMouseUp="movover();movstar(-1, 20)" Width="14" ></ Td >

</ Tr >

</ Table >

</ Div >