Java Script

本文介绍了一种使用JavaScript和CSS实现的网页导航栏交互效果。通过图片预加载技术和鼠标悬停事件,当用户将鼠标移至导航栏各选项上时,相应的图片会进行切换,提供视觉反馈。此方法增强了用户体验并简化了网站导航。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<SCRIPT language=Javascript src="js/pic_change.js"></SCRIPT>
<link href="css/ycj.css" rel="stylesheet" type="text/css">

<BODY onLoad="MM_preloadImages('images/t_4a.gif','images/t_5a.gif','images/t_6a.gif','images/t_7a.gif','images/t_8a.gif','images/t_9a.gif','images/t_10a.gif','images/t_3qb.gif')">

<TABLE height=33 cellSpacing=0 cellPadding=0 width=853 align=center border=0>
  <TBODY>
  <TR>
 
    <TD width=47>
 <IMG height=33 src="images/t_1a.gif" width=47>
 </TD>
 
    <TD width=79>
 <IMG height=33 src="images/t_2b.gif" width=79>
 </TD>
 
    <TD width=77>
   <A onMouseOver="MM_swapImage('Image15','','images/t_3qb.gif',1)" onmouseout=MM_swapImgRestore() href="#">
   <IMG id=Image15 height=33 src="images/t_3q.gif" width=77 border=0 name=Image15>
   </A>
 </TD>
 
    <TD width=94>
   <A onMouseOver="MM_swapImage('Image3','','images/t_4a.gif',1)" onmouseout=MM_swapImgRestore() href="#">
   <IMG id=Image3 height=33 src="images/t_4.gif" width=94 border=0 name=Image3>
   </A>
 </TD>
 
    <TD width=83>
   <A onMouseOver="MM_swapImage('Image4','','images/t_5a.gif',1)" onmouseout=MM_swapImgRestore() href="#">
   <IMG id=Image4 height=33 src="images/t_5.gif" width=83 border=0 name=Image4>
   </A>
 </TD>
 
    <TD width=85>
   <A onMouseOver="MM_swapImage('Image5','','images/t_6a.gif',1)" onmouseout=MM_swapImgRestore() href="#">
   <IMG id=Image5 height=33 src="images/t_6.gif" width=85 border=0 name=Image51>
   </A>
 </TD>
 
    <TD width=84>
   <A onMouseOver="MM_swapImage('Image6','','images/t_7a.gif',1)" onmouseout=MM_swapImgRestore() href="#">
   <IMG id=Image6 height=33 src="images/t_7.gif" width=84 border=0 name=Image61>
   </A>
 </TD>
 
    <TD width=85>
   <A onMouseOver="MM_swapImage('Image7','','images/t_8a.gif',1)" onmouseout=MM_swapImgRestore() href="#">
   <IMG id=Image7 height=33 src="images/t_8.gif" width=85 border=0 name=Image71>
   </A>
 </TD>
 
    <TD width=83>
   <A onMouseOver="MM_swapImage('Image8','','images/t_9a.gif',1)" onmouseout=MM_swapImgRestore() href="#">
   <IMG id=Image8 height=33 src="images/t_9.gif" width=83 border=0 name=Image81>
   </A>
 </TD>
 
    <TD width=85>
   <A onMouseOver="MM_swapImage('Image9','','images/t_10a.gif',1)" onmouseout=MM_swapImgRestore() href="#">
   <IMG id=Image9 height=33 src="images/t_10.gif" width=85 border=0 name=Image91>
   </A>
 </TD>
 
    <TD width=85>
   <A onMouseOver="MM_swapImage('Image10','','images/t_9a.gif',1)" onmouseout=MM_swapImgRestore() href="#">
   <IMG id=Image10 height=33 src="images/t_10.gif" width=85 border=0 name=Image91>
   </A>
 </TD>
  
    <TD width=51>
 <IMG height=33 src="images/t_11.gif" width=51>
 </TD>
 
 
  </TR>
  </TBODY>
</TABLE>
</BODY>
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值