标签归档:图片

在网页中一张图片上制作多个超级链接

当浏览者在网页图片上的不同位置按下鼠标左键,此时就会连接至不同的网页,这个效果不错吧?FrontPage 2002提供了非常简便的在一张图片上制作多个超链接的制作工具,利用鼠标在图片上拖曳,我们就可以直接将图片划分出许多不同的区域并制作出多个超链接了。

  1、请先开启一个新的网页,然后点击工具栏上的“插入文件中的图片”按钮。
  2、在“”对话框中搜寻自己要插入的图片(点击“视图”右边的三角形选“预览”可在下面的预览窗口中查看你要选的图片),选定图片后点“插入”。
  3、回到主编辑画面后,在插入的图片上单击鼠标左键,此时图片四周就会被八个点所包围起来,同时,在图片下方就会出现“图片工具条”。有时,“图片工具条”不会自动跳出,选择菜单“视图→工具栏→图片”,即可让“图片工具条”出现。
  4、在“图片工具条”的右边,可以找到我们操作要用到的工具按钮,它们分别是“长方形热点”、“圆形热点”。我们直接选取“长方形热点”按钮进行长方形作用区域的设置。
  5、点一下“长方形热点”按钮,直接在要产生超链接的图片区域上按住鼠标左键不放,之后拖曳出超链接区域的范围直到符合我们理想的区域大小,然后放开鼠标左键结束区域设定。如果点的是“圆形热点”按钮,开始点应放在所要选定的圆形超链接区域的中心。
  6、在紧接着弹出的“建立超链接”对话框中,可以直接选择或输入我们要进行超链接的网页地址,然后按下“确定”按钮关闭“建立超链接”对话窗口。
  7、依照步骤5—6所说明的方法在图片别的区域加入其他的超链接。以后打开这个网页,当我们将鼠标指针移至图片各个超链接区域上时,鼠标指针都会改变为“手指”的形状,这就表示我们已经成功地在一张图片上建立了多个超链接了

鼠标移上去图片渐变效果,图片特效JS

<!–完成此效果需要两步

把下面代码放到<head>区域中–>

<script language=”JavaScript”>

nereidFadeObjects = new Object();

nereidFadeTimers = new Object();

function nereidFade(object, destOp, rate, delta){

if (!document.all)

return

    if (object != “[object]”){  //do this so I can take a string too

        setTimeout(“nereidFade(“+object+”,”+destOp+”,”+rate+”,”+delta+”)”,0);

        return;

    }

    clearTimeout(nereidFadeTimers[object.sourceIndex]);

    diff = destOp-object.filters.alpha.opacity;

    direction = 1;

    if (object.filters.alpha.opacity > destOp){

        direction = -1;

    }

    delta=Math.min(direction*diff,delta);

    object.filters.alpha.opacity+=direction*delta;

    if (object.filters.alpha.opacity != destOp){

        nereidFadeObjects[object.sourceIndex]=object;

        nereidFadeTimers[object.sourceIndex]=setTimeout(“nereidFade(nereidFadeObjects[“+object.sourceIndex+”],”+destOp+”,”+rate+”,”+delta+”)”,rate);

    }

}

</script>

<!–把下面代码放到<body>区域中–>

        <div align=”left”>

          <a href=”http://www.maqie.com” target=”_blank”><img border=”0″ src=”http://www.maqie.com/wp-content/uploads/2010/02/2-300×199.jpg” onMouseOut=nereidFade(this,50,10,5) onMouseOver=nereidFade(this,100,10,5)  style=”FILTER: alpha(opacity=55)”></a>

          <br>

          <a href=”http://www.maqie.com” target=”_blank”><img border=”0″ src=”http://www.maqie.com/wp-content/uploads/2010/02/2-300×199.jpg” onMouseOut=nereidFade(this,50,10,5) onMouseOver=nereidFade(this,100,10,5)  style=”FILTER: alpha(opacity=55)”></a>

                  </div>