改变样式表翻译: QQlan
IE中具有革命性的DOM(Document Object Model) ,允许几乎所有的样式表元素都可具有在认可情况下可读和可写. 这使IE 4.0的 Dynamic HTML实现很多高级功能. 现在的5.0在这方面也更加加强了. 我们可以通过一些技巧,使用不同的样式表在Netscape 4.0 中document.wtite()新的层. 这也是我们的教程所围绕的话题.
改变层的背景色 在netscape中, 要想改变层的背景色, 你必须在document object中设定背景色属性:
document.layer["layerName"].document.bgColor = "red" 而IE中, 只要对层直接设定背景色:
document.all["layerName"].style.backgroundColor = "red" 因此, 跨borwser的function如下:
function setBGColor(id,nestref,color) {
if (ns4) {
var lyr = (nestref)? eval('document.'+nestref+'.document.'+id):document.layers[id]
lyr.document.bgColor = color
}
else if (ie4) {
document.all[id].style.backgroundColor = color
}
}
查看范例:http://www.dansteinman.com/dynduo/examples/bgcolor1.html (改变层的背景色.)
字体颜色 在IE中改变层的背景色, 简单的让人晕死过去. 只要简单的改变该元素的CSS颜色属性.
document.all[id].style.color = "#FF0000" 但是在Netscape中, 需要用不同的方法由document.write() 重写一个层. 一个工作的比较好的方法是用传统的FONT标签:
My Text
然后使用layer Write() function 重新定义层一个新的颜色:
layerWrite('mytext',null,'My Text') 当然我们也可以超越这一点完全抛弃FONT标签. 比较普遍的用法是预置样式表:
现在, 要用SPAN标签代替上例的FONT标签.
My Text
然后javascript function把CSS CLASS做为选项来重写一个层:
function mytextColor(color) {
layerWrite('mytext',null,'My Text')
}
现在可以用下面的命令调用这个function:
mytextColor('orange')
mytextColor('green')
查看范例:http://www.dansteinman.com/dynduo/examples/fontcolor1.html (改变字体颜色)
文本翻转 改变字体颜色的初衷是为了使用文字翻转代替图象翻转. 现在已经成功的完成了这个功能. 虽然, 源代码不够完美, 看上去有写丑陋, 有时候效果完成的也不时很好... 但是我想让大家了解一开始的编写思路, 让大家学会如何解决这些进程中的问题, 非常重要.
象字体颜色的例子类似, 只是手工编写了我需要的样式表. 这个例子中, 创建了4个层, 当你鼠标移上去或者移开是, 层内的链接的颜色会相应改变.
以上只是一个演示, 下面给层增加链接和名字:
注意链接中只使用了 onMouseOver 事件. 这是个窍门. 先是用onMouseOver, 一旦链接的颜色改变以后, 用onMouseOut重新替换层的内容.这样就不用再担心层的顺序问题.
还有一个独立的javascript function来处理链接的状态:
function linkOver(id,link,text) {
layerWrite(id,null,''+text+'')
}
function linkOut(id,link,text) {
layerWrite(id,null,''+text+'')
}
链接的格式是一样的, 所以只要写上 layerName (id), hyperlink location (link), 和需要显示的文本, 变量.
查看范例:
www.dansteinman.com/dynduo/examples/textrollover1.html (文本翻转)
(译者语: 当然如果你放弃Netscript, 你可以仅仅使用CSS STYLE, 非常简单的实现链接的变色.)
可是, 这段代码在Netscape中的效果不是很好. 当你在两个链接之间切换的太快的时候onMouseOut 就不能被激活. 你需要再次检查链接是否处于move on 状态. 因此我决定对代码作些修改. 建立一个2-dimensional 阵列通过层的名字,链接,文本和标记(true/false)来逐个指出层是否高亮.
link = new Array()
link[0] = new Array('link0Div','link1.html','Link 1',false)
link[1] = new Array('link1Div','link2.html','Link 2',false)
link[2] = new Array('link2Div','link3.html','Link 3',false)
link[3] = new Array('link3Div','link4.html','Link 4',false)
现在我们可以通过数字(0,1,2,3)访问层或者链接. 只要用链接[X][0]表示层的名字. [X][1]表示超链,等等. 这里X表示链接的数字符号.
linkOver() 和 linkOut() functions 也要随之改变. 这些function中我给link[x][3]加了一行控制标记-- true表示"on", false表示"off". 这个也是Netscape的问题所在. 现在的办法是当调用onMouseOver之前先进行一个小小的检查(现在是linkOn()function),它通过一个循环来检查没个链接的标记,如果是true那么自动调用linkOut() function, 反之调用link off.
function linkOver(num) {
if (ns4) {
for (var i=0;i if (link[i][3]==true) linkOut(i)
}
}
link[num][3] = true
layerWrite(link[num][0],null,''+link[num][2]+'')
}
function linkOut(num) {
link[num][3] = true
layerWrite(link[num][0],null,''+link[num][2]+'')
}
这些链接的HTML链接也需要被更新 -- linkOver()和linkOut()functions
现在我们拥有了一个工作出色的文本翻转.
查看范例:
www.dansteinman.com/dynduo/examples/textrollover2.html (文本链接翻转范例)
当然, 这个技术不仅仅用于颜色的改变, 你可以通过改变CSS实现其他的效果. 如下是增加下划线&斜体..
A.blue {color:blue; text-decoration:none;}
A.red {color:red; text-decoration:none; font-style:italic;}
查看范例:
www.dansteinman.com/dynduo/examples/textrollover3.html (文本翻转斜体)
--------------------------------------------------------------
5DMedia 版权所有, 转载请注明出处!
