Changing Image./ Rollovers 翻译: QQLan
//译者语: 我知道rollever效果, 很多工具软件都很轻松的可以做出来,
//之所以还要大家学是因为, 以后的更加复杂的效果都要用到这些技巧.
创建真正的动画或者演示, 你必须熟练的掌握转换图片的技巧.
本次的教程中, 我将动态转换 "imageA" 和 "imageB"
imageA.gif
imageB.gif
你必须严格的保证两个图片的尺寸大小一致. 不然,当你转换图形, 新的图片将延展自身来填充这块固定的区域. 以下的代码不适用于图象处于不同的尺寸大小 -- 如果你需要使用不同尺寸的图象, 你可以使用对层进行简单的隐藏和显示分割来实现.
首先,你必须初始化一个图象. 我决定把"imageA"在DIV 标签中定义为"imgDiv":
注意我给图象(myImg)赋值为
NAME , 当转换图形的时候, 这个名字将会被用到. 所有的命名都必须是唯一的. 不要使用和DIV里一样的名字, 不然就无法正常工作. 通常我喜欢把DIV里的ID名字都附加"Img" 避免取名的时候产生冲突.
预先下载图象 在你能转换图象前, 先把图象下载到browser的缓存里. 以下是最基础的代码.
imagename = new Image();
imagename.src = "imagefilename.gif";
这里创建了一个image object. 不为别的, 只是有了这个object, 我们可以在任何时候取得这个图象. 你可以在任何时候得到--不需要等待, 因为它已经在缓存中. 如果我们需要把imageA, imageB都预载, 代码需要增加成:
imageA = new Image();
imageA.src = "imageA.gif";
imageB = new Image();
imageB.src = "imageB.gif";
The preload() function 越多图片需要预载, 你就越不喜欢重复的写这样两行代码. 这里我们可以使用一个通用preload() function 来取代那两行代码.
function preload(imgObj,imgSrc) {
if (document.images) {
eval(imgObj+' = new Image()')
eval(imgObj+'.src = "'+imgSrc+'"')
}
}
这里:
- imgObj - 与图象相关的名称
- imgSrc -- 图象的连接(url)
例如:
preload('imageA','imageA.gif')
preload('imageB','imageB.gif')
最好是让图象和页面同时下载, 而不是等页面完成下载以后. 在Netscape和IE中, 图象转换做法有点不同. 首先我们先分别演示, 然后再整合到一个generic function 中可以适用于任何场合.
如果图象不在层中,通常要把图象改成:
document.images["imageName"].src = imageObject.src imageName 是你写在IMG标签中的图片的名字.
imageObject 是需要预载的图片名称.
在我的例子中, 我应该写成:
document.images["myImg"].src = imageB.src 记住, 这只是当图象没有被放置在层中, 如果图象被放在一个层里, 情况又有所不同.
在Netscape中, 你必须要对DIV标签进行说明. 我的例子中它在imgDiv层中, 你需要在代码前面附加
document.imgDiv.document :
if (ns4) document.imgDiv.document.images["myImg"].src = imageB.src 在"document" 和DIV名字中间的部分是必须的, 因为Netscape把DIV看做独立文件.
但是在IE中你不必这么做, 你可以存取它就当它们不被包含在层中一样.
if (ie4) document.images["myImg"].src = imageB.src 现在你已经拥有它了. 你所要做的就是把这些代码放到独立的function中, 当你需要的时候调用他们.
function changeToA() {
if (ns4) document.imgDiv.document.images["myImg"].src = imageA.src
if (ie4) document.images["myImg"].src = imageA.src
}
function changeToB() {
if (ns4) document.imgDiv.document.images["myImg"].src = imageB.src
if (ie4) document.images["myImg"].src = imageB.src
}
快速查看使用了这两个function的范例:
www.dansteinman.com/dynapi/docs/examples/images1.html the changeImage() Function 这个function摒弃了转换图象的时候需要使用两个function. 你只要说明层的名称, 图象名称和被预载的图象名称 - 分别是
layer, imgName 和
imgObj
function changeImage(layer,imgName,imgObj) {
if (document.layers && layer!=null) eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src');
else document.images[imgName].src = eval(imgObj+".src");
}
这里我可以很轻松的换成我的 A() function:
changeImage('imgDiv','myImg','imageA') 对IamgeB 也是一样:
changeImage('imgDiv','myImg','imageB') 范例使用了changeImage() function:
www.dansteinman.com/dynapi/docs/examples/images2.html 注意: 这里的changeImage() function 同样适用与嵌套的层. 对于层的argument你可以插入
parentLayer.document.childLayer 和动态嵌套层相似.
这个function甚至适用于 不在层里面的图象, 只要对层的argument的那部分写上
null changeImage(null,'myImg','imageB') 同时, changeImage() function 是向下兼容的. 如果你用Netscape3浏览带层的页, 将仍然工作正常. 你可以从这个版本的browser查看任何一个范例. 现在对于不具有查看变换图象的browser, 可以写如下的错误检查代码:
function changeImage(layer,imgName,imgObj) {
if (document.images) {
if (document.layers && layer!=null) eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src')
else document.images[imgName].src = eval(imgObj+".src")
}
}
源代码 image.js:
www.dansteinman.com/cgi-bin/dynduo/dynapi.pl?view=images.js Mouse Rollovers 我曾经被mouse rollover效果折腾的晕死过去, 所以我一直没有在从前的版本里提到过. 但是越来越多的人问我如何制作这种效果, 我借用我的 changeImage() function 很快的演示一下.
rollover的点子出奇简单, 当你的鼠标移动到图象A上, 图象A转换成图象B.当你的鼠标离开图象, 它又从图象B还原成图象A. 要实现它, 你必须给图象增加超链接或者内部链接,然后使用onMouseOver and onMouseOut 事件调用changImage() function. onMouseOver and onMouseOut 事件必须通过链接调用, 因为Netscape的IMG标签没有内置这些事件.
记住这些, 在你使用它之前, 你必须为图象做链接. 很多的rollover效果都是用在导航条里, 所以你可以直接把图象链接到它所代表的页. 但是有些情况下,你不希望这个超链链接到任何地方, 你可以使用把
javascript:void(null) 插入到 HREF中. 这只是一个什么都不做的命令. 超链还是存在的, 它只是什么都不做.
mouse rollover范例:
www.dansteinman.com/dynapi/docs/examples/images3.html//译者注: 这样的效果, 如果不用javascript, 而使用
abc //不是一样实现存在超链但是什么都不做的目的?
--------------------------------------------------------------
5DMedia 版权所有, 转载请注明出处!
