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"; } 一套系统 支持不同语言 文件下载 求wampserver+iis配置方法 zf高手请进,急需高人指点 html如何在链接中调用php? php打开远程文件问题 急!送100分! PHP 调用 c# 生成的dll 本人初学php,请前辈告诉我如何配置php运行环境.. require_once出错,请高手指点。 求救!PHP繁体版在DW 2004中繁体字传到网页有乱码!!!! 本人欲申请版主之位,支持的请跟贴!谢谢! 在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";
}