Archive for September, 2004

Pages (7): « First ... « 4 5 6 7

非常奇怪的问题，关于a:hover img {}

Sep 2, 2004 Author: | Filed under: Uncategorized

ie 中使用伪类（pseudo classes）来控制子标签有些问题。如

a:hover img {}

先看一下下面的几个例子，在我的 ie6.0 sp2 中，只有第四个例子有效果。但在mozzila 中都有效果。

经过一番折腾，搜索资料，终于发现这应该算是ie的bug，必须先写一些样式给 a:hover，正确写法如下：

但是上面第四个不这样写，也可以？

guoshuang20041107+如果在td里面情况就复杂了！！！指定 img border以后变化border可以，但其它不行，真是混乱不堪！：（

[Edit on 2004-11-7 23:50:04 By guoshuang]

0 Comments

js实现自动完成

Sep 1, 2004 Author: | Filed under: Uncategorized

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script> var customarray=new Array('apple','alligator','elephant','elegant', 'orange', 'pear','kingbird','kingbolt','kingcraft','kingcup','kingdom','kingfisher','kingpin'); /* ---- Variables ---- */ var actb_timeOut = -1; // Autocomplete Timeout in ms (-1: autocomplete never time out) var actb_lim = 4; // Number of elements autocomplete can show (-1: no limit) var actb_firstText = false; // should the auto complete be limited to the beginning of keyword? /* ---- Variables ---- */ /* --- Styles --- */ var actb_bgColor = '#888888'; var actb_textColor = '#FFFFFF'; var actb_hColor = '#000000'; var actb_fFamily = 'Verdana'; var actb_fSize = '11px'; var actb_hStyle = 'text-decoration:underline;font-weight="bold"'; /* --- Styles --- */ /* ---- Constants ---- */ var actb_keywords = new Array(); var actb_display = false; var actb_pos = 0; var actb_total = 0; var actb_curr = null; var actb_rangeu = 0; var actb_ranged = 0; var actb_bool = new Array(); var actb_pre = 0; var actb_toid; var actb_tomake = false; /* ---- Constants ---- */ function actb_parse(n){ var t = escape(actb_curr.value); var tobuild = ''; var i; if (actb_firstText){ var re = new RegExp("^" + t, "i"); }else{ var re = new RegExp(t, "i"); } var p = n.search(re); for (i=0;i <p;i++){ tobuild += n.substr(i,1); } tobuild += "" for (i=p;i<t.length+p;i++){ tobuild += n.substr(i,1); } tobuild += ""; for (i=t.length+p;i<n.length;i++){ tobuild += n.substr(i,1); } return tobuild; } function actb_generate(){ if (document.getElementById('tat_table')) document.body.removeChild(document.getElementById('tat_table')); a = document.createElement('table'); a.cellSpacing='1px'; a.cellPadding='2px'; a.style.position='absolute'; a.style.top = eval(curTop() + actb_curr.offsetHeight) + "px"; a.style.left = curLeft() + "px"; a.style.backgroundColor=actb_bgColor; a.id = 'tat_table'; document.body.appendChild(a); var i; var first = true; var j = 1; var counter = 0; for (i=0;i<actb_keywords.length;i++){ if (actb_bool[i]){ counter++; r = a.insertRow(-1); if (first && !actb_tomake){ r.style.backgroundColor = actb_hColor; first = false; actb_pos = counter; }else if(actb_pre == i){ r.style.backgroundColor = actb_hColor; first = false; actb_pos = counter; }else{ r.style.backgroundColor = actb_bgColor; } r.id = 'tat_tr'+(j); c = r.insertCell(-1); c.style.color = actb_textColor; c.style.fontFamily = actb_fFamily; c.style.fontSize = actb_fSize; c.innerHTML = actb_parse(actb_keywords[i]); c.id = 'tat_td'+(j); j++; } if (j - 1 == actb_lim && j < actb_total){ r = a.insertRow(-1); r.style.backgroundColor = actb_bgColor; c = r.insertCell(-1); c.style.color = actb_textColor; c.style.fontFamily = 'arial narrow'; c.style.fontSize = actb_fSize; c.align='center'; c.innerHTML = '\/'; break; } } actb_rangeu = 1; actb_ranged = j-1; actb_display = true; if (actb_pos <= 0) actb_pos = 1; } function curTop(){ actb_toreturn = 0; obj = actb_curr; while(obj){ actb_toreturn += obj.offsetTop; obj = obj.offsetParent; } return actb_toreturn; } function curLeft(){ actb_toreturn = 0; obj = actb_curr; while(obj){ actb_toreturn += obj.offsetLeft; obj = obj.offsetParent; } return actb_toreturn; } function actb_remake(){ document.body.removeChild(document.getElementById('tat_table')); a = document.createElement('table'); a.cellSpacing='1px'; a.cellPadding='2px'; a.style.position='absolute'; a.style.top = eval(curTop() + actb_curr.offsetHeight) + "px"; a.style.left = curLeft() + "px"; a.style.backgroundColor=actb_bgColor; a.id = 'tat_table'; document.body.appendChild(a); var i; var first = true; var j = 1; if (actb_rangeu > 1){ r = a.insertRow(-1); r.style.backgroundColor = actb_bgColor; c = r.insertCell(-1); c.style.color = actb_textColor; c.style.fontFamily = ‘arial narrow’; c.style.fontSize = actb_fSize; c.align=’center’; c.innerHTML = ‘/\’; } for (i=0;i<actb_keywords.length;i++){ if (actb_bool[i]){ if (j >= actb_rangeu && j <= actb_ranged){ r = a.insertRow(-1); r.style.backgroundColor = actb_bgColor; r.id = 'tat_tr'+(j); c = r.insertCell(-1); c.style.color = actb_textColor; c.style.fontFamily = actb_fFamily; c.style.fontSize = actb_fSize; c.innerHTML = actb_parse(actb_keywords[i]); c.id = 'tat_td'+(j); j++; }else{ j++; } } if (j > actb_ranged) break; } if (j-1 < actb_total){ r = a.insertRow(-1); r.style.backgroundColor = actb_bgColor; c = r.insertCell(-1); c.style.color = actb_textColor; c.style.fontFamily = 'arial narrow'; c.style.fontSize = actb_fSize; c.align='center'; c.innerHTML = '\/'; } } function actb_goup(){ if (!actb_display) return; if (actb_pos == 1) return; document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_bgColor; actb_pos--; if (actb_pos < actb_rangeu) actb_moveup(); document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_hColor; if (actb_toid) clearTimeout(actb_toid); if (actb_timeOut > 0) actb_toid = setTimeout(”actb_removedisp()”,actb_timeOut); } function actb_godown(){ if (!actb_display) return; if (actb_pos == actb_total) return; document.getElementById(’tat_tr’+actb_pos).style.backgroundColor = actb_bgColor; actb_pos++; if (actb_pos > actb_ranged) actb_movedown(); document.getElementById(’tat_tr’+actb_pos).style.backgroundColor = actb_hColor; if (actb_toid) clearTimeout(actb_toid); if (actb_timeOut > 0) actb_toid = setTimeout(”actb_removedisp()”,actb_timeOut); } function actb_movedown(){ actb_rangeu++; actb_ranged++; actb_remake(); } function actb_moveup(){ actb_rangeu–; actb_ranged–; actb_remake(); } function actb_penter(){ if (!actb_display) return; actb_display = 0; var word = ”; var c = 0; for (var i=0;i<=actb_keywords.length;i++){ if (actb_bool[i]) c++; if (c == actb_pos){ word = actb_keywords[i]; break; } } a = word;//actb_keywords[actb_pos-1];//document.getElementById('tat_td'+actb_pos).; actb_curr.value = a; actb_removedisp(); } function actb_removedisp(){ actb_display = 0; if (document.getElementById('tat_table')) document.body.removeChild(document.getElementById('tat_table')); if (actb_toid) clearTimeout(actb_toid); } function actb_checkkey(evt){ a = evt.keyCode; if (a == 38){ // up key actb_goup(); }else if(a == 40){ // down key actb_godown(); }else if(a == 13){ actb_penter(); } } function actb_tocomplete(sndr,evt,arr){ if (arr) actb_keywords = arr; if (evt.keyCode == 38 || evt.keyCode == 40 || evt.keyCode == 13) return; var i; if (actb_display){ var word = 0; var c = 0; for (var i=0;i<=actb_keywords.length;i++){ if (actb_bool[i]) c++; if (c == actb_pos){ word = i; break; } } actb_pre = word;//actb_pos; }else{ actb_pre = -1}; if (!sndr) var sndr = evt.srcElement; actb_curr = sndr; if (sndr.value == ''){ actb_removedisp(); return; } var t = sndr.value; if (actb_firstText){ var re = new RegExp("^" + t, "i"); }else{ var re = new RegExp(t, "i"); } actb_total = 0; actb_tomake = false; for (i=0;i<actb_keywords.length;i++){ actb_bool[i] = false; if (re.test(actb_keywords[i])){ actb_total++; actb_bool[i] = true; if (actb_pre == i) actb_tomake = true; } } if (actb_toid) clearTimeout(actb_toid); if (actb_timeOut > 0) actb_toid = setTimeout(”actb_removedisp()”,actb_timeOut); actb_generate(actb_bool); } </script> </head> <body> <h1>Auto-Completing Textbox Demo</h1> <input type='textbox' onblur='actb_removedisp()' onkeydown='actb_checkkey(event);' onkeyup='actb_tocomplete(this,event,customarray)' value=''/> (’apple’,'alligator’,'elegant’,'elephant’,'orange’,'pear’,'kingbird’,'kingbolt’,'kingcraft’,'kingcup’,'kingdom’,'kingfisher’,'kingpin’) </body> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[Edit on 2004-9-1 11:12:33 By guoshuang]

0 Comments

菜单树小例子

Sep 1, 2004 Author: | Filed under: Uncategorized

<head> <script> if (!document.getElementById) document.getElementById = function() { return null; } function initializeMenu(menuId, actuatorId) { var menu = document.getElementById(menuId); var actuator = document.getElementById(actuatorId); if (menu == null || actuator == null) return; //if (window.opera) return; // I'm too tired actuator.parentNode.style.backgroundImage = "url(/images/plus.gif)"; actuator.onclick = function() { var display = menu.style.display; this.parentNode.style.backgroundImage = (display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)"; menu.style.display = (display == "block") ? "none" : "block"; return false; } } window.onload = function() { initializeMenu("productsMenu", "productsActuator"); initializeMenu("newPhonesMenu", "newPhonesActuator"); initializeMenu("compareMenu", "compareActuator"); } </script> <style> body { font-family: verdana, helvetica, arial, sans-serif; } #mainMenu { background-color: #EEE; border: 1px solid #CCC; color: #000; width: 203px; } #menuList { margin: 0px; padding: 10px 0px 10px 15px; } li.menubar { background: url(/images/plus.gif) no-repeat 0em 0.3em; font-size: 12px; line-height: 1.5em; list-style: none outside; } .menu, .submenu { display: none; margin-left: 15px; padding: 0px; } .menu li, .submenu li { background: url(/images/square.gif) no-repeat 0em 0.3em; list-style: none outside; } a.actuator { background-color: transparent; color: #000; font-size: 12px; padding-left: 15px; text-decoration: none; } a.actuator:hover { text-decoration: underline; } .menu li a, .submenu li a { background-color: transparent; color: #000; font-size: 12px; padding-left: 15px; text-decoration: none; } .menu li a:hover, submenu li a:hover { /*border-bottom: 1px dashed #000;*/ text-decoration: underline; } span.key { text-decoration: underline; } </style> </head> <body> <div id="mainMenu"> <ul id="menuList"> <li class="menubar"> <a href="#" id="productsActuator" class="actuator">Phones</a> <ul id="productsMenu" class="menu"> <li> <a href="#" id="newPhonesActuator" class="actuator">New Phones</a> <ul id="newPhonesMenu" class="submenu"> <li><a href="#">9290</a></li> <li><a href="#">8390</a></li> <li><a href="#">8290</a></li> <li><a href="#">8270</a></li> </ul> </li> <li> <a href="#" id="compareActuator" class="actuator">Compare</a> <ul id="compareMenu" class="submenu"> <li><a href="#">All Phones</a></li> <li><a href="#">Service Provider</a></li> </ul> </li> </ul> </li> </ul></div> </body> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

0 Comments

对于那些无休止的要求字体大一些再大一些的客户，你可以这样…

Sep 1, 2004 Author: | Filed under: Uncategorized

Do you have poor eyesight? Do you have a fuzzy monitor?

This Web site is designed to support you.

Every page on this Web site supports text scaling.

——————————————————————————–

Internet Explorer Users

Select View in the Browser Menu.

Then Select Text Size

Then Select Larger or Largest

——————————————————————————–

Netscape Navigator Users

Select View in the Browser Menu

Then Select Increase Font

——————————————————————————–

Netscape Communicator Users

Select View in the Browser Menu

Then Select Increase Font

——————————————————————————–

Netscape 6.0 Users

Select View in the Browser Menu

Then Select Text Size

——————————————————————————–

来自： http://www.w3schools.com/largetext.htm

0 Comments

Pages (7): « First ... « 4 5 6 7

Flickr PhotoStream

郭爽的网页设计资料

Archive for September, 2004

非常奇怪的问题，关于a:hover img {}

js实现自动完成

菜单树小例子

对于那些无休止的要求字体大一些再大一些的客户，你可以这样…

Flickr PhotoStream

Recent Posts

Recent Comments

Pages

Categories

Tags

Archives

Blogroll

Meta

Advertising

Most Popular

Recent Comments

Latest Entries