很遗憾，即使是 opera 也不支持 css3 的 background-size，还能指望谁呢？：（

</p> <p><img src="images/top17.jpg" /></p> <div style="background-image:url(images/top17.jpg);background-size:50%;background-origin: content;width:709px;height:140px;">111</div> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

所以只能采用 z-index 来模拟背景。

</p> <p>test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! test!!!!!! </p> <div style="width:300px;height:70px;position:absolute;z-index:-1;top:0px;"><img src="images/top17.jpg" width="100%" height="100%" /></div> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

注意：opera 在缩放图片的时候使用的是 bi-linear（双线性），而其他浏览器用的是 nearest-neighbor。如果你不清楚二者的区别，可以搜索相关资料。一般做图软件（photoshop,firefox）缩放图片时默认的算法就是bi-linear，质量较好。nearest-neighbor 质量差，速度快，但有一种特殊用途就是放大像素图，不产生抖动或者说高斯模糊。自己搜吧，这不是讲图片设计的地方。

作为表单交互设计的一个基本元素，accesskey属性在windows面板中使用得很多，可我们的程序员们却都对它不感兴趣，当然这和我们的非拼音文字有很大的关系。但如果是类似电信营业、财务等需要大量录入的系统，只用鼠标显然是愚蠢的。当然 tab 和→←↑↓也可以满足很多需求。简单地理解就是 — 没有鼠标，一样也可以自由的在网页中穿行。

下面只说 accesskey

</p> <p><label for="oName" accesskey="n">姓名：<br /> <input id="oName" name="oName" /></label></p> <p><a href="#1" accesskey="g" onclick="alert('hi!im guoshuang.')">guoshuang</a></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

在windows中，按 alt+n 键切换焦点到 oName 表单域中；Mac，按 ctrl+n；opera 是个特例，需要 shift+ESC+n 。

类似地，链接也可以通过这样的操作来获得（甚至直接触发）焦点。

当然，用户不可能看源代码去找这个 accesskey，所以我们需要在表单中注明：

</p> <style type="text/css"> <p>.em {color:#c00;text-decoration:underline;}</p> <p>input:focus {background:#efe}</p> </style> <form> <p><label for="oName" accesskey="n">姓名(<span class="em">n</span>)：<br /> <input id="oName" name="oName" /></label></p> </form> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

进一步,可以通过样式表 :after 来减少代码量。很遗憾，IE 6 看不到效果。

</p> <style type="text/css"> <p>a {text-decoration:none;color:#333;}</p> <p>a:hover {background:#fee}</p> <p>a:focus {background:#efe}</p> <p>a[accesskey]:after {content:” (”attr(accesskey)”)”;color:#600;font-size:smaller}</p> </style> <p><a href="#1" accesskey="h" onclick="alert('back home!')">Home</a></p> <p><a href="#1" accesskey="g" onclick="alert('guoshuang blog?')">Blog</a></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

这里有个小问题需要解释一下。很多采用网页新标准的 blog 会使用 1,2,3…做为主导航的 accesskey，这在opera下面会有问题，因为 opera 的功能键是 shift+ESC，因为shift所以 1 不起作用，！可以。用opera看下面小例子，其它浏览器没有这个问题。

</p> <p><a href="#1" accesskey="1" onclick="alert('accesskey is 1.')">guoshuang 1</a></p> <p><a href="#1" accesskey="!" onclick="alert('accesskey is !.')">guoshuang !</a></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

还可以通过 title 来提示用户可使用的 accesskey

</p> <p><a href="#1" accesskey="g" onclick="alert('accesskey is 1.')" title="g">guoshuang 1</a></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

为了代码更漂亮更简洁,可以js 来自动装换 accesskey -> title，这是导航菜单

</p> <p><base target="_blank"></p> <style type="text/css"> <p>* {font:12px/130% tahoma,sans-serif;}</p> <p>a {text-decoration:none;color:#630;border-right:solid 1px #999;padding-right:4px;padding-left:3px;}</p> <p>a:hover {background:#fee}</p> <p>a:focus {background:#efe}}</p> </style> <p><a href="index.asp" accesskey="i">首页</a></p> <p><a href="index.asp?vt=bycat&cat_id=31" accesskey="c">脚本代码</a></p> <p><a href="index.asp?vt=bycat&cat_id=32" accesskey="w">工作日志</a></p> <p><a href="index.asp?vt=bycat&cat_id=37" accesskey="b">BT文化</a></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

加入提示效果后：

</p> <p><base target="_blank"></p> <style type="text/css"> <p>* {font:12px/130% tahoma,sans-serif;}</p> <p>a {text-decoration:none;color:#630;border-right:solid 1px #999;padding-right:4px;padding-left:3px;}</p> <p>a:hover {background:#fee}</p> <p>a:hover:after {content:" ("attr(accesskey)")";font-size:10px;color:#999;}</p> <p>a:focus {background:#efe}}</p> </style> <p><a href="index.asp" accesskey="i">首页</a></p> <p><a href="index.asp?vt=bycat&cat_id=31" accesskey="c">脚本代码</a></p> <p><a href="index.asp?vt=bycat&cat_id=32" accesskey="w">工作日志</a></p> <p><a href="index.asp?vt=bycat&cat_id=37" accesskey="b">BT文化</a></p> <p><script></p> <p>function ua(str){</p> <p>haveUa=navigator.userAgent.toLowerCase().indexOf(str)+1;</p> <p>return haveUa;</p> <p>}</p> <p>window.onload=function(){</p> <p>if (document.getElementsByTagName){</p> <p>oLinks=document.getElementsByTagName("a");</p> <p>for(i=0;i<oLinks.length;i++){</p> <p> if(ua("opera")){</p> <p> oLinks[i].setAttribute("title","快捷方式：Shift+Esc+"+oLinks[i].getAttribute("accesskey"))</p> <p> }else if(ua("mac")){</p> <p> oLinks[i].setAttribute("title","快捷方式：Ctrl+"+oLinks[i].getAttribute("accesskey"))</p> <p> }else if(ua("win")){</p> <p> oLinks[i].setAttribute("title","快捷方式：Alt+"+oLinks[i].getAttribute("accesskey"))</p> <p> }</p> <p> }</p> <p>}</p> <p>}</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

受dodo老人家启发…实际应用中，可能远比这复杂…

</p> <style type="text/css"> <p>* {font:12px tahoma,sans-serif}</p> <p>body {margin:10px;}</p> <p>form {margin:0;}</p> <p>fieldset {border:solid 1px #ccc;padding-bottom:10px;}</p> <p>label {display:block;width:300px;text-align:right;margin-bottom:1px;}</p> <p>label input,label textarea {width:200px;border:solid 1px #999;}</p> <p>textarea {vertical-align:top}</p> <p>#sbutton {margin-left:100px;width:60px;}</p> <p>.em {color:#c00}</p> <p>input:hover,textarea:hover {background-color:#efe;border:solid 1px #999;}</p> <p>input:focus,textarea:focus {background-color:#eee;border:solid 1px;border-color:#666 #eee #eee #666}</p> </style> <form> <p><fieldset><legend>一般信息</legend></p> <p><label for="user" accesskey="n">姓名(<span class="em">n</span>)：<br /> <input type="text" name="user" id="user" value="" /></label></p> <p><label for="email" accesskey="e">邮件(<span class="em">e</span>)：<br /> <input type="text" name="email" id="email" value="" /></label></p> <p><label for="comment" accesskey="c">备注内容(<span class="em">c</span>)：<textarea name="comment" id="comment">

确定

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

http://blog.94smart.com/index.php?q=node/256

http://www.kenlee.cn/index.php?job=art&articleid=a_20050614_031309

路径重定向以及tag 提示，代码很有意思，虽然看得人头疼…回头拉住zdg，一定要问个痛快。

</p> <p>var alltags = {”新闻”:{x:1,y:243},”互联网”:{x:58,y:164},”webdesign”:{x:1874,y:153},”blog”:{x:47,y:72},”Firefox”:{x:110,y:71},”Linux”:{x:184,y:45},”生活”:{x:8,y:31},”软件使用”:{x:113,y:25},”CSS”:{x:137,y:22},”opera”:{x:3426,y:13},”war3″:{x:2082,y:11},”Windows”:{x:384,y:11},”娱乐”:{x:2,y:7},”唐都房”:{x:3104,y:6},”私有”:{x:9,y:2},”test”:{x:344,y:2},”rdf”:{x:2098,y:2},”uidesign”:{x:3310,y:2},”Wiki”:{x:152,y:2},”RSS”:{x:435,y:2},”IT”:{x:5,y:1},”历史”:{x:421,y:1},”Feed”:{x:382,y:1},”browser”:{x:2497,y:1},”ajax”:{x:5144,y:1},”其他”:{x:10,y:0},”财经”:{x:4,y:0},”文化”:{x:7,y:0},”体育”:{x:3,y:0},”军事”:{x:6,y:0}};var tagselected = []</p> <p> </script></p> <p> <script type="text/javascript" src="/include/post.js"></script></p> <p>

</p> <p>String.prototype.trim = function(){ return this.replace(/^s+|s+$/g,”) }</p> <p>String.prototype.escRegExp = function(){ return this.replace(/[\$*+?()=!|,{}[].^]/g,’\$&’) }</p> <p>String.prototype.unescHtml = function(){ var i,t=this; for(i in e) t=t.replace(new RegExp(i,’g'),e[i]); return t }</p> <p>function Suggestions() { this.length=0; this.picked=0 }</p> <p>var suggestions = new Suggestions()</p> <p>var tagSearch=’ ‘, lastEdit=”</p> <p>var h={}, sections=[{},{},{},{},{}], selected={}, currentTag={}, e={’<':'<','>‘:’>',’&':’&',’”‘:’”‘}</p> <p>function init() { var elements = ['suggest','newTags','Tags'], t,i</p> <p> for(i in elements) h[elements[i]] = document.getElementById(elements[i])</p> <p> for(t in alltags) {</p> <p> tagSearch += t + ‘ ‘</p> <p> var tagid = alltags[t]['x']</p> <p> var id = alltags[t]['y']</p> <p> var title = t+’['+id+']‘</p> <p> var sel = false</p> <p> for (j in tagselected) {</p> <p> if (tagid==tagselected[j]) { sel=true; break;}</p> <p> }</p> <p> if (sel){ h.Tags.options.add(new Option(title,tagid),0);h.Tags.options[0].selected=true}</p> <p> else{ h.Tags.options.add(new Option(title,tagid));}</p> <p> } </p> <p> document.onkeydown = document.onkeypress = document.onkeyup = handler</p> <p> updateHilight()</p> <p>}</p> <p>function makeTag(parent, tag, js) {</p> <p> parent.appendChild(document.createTextNode(’ ‘))</p> <p> var obj = document.createElement(’a')</p> <p> obj.className = ‘tag’</p> <p> obj.setAttribute(’href’,'javascript:’+js+’(”‘+tag.replace(/”/g,’\”‘)+’”)’)</p> <p> obj.appendChild(document.createTextNode(tag))</p> <p> if(alltags[tag] < 2) obj.style.color = '#66f'</p> <p> if(alltags[tag] == 2) obj.style.color = '#44f'</p> <p> parent.appendChild(obj)</p> <p> return obj</p> <p>}</p> <p>function select(t) { var i; t=t.toLowerCase()</p> <p> selected[t] = true; for(i in sections) if(sections[i][t]) sections[i][t].className = 'tag selected'</p> <p>}</p> <p>function deselect(t) { var i; t=t.toLowerCase()</p> <p> delete selected[t]; for(i in sections) if(sections[i][t]) sections[i][t].className = 'tag'</p> <p>}</p> <p>function complete(tag) { var tagArray=h.newTags.value.split(' ')</p> <p> if(typeof tag == 'undefined') tag = suggestions[suggestions.picked].innerHTML.unescHtml() // tab complete rather than click complete</p> <p> tagArray[currentTag.index] = tag</p> <p> var text = tagArray.join(' ')</p> <p> h.newTags.value = (text.substr(-1,1) == ' ' ? text : text + ' ' )</p> <p> hideSuggestions()</p> <p> updateHilight()</p> <p> focusTo(h.newTags)</p> <p>}</p> <p>// focus the caret to end of a form input (+ optionally select some text)</p> <p>var range=0 //ie</p> <p>function focusTo(obj, selectFrom) {</p> <p> if (typeof selectFrom == 'undefined') selectFrom = obj.value.length</p> <p> if(obj.createTextRange){ //ie + opera</p> <p> if (range == 0) range = obj.createTextRange()</p> <p> range.moveEnd("character",obj.value.length)</p> <p> range.moveStart("character",selectFrom)</p> <p> obj.select()</p> <p> range.select()</p> <p> setTimeout('range.select()', 10) // must use a timer to get around bullshit ie bug</p> <p> } else if (obj.setSelectionRange){ //ff</p> <p> obj.select()</p> <p> obj.setSelectionRange(selectFrom,obj.value.length)</p> <p> } else { //safari <img src='http://webdesign.guoshuang.com/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /><br /> obj.blur()</p> <p>}}</p> <p>function updateHilight() {</p> <p> var tagArray=h.newTags.value.toLowerCase().split(' '), tagHash={}</p> <p> if (tagArray[0].trim() == '') tagArray.splice(0,1);</p> <p> for (t in tagArray) {</p> <p> if(tagArray[t] != '') {</p> <p> select(tagArray[t])</p> <p> tagHash[tagArray[t]] = true</p> <p> }}</p> <p> for (t in selected) {if (!tagHash[t]) deselect(t)}</p> <p> return [tagArray, tagHash]</p> <p>}</p> <p>function hideSuggestions() {h.suggest.parentNode.style.visibility='hidden'}</p> <p>function showSuggestions() { suggest(0); h.suggest.parentNode.style.visibility='visible'}</p> <p>function updateSuggestions() {</p> <p> if(!getCurrentTag() || !currentTag.text) { hideSuggestions(); return false }</p> <p> while (h.suggest.hasChildNodes()) h.suggest.removeChild(h.suggest.firstChild)</p> <p> delete suggestions; suggestions = new Suggestions();</p> <p> var tagArray = h.newTags.value.toLowerCase().split(' '), txt=currentTag.text.escRegExp(), tagHash={}, t</p> <p> for(t in tagArray) tagHash[tagArray[t]] = true</p> <p> var search = tagSearch.match(new RegExp(("\s("+txt+"[^\s]+)\s"), "gi"))</p> <p> if(search){</p> <p> for (i=0; i<search.length && suggestions.length<10; i++) {</p> <p> tl = search[i].trim()</p> <p> if(tagHash[tl]) continue // do not suggest already typed tag</p> <p> suggestions[suggestions.length] = makeTag(h.suggest, tl, 'complete')</p> <p> suggestions.length++</p> <p> }}</p> <p> if (suggestions.length > 0) showSuggestions()</p> <p> else hideSuggestions()</p> <p>}</p> <p>function suggest(index) {</p> <p> if(suggestions.length == 1) index = 0</p> <p> if(suggestions[suggestions.picked]) suggestions[suggestions.picked].className = ‘tag’</p> <p> suggestions[suggestions.picked = index].className = ‘tag selected’</p> <p>}</p> <p>function getCurrentTag() {</p> <p> if(h.newTags.value == lastEdit) return true // no edit</p> <p> if(h.newTags == ”) return false</p> <p> currentTag = {}</p> <p> var tagArray=h.newTags.value.toLowerCase().split(’ ‘), oldArray=lastEdit.toLowerCase().split(’ ‘), currentTags = [], matched=false, t,o</p> <p> for (t in tagArray) {</p> <p> for (o in oldArray) {</p> <p> if(typeof oldArray[o] == ‘undefined’) { oldArray.splice(o,1); break }</p> <p> if(tagArray[t] == oldArray[o]) { matched = true; oldArray.splice(o,1); break; }</p> <p> }</p> <p> if(!matched) currentTags[currentTags.length] = t</p> <p> matched=false</p> <p> }</p> <p> // more than one word changed… abort</p> <p> if(currentTags.length > 1) { hideSuggestions(); return false }</p> <p> currentTag = { text:tagArray[currentTags[0]], index:currentTags[0] }</p> <p> return true</p> <p>}</p> <p>function handler(event) { var e=(event||window.event) //w3||ie</p> <p> if (e.type == ‘keydown’) {</p> <p> if(suggestions.length > 0) {</p> <p> switch(e.keyCode) {</p> <p> case 38: suggest((suggestions.picked + 1) % suggestions.length); break</p> <p> case 40: suggest(suggestions.picked == 0 ? suggestions.length - 1 : suggestions.picked - 1); break</p> <p> }}} else if (e.type == ‘keypress’) {</p> <p> switch(e.keyCode){</p> <p> case 38: case 40:</p> <p> if(e.preventDefault) e.preventDefault() //ff</p> <p> break;</p> <p> case 9: // tab</p> <p> if (e.preventDefault && h.suggest.parentNode.style.visibility == ‘visible’) { //ff</p> <p> complete()</p> <p> e.preventDefault()</p> <p> }</p> <p> break;</p> <p> default: lastEdit = h.newTags.value</p> <p> }} else if (e.type == ‘keyup’) {</p> <p> updateHilight()</p> <p> switch(e.keyCode) {</p> <p> //case 8: //backspace</p> <p> //case 46: //delete</p> <p> case 35: //end</p> <p> case 36: //home</p> <p> case 39: // right</p> <p> case 37: // left</p> <p> case 32: // space</p> <p> hideSuggestions(); break</p> <p> case 38: case 40: break;</p> <p> case 9:</p> <p> if(!e.preventDefault && h.suggest.parentNode.style.visibility == ‘visible’) complete() //ie</p> <p> break;</p> <p> default: updateSuggestions()</p> <p>}}}</p> <p>

Many people have asked for a way to do address completion using Ctrl+Enter a la IE. Well, thanks to the investigative work of Lee Harvey, Steven V. Gunhouse, and Lauri Raittila from the Opera newsgroups, we now have a good way to do this.

In the keyboard editor, go to the Document window section and add a new shortcut for “enter ctrl”. Then, enter the command

Search, “http://www.%s.com/”

Now, this shouldn’t interfere with Wand, as long as focus is in the address bar.

You can also add commands for other address endings, like .net, .org, .co.uk, etc. Enjoy!

相关资料:

http://weblog.timaltman.com/node/750?PHPSESSID=a7416a2b3e7c78e02f14873cf9fde2db

http://groups-beta.google.com/group/opera.customize.general/msg/54d4232a26751d4e?safe=images&as_umsgid=cq6icn%24iiq%241@mx1.opera.com&lr=lang_en&hl=en

Well, it’s that time again. Here are my favorite changes in Opera 8.0 Beta 3:

SVG 1.1 Tiny support. Need I say more?

All protocols can be redirected to other applications. IRC://, NNTP://, and news:// URLs can now be set to open with other applications. And, if you run a standalone Opera Mail installation, hxxp:// and hxxps:// URLs can be redirected to your browser installation![1]

The “Title” setting in the [User Prefs] section of opera6.ini can now contain a “%t” variable, which will be the page title. In other words, you can set the order that information appears in the Title bar. If you want the Opera build number first, use something like “Title=Opera 8.0.%s - %t”. If “%t” is left out, the title will show before the custom Title setting.

Save attachments dialog. At long last, you can save multiple attachments to messages quickly. There are still several rough spots in attachment handling, but things are definitely getting better.

The bug where “$” couldn’t be used in search strings is fixed. I do a lot of message-id searches in Google Groups, which often triggered this bug. It’s so nice to have one more annoyance gone.

Improved collapsed address bar. If a page opens a pop-up without an address bar, the pop-up will now have a small bar at the top that shows the hostname and security information (if any) for the page. I’m starting to wish that it worked on all pages, not just pop-ups.

Various prototype objects are now available to scripts. I really don’t know what this means, but some of our testers were pretty excited about it.

Better form styling. We fixed a couple of bugs with the way form elements are styled, so things are working better and are more consistent with other browsers.

Display notifiers immediately if special effects are turned off. If you’re annoyed by the slow rising and falling of the notification dialogs, but still want to know when stuff is happening, you can disable skin special effects[2] and notifications show briefly, then vanish without all the scrolling.

New preferences dialog. The new dialog has better organization and will probably be less daunting for new users. Some stuff that should have stayed didn’t, though.

[1] Admittedly, there’s a slight problem with this: if you open a link from an e-mail, a blank page is still opened even if the link is sent to another application. So, it may not be a complete solution yet, but it’s a large step in the right direction.

[2] Unfortunately, that setting is currently only available by messing with opera6.ini. Set “Special effects=0″ in the [User Prefs] section of opera6.ini to try it out. Note that this setting affects some skin styles, too.

from:

http://weblog.timaltman.com/node/760?PHPSESSID=a7416a2b3e7c78e02f14873cf9fde2db