The production of the picture Pull-down selector

Drop down I believe that everyone has seen some software in the picture Drop-down select control? Here, there are OICQ. But have you ever seen it on the web? Sunny little today for you to launch your heart for a long time this control, the following demo is! Is the effect OK? Action, we see how to get out.

Demo: (Click here to open the demo page in a new window)

Let's take a look at the issues that need to be addressed to make this control.

First, the Picture Drop-down list box is a layer that appears when you click on a cue box, and then hides it when you select a picture or form click.

When it appears, it is positioned just below the selection prompt, and hiding can actually position it outside the screen (style.pixelleft=-800).

Second, the position of the Picture Drop-down list box. Select the Prompt box is not a layer, the Picture Drop-down list box appears in the selection of the balloon directly below, you must read the selection prompt box in the absolute position of the form, can not be affected by the location of the selection prompt box and screen resolution.

We can use "Object.offsetleft" and "object.offsettop" to get the relative position of objects (object) in its parent container (offsetparent). So we can use the while () loop to read the relative position to the upper level of the parent container, their algebra and the absolute position of the object in the topmost container (form).

Third, the Picture Drop-down list box scrolling, to ensure that automatically scroll to the corresponding picture appears at the top of the list box: When manual scrolling stops, if the scroll bar trend is scrolling down, then automatically continue scrolling down until the nearest picture is at the top of the list box, and vice versa.

In the example, we name all the selected pictures "0.gif", "1.gif" ... "9.gif" and put it in the "head" directory. Here are some practical procedures to solve these problems:

<!--Create form-->
<form name= "MyForm" method= "POST" action= "" > Please select Picture:
<div id= "Imgbox" ><!--here is the position of the picture Drop-down selector--></div>
<input name= "Myhead" type= "text" id= "Myface" "size=" "value=" ">
</form>

<script language= "JavaScript" >
<!--
var imgwidth=64; The width of the picture in the list box;
var imgheight=64; The height of the picture in the list box;
var imgsrc= "http://edu.cnzz.cn/NewsInfo/head/numeric serial number. gif"; The path for the selected picture. The "number ordinal" four word will be replaced with 0,1,2 in the program ..., do not manually change to a number;
var selectedno=7; The default selected picture ordinal;
var selectesize=2; The number of pictures displayed in the Drop-down list box;

/* Below the picture and the layer output in the "Imgbox" position:
We use the variable "Isin" to record whether the mouse is on the control, and to define the scroll bar of the Drop-down list box with CSS, "Overflow-x:hidden;overflow-y:scroll." refers to the horizontal direction does not roll, vertical aspect rolling;
Use a for () loop to print the picture to the Drop-down list box in turn.
*/
var myhtml= ' <span > ';
myhtml+= ' <table width= "1" title= "Select Cue box" border= "0" cellspacing= "0" cellpadding= "0" ><tr><td>< IMG name= "imgselected" border=1 src= "' +imgsrc.replace" ("Digital serial Number", Selectedno) + ' width= ' + (imgwidth) + ' height= ' +imgheight + ' ></td><td valign=top></td></tr ></table> ';
myhtml+= ' <div onscroll= ' Scrollud () "id=" Imgbox "\ n";
myhtml+= ' style= ' position:absolute;left=-800;top=0;background-color: #FFFFFF; border:1px solid #000000; Overflow-x: Hidden;overflow-y:scroll; Width: ' + (imgwidth+20) + ' px; Height: ' +imgheight*selectesize+ ' px ' > ';
for (i=0;i<10;i++) {
myhtml+= "<BR>";
}
myhtml+= "</DIV></SPAN>";
imgbox.outerhtml=myhtml;

/* The following control Drop-down list box appears or hides * *
function Showlist (obj) {///This functions will be activated when the selection prompt box clicks
If the list box already appears, this click is hidden:
if (imgbox.style.pixelleft!=-800) {imgbox.style.pixelleft=-800; return;}

Read the absolute position of the selection prompt box on the form:
Relative position in parent container:
var mytop=obj.offsettop;
var myleft=obj.offsetleft;
Sequentially reads the relative position of the parent container in the higher level parent container:
while (obj=obj.offsetparent) {
Myleft+=obj.offsetleft;
Mytop+=obj.offsettop;
}
Now you've got the absolute position of the selection prompt box Myleft and mytop.
The Drop-down list pull appears just below this absolute position:
Imgbox.style.left=myleft;
imgbox.style.top=mytop+imgheight+2;

}

var isin=false;
function Selectme (obj) {//It will activate when the form clicks or selects the picture, and the parameters passed in the form tap are null.
If (!isin| | obj) {imgbox.style.pixelleft=-800;}//Hide list box
if (obj) {
//change the value in the picture in the selection prompt box and in the Myhead input box:
//listid is the custom property of the object. That is, the attribute value is defined in the object's label and can now be read or changed.
Myform.myhead.value=imgsrc.replace ("Numeric serial number", Obj.listid);
document.images["imgselected"].src=imgsrc.replace ("Numeric serial number", Obj.listid);
}
}

/* the automatic scrolling */
var mytime=settimeout ("", 0) of the following control Drop-down list box;
var pre_x=0; This variable is used to record the position of the scroll bar before scrolling
function Scrollud () {//This function is activated when the Drop-down list box scrolls
var current_x=imgbox.scrolltop;//The position of the scroll bar when the function is activated
//Judge to scroll up or down, and automatically scroll to the integer times "ImgHeight".
//When we change the scrolltop value of the list box, it automatically fires its Onscroll event, which loops through the activation of this function.
if (current_x>pre_x && imgbox.scrolltop< math.ceil (imgbox.scrolltop/imgheight) *imgheight) {
Cleartimeout (MyTime);
Mytime=settimeout ("Imgbox.scrolltop=math.round (imgbox.scrolltop+1);", 1);
}
Else if (current_x<pre_x && imgbox.scrolltop> math.floor (imgbox.scrolltop/imgheight) * ImgHeight) {
cleartimeout (mytime);
Mytime=settimeout ("Imgbox.scrolltop=math.round (imgbox.scrolltop-1);", 1);
}
pre_x=current_x;
}
//To automatically scroll the list box to the default selected picture position and to activate the
imgbox.scrolltop= when the picture in each list box is loaded with the Myhead input box with the default value
function init () {//. Selectedno*imgheight;
Myform.myhead.value=imgsrc.replace ("Numeric serial number", Selectedno);
}

/* The following selectme (obj) function is activated when the form is clicked: * *
myactivation= "selectme (null)";
if (Document.body.onclick)
{
Eval (document.body.onclick.toString (). Replace (' Anonymous () ', ' Bodyclick () '));
Document.body.onclick=new Function ("Bodyclick ();" +myactivation);
}
else document.body.onclick=new Function (myactivation);
-->
</script>

The "selectme (obj) function activated" section at the end of the program "Make the form click" can be simply replaced with the Document.body.onclick=new function ("Selectme (null)"). But in order not to conflict with other programs ' form-click events, we used this piece of code. See flops " perfect solution for an event to activate multiple functions ." You can also set the type value of "Myhead" to "Hide", which is shown here for demonstration purposes.

OK, this control "picture Drop selector" has been done, it applied to the message, forums and other dynamic interactive pages, is really the best!