设为首页 加入收藏
当前位置:首页 > 整站内容 > 特效代码 > 图形图像 > 详细内容
图片菜单错位效果
发布时间:2010-3-15  阅读次数:8537  字体大小: 【】 【】【

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效观止|www.jscode.cn| --- 图片菜单错位效果</title>
<style>
<!--

.mouseBeOffMe {
border-top:       10px   solid #000000;
border-bottom: 10px   solid #000000;
border-left:     6px     solid #000000;
border-right:   10px   solid #000000;
}

.mouseBeOnMe {
border-top:       6px     solid #000000;
border-bottom: 14px   solid #000000;
border-left:     10px   solid #000000;
border-right:   6px     solid #000000;
}

.mouseBeDown {
border-top:       13px   solid #000000;
border-bottom: 7px     solid #000000;
border-left:     10px   solid #000000;
border-right:   6px     solid #000000;
}

.mouseBeUp {
border-top:       10px   solid #000000;
border-bottom: 10px   solid #000000;
border-left:     10px   solid #000000;
border-right:   6px     solid #000000;
}

//-->
</style>
</head>

<body>

<img src="http://www.jscode.cn/JsCode/images/flag.gif" width="90" height="90" border="0" class="mouseBeOffMe" onmouseover="this.className='mouseBeOnMe'" onmousedown="this.className='mouseBeDown'" onmouseup="this.className='mouseBeUp'" onmouseout="this.className='mouseBeOffMe'">
<img src="http://www.jscode.cn/JsCode/images/flag.gif
" width="90" height="90" border="0" class="mouseBeOffMe" onmouseover="this.className='mouseBeOnMe'" onmousedown="this.className='mouseBeDown'" onmouseup="this.className='mouseBeUp'" onmouseout="this.className='mouseBeOffMe'">
<img src="http://www.jscode.cn/JsCode/images/flag.gif
" width="90" height="90" border="0" class="mouseBeOffMe" onmouseover="this.className='mouseBeOnMe'" onmousedown="this.className='mouseBeDown'" onmouseup="this.className='mouseBeUp'" onmouseout="this.className='mouseBeOffMe'">

</body>

</html>

预览效果

天猫商城    聚划算    天猫电器城    淘宝旅行    天猫超市    淘宝游戏    天猫品牌特卖    天猫母婴

我要评论
  • 匿名发表
  • [添加到收藏夹]
  • 发表评论:(匿名发表无需登录,已登录用户可直接发表。) 登录状态:未登录
最新评论
所有评论[0]
    暂无已审核评论!

全站链接: 
收录查询
分享按钮