下载中心┊文章中心┊软件分类┊更新软件┊推荐下载┊热门软件┊更新文章┊热门文章
 
《拓文asp.net网站内容管理系统》官方演示站。
 设为首页    
 收藏本站
 作者:黄振安
 
网站首页 开源拓文 .NET编程 网站编程 网页设计 图形图像 数据库 软件工程留言本
    站内搜索:   
您现在的位置: 拓文网络 → 文章中心 → 网页设计 → DHTML → 让你的网页活跃起来[正文]

热 门 文 章

相 关 文 章
没有相关文章!
让你的网页活跃起来
 
[作者:不详    转贴自:不详    点击数:    字体:【大 中 小】    更新时间:2006-3-1 16:42:31]

  * 动态按钮 

  这里的动态按钮既不是.gif动画,也不是FrontPage 中提供的各种特效按钮。相信您一定遇到过这种情况:当您的鼠标划过某一个按钮时,它会忽然动一下,似乎在诱惑您去点击它,很有意思是吗?下面我们来实现它。 

  首先您应该准备两幅图片,由于是按钮,不必很大,颜色也不必太花,简单的.gif就行,两幅图要有一些差别,免得动了以后看不出来。下面是我做的两张图片。 


  接下来让我们来看看动态效果是怎么实现的。其源代码如下。 

  <html> 

  <head> 

  <title>Push-In Buttons</title> 

  </head> 

  <body bgcolor=ffffff> 

  <script> 

  <!-- 

  versionButton = 1 

  browserName = navigator.appName; 

  browserVer = parseInt(navigator.appVersion); 

   if ( browserVer >= 3) 

   versionButton = "3"; 

   if (versionButton == "3") 

   { 

   toc1on = new Image(42, 197); 

   toc1on.src = "on.home.gif"; 

   toc1off = new Image(42, 197); 

   toc1off.src = "home.gif"; 

   } 

   

  function img_act(imgName) 

   { 

   if (versionButton == "3") 

   { 

   imgOn = eval(imgName + "on.src"); 

   document [imgName].src = imgOn; 

   } 

   } 

   

   function img_inact(imgName) 

   { 

   if (versionButton == "3") 

   { 

   imgOff = eval(imgName + "off.src"); 

   document [imgName].src = imgOff; 

   } 

   } 

  // --> 

  </script> 

  <a href=http://www.microsoft.com 

  onMouseover = "img_act('toc1')" 

  onMouseout = "img_inact('toc1')"><img src=home.gif 

  width=100 height=50 border=0 name="toc1"></a> 

  </body> 

  </html> 

  应该注意的地方有两处: 

  1.一定要给img赋一个名字,然后在源图片定义处应用这个名字。 

  2.注意源文件中的各种符号,特别是引号,还要注意源图片文件的路径,最好用相对路径,以免站点上载后无法正常显示。当然,这种交换图片的方式也需要4.0以上版本的浏览器的支持,如果您还在使用3.0版本的浏览器,就赶快升级吧! 

   

  * 提示的话 

  把鼠标放到一幅图片上就能出现提示信息,就像好多软件的按钮给出功能提示一样。这一功能在网页编辑中很容易实现,下面我们来看看其效果。 


  实现这种效果很容易,看看源代码就明白了。 

  ...... 

  <tr> 

  <td WIDTH="57"><a HREF="who.html" TARGET="main" 

  ONMOUSEOVER="img_act('who')" 

  ONMOUSEOUT="img_inact('who')"><img   SRC="../images/button_who0.gif" NAME="who" 

  title="周华健个人小档案" ALT="我是谁" 

  BORDER="0" WIDTH="113" HEIGHT="45"></a><a 

  HREF="who.html" TARGET="_parent" ONMOUSEOVER="img_act('who')" 

  ONMOUSEOUT="img_inact('who')"></a></td> 

  </tr> 

  ...... 

  代码中加下划线的部分就是实现它的方法。Title这一属性很有用吧!它可用于除了BASE、BASEFONT、HEAD、HTML、META、PARAM、SCRIPT、STYLE、TITLE以外的所有元素中,以定义鼠标划过时的提示信息。 

     以上我们就网页编制过程中的一些小技巧进行了详细的讨论。Web上有许多设计精美、技术先进的页面,分析它们的源码是很好的学习途径。计算机技术在不断地进步,面对这些纷至沓来的新技术:DHTML、CSS、XML......我们只有迎难而上去掌握它,并把它应用到我们的网页上,使我们的网页更加活跃起来。 


页次:4/4  1篇/页  首页   上一页   下一页   尾页  合计 4 篇 Go:
 
上一篇:DHTML的初步入门
下一篇:在网页上实现文字闪烁
winner 打印本页 关闭窗口

     文 章 评 论
评论人 查看该文章的评论 发表时间
   笔 名* : 0 50分 60分 70分 80分 90分 100分
评论内容 *: (最多600字。当前字数:0)


没有相关评论,欢迎您参与!

- 关于本站 - 网站帮助 - 下载声明 - 友情连接 - 网站地图 -
Copyright © 2005-2006 myTopWin.Com. All Rights Reserved . [桂ICP备06004496号]