onMouseOver的问题 如图要实现鼠标停在a,b,c三个区域时,area出现不同的图片。用onMouseOver实现。我希望在那基础上添加动态的效果,比如渐渐淡出的显示图片,有没有什么方法?注:要求在原来的基础上添加,不能完全用别的jquery代替。 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 是不能用jQuery实现还是不能用jQuery插件实现? 来个jQuery方法~<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div.divABC { height:100px; width:100px; border:1px solid red; }#targetArea div { display:none; }</style><script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script><script type="text/javascript">$(document).ready( function() { var arrImg = {'divA':'1.jpeg','divB':'2.jpeg','divC':'3.jpeg'}; //图片文件,注意路径 $("div.divABC").hover( function() { var thisDivID = $(this).attr("id"); $("#targetArea div").append('<img src="' + arrImg[thisDivID] + '"></img>').fadeIn(); }, function() { $("#targetArea div").fadeOut(); $("#targetArea div img").remove(); });});</script></head><body><div id="divA" class="divABC"></div><div id="divB" class="divABC"></div><div id="divC" class="divABC"></div><div id="targetArea"><div></div></div></body></html> img标签写错了$("#targetArea div").append('<img src="' + arrImg[thisDivID] + '"></img>').fadeIn();改为:$("#targetArea div").append('<img src="' + arrImg[thisDivID] + '" />').fadeIn(); 是onMouseOver这个方法实现的<map name="Map"> <area shape="poly" coords="36, 80, 35, 123, 137, 129, 135, 78" alt="Frozen Food Submenu" href="#" onMouseOver="changeDisplay(1)"> <area shape="poly" coords="165, 80, 165, 123, 256, 129, 255, 78" alt="Fresh Food Submenu" href="#" onMouseOver="changeDisplay(3)"> <area shape="poly" coords="293, 80, 293, 123, 383, 129, 384, 78" alt="Beverages Food Submenu" href="#" onMouseOver="changeDisplay(4)"> <area shape="poly" coords="422, 80, 422, 123, 515, 129, 513, 78" alt="Home Health Submenu" href="#" onMouseOver="changeDisplay(2)"> <area shape="poly" coords="553, 80, 553, 123, 647, 129, 644, 78" alt="Pet Submenu" href="#" onMouseOver="changeDisplay(5)"> </map> onMouseOver="changeDisplay(5)"这个javascript的function能不能实现一些特别的效果显示出图片。原本只是直接变化,看上去不够好看。 function的代码,效果就是直接变化。function changeDisplay(type) { if (type == 1) { FrozenFood.style.visibility = "visible"; HomeHealth.style.visibility = "hidden"; FreshFood.style.visibility = "hidden"; Beverages.style.visibility = "hidden"; PetFood.style.visibility = "hidden"; } php初学者的问题:连接MS SERVER SERVER 2005报错 PHP mysql 字段中截取字符串的问题 PHP中的trim的问题!!谢谢!! php 计算器 如何实现? 求一个测试网站是否能打得开的代码 请问各位大虾,如果我想用命令行形式运行php脚本该怎么做啊? PHP实现在现人数的代码? 如何能不编译mysql php socket read怎么接受100个客户端发过来的信息 $_SERVER["SERVER_PORT"]获取端口的问题 在PHP中如何实现 每隔一段时间就执行一段代码 的功能 php全站静态的思路
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><style type="text/css">
div.divABC { height:100px; width:100px; border:1px solid red; }
#targetArea div { display:none; }
</style><script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
var arrImg = {'divA':'1.jpeg','divB':'2.jpeg','divC':'3.jpeg'}; //图片文件,注意路径
$("div.divABC").hover( function() {
var thisDivID = $(this).attr("id");
$("#targetArea div").append('<img src="' + arrImg[thisDivID] + '"></img>').fadeIn();
}, function() { $("#targetArea div").fadeOut(); $("#targetArea div img").remove(); });
});
</script>
</head><body>
<div id="divA" class="divABC"></div>
<div id="divB" class="divABC"></div>
<div id="divC" class="divABC"></div>
<div id="targetArea"><div></div></div>
</body>
</html>
$("#targetArea div").append('<img src="' + arrImg[thisDivID] + '"></img>').fadeIn();
改为:
$("#targetArea div").append('<img src="' + arrImg[thisDivID] + '" />').fadeIn();
<map name="Map">
<area shape="poly" coords="36, 80, 35, 123, 137, 129, 135, 78" alt="Frozen Food Submenu"
href="#" onMouseOver="changeDisplay(1)">
<area shape="poly" coords="165, 80, 165, 123, 256, 129, 255, 78" alt="Fresh Food Submenu"
href="#" onMouseOver="changeDisplay(3)">
<area shape="poly" coords="293, 80, 293, 123, 383, 129, 384, 78" alt="Beverages Food Submenu"
href="#" onMouseOver="changeDisplay(4)">
<area shape="poly" coords="422, 80, 422, 123, 515, 129, 513, 78" alt="Home Health Submenu"
href="#" onMouseOver="changeDisplay(2)">
<area shape="poly" coords="553, 80, 553, 123, 647, 129, 644, 78" alt="Pet Submenu"
href="#" onMouseOver="changeDisplay(5)">
</map>
这个javascript的function能不能实现一些特别的效果显示出图片。原本只是直接变化,看上去不够好看。
function changeDisplay(type) {
if (type == 1) {
FrozenFood.style.visibility = "visible";
HomeHealth.style.visibility = "hidden";
FreshFood.style.visibility = "hidden";
Beverages.style.visibility = "hidden";
PetFood.style.visibility = "hidden";
}