<input type=button onclick="location.href='sss.jsp'">
是文本吧
下拉框加图片哦。我以前看到过,找找看。

解决方案 »

  1.   

    例子太长了,哈哈
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <style>
    .select {border: 0 inset buttonface; width: 100; font: icon; cursor: default;}
    .selected {border: 0 inset buttonface; background: window; padding: 0; font: icon;}
    .selectTable {height: 100%; width: 100%;
    border: 2 inset buttonhighlight; background: buttonface;}
    .option {font: icon; padding: 1; padding-left: 3; padding-right: 3; width: 100%;}
    .dropDown {position: absolute; visibility: hidden; width: 100%;
    border: 1 solid windowtext; padding: 0;
    background: window; color: windowtext;}
    .select .button {width: 16px; height: 5; font-family: webdings; padding: 0;
    font-size: 11px; border: 2 outset buttonhighlight;}
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function writeSelectBox(matrix, id, size, onchange, css) {
    var d = window.document; var ie4 = (document.all != null); if (ie4) {
    // alert("Before!");
    var s = createIEString(matrix, id, size, onchange, css);
    document.write(s);
    // alert("After!");
    // alert(s);
    } else {
    document.write(createXString(matrix, id, size, onchange, css));
    }
    }function createIEString(matrix, id, size, onchange, css) {
    var str = "";
    // Span startTag
    str += '<span class="select"';
    if (size == null)
    size = 1;
    str += ' size="' + size + '"';
    if (id != null)
    str += ' id="' + id + '"';
    if (onchange != null)
    str += ' onchange="' + onchange + '"';
    if (css != null)
    str += ' style="' + css + '"';
    str += '>\n';

    // Table Tag
    str += '<table class="selectTable" cellspacing="0" cellpadding="0"\n';
    str += ' onclick="toggleDropDown(this.parentElement)">\n';
    str += '<tr>\n';
    str += '<td class="selected">&nbsp;</td>\n';
    str += '<td align="CENTER" valign="MIDDLE" class="Button"\n';   str += ' onmousedown="this.style.border=\'2 inset buttonhighlight\'"\n';   str += ' onmouseup="this.style.border=\'2 outset buttonhighlight\'">\n';
    str += '<span style="position: relative; left: 0; top: -2; width: 100%;">6</span></td>\n';
    str += '</tr>\n';
    str += '</table>\n';

    // DropDown startTag
    str += '<div class="dropDown" onclick="optionClick()" onmouseover="optionOver()" onmouseout="optionOut()">\n';

    for (var i=0; i<matrix.length; i++) {
    html     = matrix[i].html;
    value    = matrix[i].value;
    css      = matrix[i].css;
    selected = matrix[i].selected;

    // Write option starttag
    str += '<div class="option"';
    if (value != null)
    str += ' value="' + value + '"';
    if (css != null)
    str += ' style="' + css + '"';
    if (selected != null)
    str += ' selected';
    str += '>\n';

    // Write HTML contents
    str += html;
    // Write end tag
    str += '</div>\n';
    }

    //DropDown endtag
    str += '</div>\n';

    // Span endTag
    str += '</span>\n';

    return str;
    }function createXString(matrix, id, size, onchange, css) {
    // var str = "\n";
    // form startTag
    var str = '<form>\n';
    // Select startTag
    str += '<select';
    if (size == null)
    size = 1;
    str += ' size="' + size + '"';
    if (id != null)
    str += ' id="' + id + '"';
    if (onchange != null)
    str += ' onchange="' + onchange + '"';
    // if (css != null)
    // str += ' style="' + css + '"';
    str += '>\n';
    // write options
    for (var i=0; i<matrix.length; i++) {
    html     = matrix[i].html;
    value    = matrix[i].value;
    css      = matrix[i].css;
    selected = matrix[i].selected;

    // Write option starttag
    str += '\n<option';
    if (value != null)
    str += ' value="' + value + '"';
    // if (css != null)
    // str += ' style="' + css + '"';
    if (selected != null)
    str += ' selected';
    str += '>';

    // Write HTML contents
    str += stripTags(html);
    // Write end tag
    str += '</option>\n';
    }
    str += '\n</select>\n';
    str += '</form>\n'; return str;
    }function stripTags(str) {
    var s = 0;
    var e = -1;
    var r = ""; s = str.indexOf("<",e); do {
    r += str.substring(e + 1,s);
    e = str.indexOf(">",s);
    s = str.indexOf("<",e);
    }
    while ((s != -1) && (e != -1)) r += str.substring(e + 1,str.length); return r;
    }function Option(html, value, css, selected) {
    this.html = html;
    this.value = value;
    this.css = css;
    this.selected = selected;
    }
    var overOptionCss = "background: highlight; color: highlighttext";
    var sizedBorderCss = "2 inset buttonhighlight";var globalSelect; //This is used when calling an unnamed selectbox with onclick="this.PROPERTY"var ie4 = (document.all != null);var q = 0;
    function initSelectBox(el) {
    copySelected(el);

    var size = el.getAttribute("size");// These two lines combined with execution in optionClick() allow you to write:
    // onchange="alert(this.options[this.selectedIndex].value)"
    el.options = el.children[1].children;
    el.selectedIndex = findSelected(el); //Set the index now!
    // Some methods that are supported on the real SELECT box
    el.remove = new Function("i", "int_remove(this,i)");
    el.item   = new Function("i", "return this.options[i]");
    el.add    = new Function("e", "i", "int_add(this, e, i)");
    // The real select box let you have lot of options with the same NAME. In that case the item
    // needs two arguments. When using DIVs you can't have two with the same NAME (or ID) and
    // then there is no need for the second argument

    el.options[el.selectedIndex].selected = true; dropdown = el.children[1]; if (size != null) {
    if (size > 1) {
    el.size = size;
    dropdown.style.zIndex = 0;
    initSized(el);
    }
    else {
    el.size = 1;
    dropdown.style.zIndex = 99;
    if (dropdown.offsetHeight > 200) {
    dropdown.style.height = "200";
    dropdown.style.overflow = "auto";
    }
    }
    }

    highlightSelected(el,true);
    }function int_remove(el,i) {
    if (el.options[i] != null)
    el.options[i].outerHTML = "";
    }function int_add(el, e, i) {
    var html = "<div class='option' noWrap";
    if (e.value != null)
    html += " value='" + e.value + "'";
    if (e.style.cssText != null)
    html += " style='" + e.style.cssText + "'";
    html += ">";
    if (e.text != null)
    html += e.text;
    html += "</div>" if ((i == null) || (i >= el.options.length))
    i = el.options.length-1; el.options[i].insertAdjacentHTML("AfterEnd", html);
    }

    function initSized(el) {
    //alert("initSized -------->");
    var h = 0;
    el.children[0].style.display = "none"; dropdown = el.children[1];
    dropdown.style.visibility = "visible"; if (dropdown.children.length > el.size) {
    dropdown.style.overflow = "auto";
    for (var i=0; i<el.size; i++) {
    h += dropdown.children[i].offsetHeight;
    } if (dropdown.style.borderWidth != null) {
    dropdown.style.pixelHeight = h + 4; //2 * parseInt(dropdown.style.borderWidth);
    } else
    dropdown.style.height = h; } dropdown.style.border = sizedBorderCss;
    el.style.height = dropdown.style.pixelHeight;
    }function copySelected(el) {
    var selectedIndex = findSelected(el); selectedCell = el.children[0].rows[0].cells[0];
    selectedDiv  =  el.children[1].children[selectedIndex];

    selectedCell.innerHTML = selectedDiv.outerHTML;
    }
      

  2.   

    分2次试试吧,太长了。
    <style>
    .select {border: 0 inset buttonface; width: 100; font: icon; cursor: default;}
    .selected {border: 0 inset buttonface; background: window; padding: 0; font: icon;}
    .selectTable {height: 100%; width: 100%;
    border: 2 inset buttonhighlight; background: buttonface;}
    .option {font: icon; padding: 1; padding-left: 3; padding-right: 3; width: 100%;}
    .dropDown {position: absolute; visibility: hidden; width: 100%;
    border: 1 solid windowtext; padding: 0;
    background: window; color: windowtext;}
    .select .button {width: 16px; height: 5; font-family: webdings; padding: 0;
    font-size: 11px; border: 2 outset buttonhighlight;}
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function writeSelectBox(matrix, id, size, onchange, css) {
    var d = window.document;var ie4 = (document.all != null);if (ie4) {
    var s = createIEString(matrix, id, size, onchange, css);
    document.write(s);
    }
    else {
    document.write(createXString(matrix, id, size, onchange, css));
    }
    }
    function createIEString(matrix, id, size, onchange, css) {
    var str = "";
    str += '<span class="select"';
    if (size == null)
    size = 1;
    str += ' size="' + size + '"';
    if (id != null)
    str += ' id="' + id + '"';
    if (onchange != null)
    str += ' onchange="' + onchange + '"';
    if (css != null)
    str += ' style="' + css + '"';
    str += '>\n';
    str += '<table class="selectTable" cellspacing="0" cellpadding="0"\n';
    str += ' onclick="toggleDropDown(this.parentElement)">\n';
    str += '<tr>\n';
    str += '<td class="selected">&nbsp;</td>\n';
    str += '<td align="CENTER" valign="MIDDLE" class="Button"\n';   str += ' onmousedown="this.style.border=\'2 inset buttonhighlight\'"\n';   str += ' onmouseup="this.style.border=\'2 outset buttonhighlight\'">\n';
    str += '<span style="position: relative; left: 0; top: -2; width: 100%;">6</span></td>\n';
    str += '</tr>\n';
    str += '</table>\n';
    str += '<div class="dropDown" onclick="optionClick()" onmouseover="optionOver()" onmouseout="optionOut()">\n';
    for (var i=0; i<matrix.length; i++) {
    html     = matrix[i].html;
    value    = matrix[i].value;
    css      = matrix[i].css;
    selected = matrix[i].selected;
    str += '<div class="option"';
    if (value != null)
    str += ' value="' + value + '"';
    if (css != null)
    str += ' style="' + css + '"';
    if (selected != null)
    str += ' selected';
    str += '>\n';
    str += html;
    str += '</div>\n';
    }
    str += '</div>\n';
    str += '</span>\n';
    return str;
    }
    function createXString(matrix, id, size, onchange, css) {
    var str = '<form>\n';
    str += '<select';
    if (size == null)
    size = 1;
    str += ' size="' + size + '"';
    if (id != null)
    str += ' id="' + id + '"';
    if (onchange != null)
    str += ' onchange="' + onchange + '"';
    str += '>\n';
    for (var i=0; i<matrix.length; i++) {
    html     = matrix[i].html;
    value    = matrix[i].value;
    css      = matrix[i].css;
    selected = matrix[i].selected;
    str += '\n<option';
    if (value != null)
    str += ' value="' + value + '"';
    if (selected != null)
    str += ' selected';
    str += '>';
    str += stripTags(html);
    str += '</option>\n';
    }
    str += '\n</select>\n';
    str += '</form>\n';
    return str;
    }
    function stripTags(str) {
    var s = 0;
    var e = -1;
    var r = "";
    s = str.indexOf("<",e);
    do {
    r += str.substring(e + 1,s);
    e = str.indexOf(">",s);
    s = str.indexOf("<",e);
    }
    while ((s != -1) && (e != -1))
    r += str.substring(e + 1,str.length);
    return r;
    }
    function Option(html, value, css, selected) {
    this.html = html;
    this.value = value;
    this.css = css;
    this.selected = selected;
    }
    var overOptionCss = "background: highlight; color: highlighttext";
    var sizedBorderCss = "2 inset buttonhighlight";
    var globalSelect;
    var ie4 = (document.all != null);
    var q = 0;
    function initSelectBox(el) {
    copySelected(el);
    var size = el.getAttribute("size");
    el.options = el.children[1].children;
    el.selectedIndex = findSelected(el);el.remove = new Function("i", "int_remove(this,i)");
    el.item   = new Function("i", "return this.options[i]");
    el.add    = new Function("e", "i", "int_add(this, e, i)");
    el.options[el.selectedIndex].selected = true;
    dropdown = el.children[1];
    if (size != null) {
    if (size > 1) {
    el.size = size;
    dropdown.style.zIndex = 0;
    initSized(el);
    }
    else {
    el.size = 1;
    dropdown.style.zIndex = 99;
    if (dropdown.offsetHeight > 200) {
    dropdown.style.height = "200";
    dropdown.style.overflow = "auto";
    }
    }
    }
    highlightSelected(el,true);
    }
    function int_remove(el,i) {
    if (el.options[i] != null)
    el.options[i].outerHTML = "";
    }
    function int_add(el, e, i) {
    var html = "<div class='option' noWrap";
    if (e.value != null)
    html += " value='" + e.value + "'";
    if (e.style.cssText != null)
    html += " style='" + e.style.cssText + "'";
    html += ">";
    if (e.text != null)
    html += e.text;
    html += "</div>"
    if ((i == null) || (i >= el.options.length))
    i = el.options.length-1;
    el.options[i].insertAdjacentHTML("AfterEnd", html);
    }
    function initSized(el) {
    var h = 0;
    el.children[0].style.display = "none";
    dropdown = el.children[1];
    dropdown.style.visibility = "visible";
    if (dropdown.children.length > el.size) {
    dropdown.style.overflow = "auto";
    for (var i=0; i<el.size; i++) {
    h += dropdown.children[i].offsetHeight;
    }
    if (dropdown.style.borderWidth != null) {
    dropdown.style.pixelHeight = h + 4;
    }
    else
    dropdown.style.height = h;
    }
    dropdown.style.border = sizedBorderCss;
    el.style.height = dropdown.style.pixelHeight;
    }
    function copySelected(el) {
    var selectedIndex = findSelected(el);
    selectedCell = el.children[0].rows[0].cells[0];
    selectedDiv  =  el.children[1].children[selectedIndex];
    selectedCell.innerHTML = selectedDiv.outerHTML;
    }
    function findSelected(el) {
    var selected = null;
    ec = el.children[1].children;
    var ecl = ec.length;
    for (var i=0; i<ecl; i++) {
    if (ec[i].getAttribute("selected") != null) {
    if (selected == null) {
    selected = i;
    }
    else
    ec[i].removeAttribute("selected");
    }
    }
    if (selected == null)
    selected = 0;
    return selected;
    }
    function toggleDropDown(el) {
    if (el.size == 1) {
    dropDown = el.children[1];
    if (dropDown.style.visibility == "")
    dropDown.style.visibility = "hidden";
    if (dropDown.style.visibility == "hidden")
    showDropDown(dropDown);
    else
    hideDropDown(dropDown);
    }
    }
    function optionClick() {
    el = getReal(window.event.srcElement, "className", "option");
    if (el.className == "option") {
    dropdown  = el.parentElement;
    selectBox = dropdown.parentElement;
    oldSelected = dropdown.children[findSelected(selectBox)]
    if(oldSelected != el) {
    oldSelected.removeAttribute("selected");
    el.setAttribute("selected", 1);
    selectBox.selectedIndex = findSelected(selectBox);
    }
    if (selectBox.onchange != null) {
    if (selectBox.id != "") {
    eval(selectBox.onchange.replace(/this/g, selectBox.id));
    }
    else {
    globalSelect = selectBox;
    eval(selectBox.onchange.replace(/this/g, "globalSelect"));
    }
    }
    if (el.backupCss != null)
    el.style.cssText = el.backupCss;
    copySelected(selectBox);
    toggleDropDown(selectBox);
    highlightSelected(selectBox, true);
    }
    }
      

  3.   

    下半部分:
    function optionOver() {
    var toEl = getReal(window.event.toElement, "className", "option");
    var fromEl = getReal(window.event.fromElement, "className", "option");
    if (toEl == fromEl) return;
    var el = toEl;
    if (el.className == "option") {
    if (el.backupCss == null)
    el.backupCss = el.style.cssText;
    highlightSelected(el.parentElement.parentElement, false);
    el.style.cssText = el.backupCss + "; " + overOptionCss;
    this.highlighted = true;
    }
    }
    function optionOut() {
    var toEl = getReal(window.event.toElement, "className", "option");
    var fromEl = getReal(window.event.fromElement, "className", "option");
    if (fromEl == fromEl.parentElement.children[findSelected(fromEl.parentElement.parentElement)]) {
    if (toEl == null)
    return;
    if (toEl.className != "option")
    return;
    }
    if (toEl != null) {
    if (toEl.className != "option") {
    if (fromEl.className == "option")
    highlightSelected(fromEl.parentElement.parentElement, true);
    }
    }
    if (toEl == fromEl) return;
    var el = fromEl;
    if (el.className == "option") {
    if (el.backupCss != null)
    el.style.cssText = el.backupCss;
    }
    }
    function highlightSelected(el,add) {
    var selectedIndex = findSelected(el);
    selected = el.children[1].children[selectedIndex];
    if (add) {
    if (selected.backupCss == null)
    selected.backupCss = selected.style.cssText;
    selected.style.cssText = selected.backupCss + "; " + overOptionCss;
    }
    else if (!add) {
    if (selected.backupCss != null)
    selected.style.cssText = selected.backupCss;
    }
    }
    function hideShownDropDowns() {
    var el = getReal(window.event.srcElement, "className", "select");
    var spans = document.all.tags("SPAN");
    var selects = new Array();
    var index = 0;
    for (var i=0; i<spans.length; i++) {
    if ((spans[i].className == "select") && (spans[i] != el)) {
    dropdown = spans[i].children[1];
    if ((spans[i].size == 1) && (dropdown.style.visibility == "visible"))
    selects[index++] = dropdown;
    }
    }
    for (var j=0; j<selects.length; j++) {
    hideDropDown(selects[j]);
    }
    }
    function hideDropDown(el) {
    if (typeof(fade) == "function")
    fade(el, false);
    else
    el.style.visibility = "hidden";
    }
    function showDropDown(el) {
    if (typeof(fade) == "function")
    fade(el, true);
    else if (typeof(swipe) == "function")
    swipe(el, 2);
    else
    el.style.visibility = "visible";
    }
    function initSelectBoxes() {
    var spans = document.all.tags("SPAN");
    var selects = new Array();
    var index = 0;
    for (var i=0; i<spans.length; i++) {
    if (spans[i].className == "select")
    selects[index++] = spans[i];
    }
    for (var j=0; j<selects.length; j++) {
    initSelectBox(selects[j]);
    }
    }
    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;
    }
    if (ie4) {
    window.onload = initSelectBoxes;
    document.onclick = hideShownDropDowns;
    }
    window.status = "Loading fade package...";
    var fadeSteps = 4;
    var fademsec = 25;
    var fadeArray = new Array();
    function fade(el, fadeIn, steps, msec) {
    if (steps == null) steps = fadeSteps;
    if (msec == null) msec = fademsec;
    if (el.fadeIndex == null)
    el.fadeIndex = fadeArray.length;
    fadeArray[el.fadeIndex] = el;
    if (el.fadeStepNumber == null) {
    if (el.style.visibility == "hidden")
    el.fadeStepNumber = 0;
    else
    el.fadeStepNumber = steps;
    if (fadeIn)
    el.style.filter = "Alpha(Opacity=0)";
    else
    el.style.filter = "Alpha(Opacity=100)";
    }
    window.setTimeout("repeatFade(" + fadeIn + "," + el.fadeIndex + "," + steps + "," + msec + ")", msec);
    }
    function repeatFade(fadeIn, index, steps, msec) {
    el = fadeArray[index];
    c = el.fadeStepNumber;
    if (el.fadeTimer != null)
    window.clearTimeout(el.fadeTimer);
    if ((c == 0) && (!fadeIn)) {
    el.style.visibility = "hidden";
    return;
    }
    else if ((c==steps) && (fadeIn)) {
    el.style.filter = "";
    el.style.visibility = "visible";
    return;
    }
    else {
    (fadeIn) ?  c++ : c--;
    el.style.visibility = "visible";
    el.style.filter = "Alpha(Opacity=" + 100*c/steps + ")";el.fadeStepNumber = c;
    el.fadeTimer = window.setTimeout("repeatFade(" + fadeIn + "," + index + "," + steps + "," + msec + ")", msec);
    }
    }
    window.status = "";
    //-->
    </SCRIPT>
    </HEAD><BODY>
    <script> 
    topArray = new Array();
    topArray[0] = new Option('<nobr title="访问无忧脚本主页"><img src="img/home.gif" width=16 height=17 border=0 align="absmiddle"> <span style="font-family: arial black; font-style: italic; font-weight: bold;">51JS.COM</span> Home</nobr>', "http://www.51js.com");
    topArray[1] = new Option('<nobr title="JavaScript实例宝库"><img src="img/htmlicon.gif" width=16 height=16 border=0 align="absmiddle"> 脚本实例宝库</nobr>', "http://www.51js.com/js.php");
    topArray[2] = new Option('<nobr><img src="img/htmlicon.gif" width=16 height=16 border=0 align="absmiddle"> 提示资料库</nobr>', "http://www.51js.com/article.php");
    writeSelectBox(topArray, "select2", 1, "window.open(this.options[this.selectedIndex].value, '_blank')", "margin-left: 10; width: 150;");
    topArray[3] = new Option('<nobr><img src="img/htmlicon.gif" width=16 height=16 border=0 align="absmiddle"> 显示的代码 </nobr>', "/article.php");
    writeSelectBox(topArray, "select2", 1, "window.open(this.options[this.selectedIndex].value, '_blank')", "margin-left: 10; width: 150;");
    </script>
    </BODY>
    </HTML>