导航栏也是用imagemap,要求在mouseover的时候出现子菜单(也是图片)。子菜单上的imgaemap标签为什么失效了?代码如下:
index:
<html>
<head>
<title>
Internet Programming Assignment 1 11670179 ...
</title>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src='js/image_map_parent_level.js'></script>
</head>
<body>
<div class="left-frame">
<div class="upper-image-map">
<img src="img/top_half.png" alt="top_half" width="499" height="181" usemap="#parent" id="top-half">
<map name="parent">
<area shape="rect" coords="6,140,87,180" class="parent-entry" id='frozen-food-entry' >
<area shape="rect" coords="101,140,182,180" class="parent-entry" id='fresh-food-entry' >
<area shape="rect" coords="196,140,277,180" class="parent-entry" id='beverages-entry' >
<area shape="rect" coords="292,140,373,180" class="parent-entry" id='home-Health-entry' >
<area shape="rect" coords="386,140,467,180" class="parent-entry" id='pet-food-entry' >
</map>
</div>
<div class="lower-image-map">
<img src="img/bottom_half.png" alt="bottom_half" width="499" height="399" id="bottom-half">
</div>
</div> <!--left-frame-->
<div class="right-up-frame">
</div> <!--right-up-frame-->
<div class="right-down-frame">
</div> <!--right-down-frame-->
js:
/*
function imageMapParentLevel(parentEntry) {
//var currentParent = parentEntry;
var currentLowerPart = document.getElementById('lower-image-map');
currentLowerPart.innerHTML=
}
//imageMapParentLevel("test");
//alert("from external functin");
*/
$(document).ready(function(){
$('.upper-image-map').find('.parent-entry').hover(function(){
//event.preventDefault();
//var test = $(this);
//alert(test);
var targetLocation=$('.lower-image-map');
//alert($(this).attr('id'));
switch ($(this).attr('id')) {
case 'frozen-food-entry' :
targetLocation.load('html/frozen_food.html');
break;
case 'fresh-food-entry' :
targetLocation.load('html/fresh_food.html');
break;
case 'beverages-entry' :
targetLocation.load('html/beverages.html');
break;
case 'home-Health-entry' :
targetLocation.load('html/home_health.html');
break;
case 'pet-food-entry' :
targetLocation.load('html/pet_food.html');
break;
}
//$('.lower-image-map').load('html/frozen_food.html');
});
});
index:
<html>
<head>
<title>
Internet Programming Assignment 1 11670179 ...
</title>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src='js/image_map_parent_level.js'></script>
</head>
<body>
<div class="left-frame">
<div class="upper-image-map">
<img src="img/top_half.png" alt="top_half" width="499" height="181" usemap="#parent" id="top-half">
<map name="parent">
<area shape="rect" coords="6,140,87,180" class="parent-entry" id='frozen-food-entry' >
<area shape="rect" coords="101,140,182,180" class="parent-entry" id='fresh-food-entry' >
<area shape="rect" coords="196,140,277,180" class="parent-entry" id='beverages-entry' >
<area shape="rect" coords="292,140,373,180" class="parent-entry" id='home-Health-entry' >
<area shape="rect" coords="386,140,467,180" class="parent-entry" id='pet-food-entry' >
</map>
</div>
<div class="lower-image-map">
<img src="img/bottom_half.png" alt="bottom_half" width="499" height="399" id="bottom-half">
</div>
</div> <!--left-frame-->
<div class="right-up-frame">
</div> <!--right-up-frame-->
<div class="right-down-frame">
</div> <!--right-down-frame-->
js:
/*
function imageMapParentLevel(parentEntry) {
//var currentParent = parentEntry;
var currentLowerPart = document.getElementById('lower-image-map');
currentLowerPart.innerHTML=
}
//imageMapParentLevel("test");
//alert("from external functin");
*/
$(document).ready(function(){
$('.upper-image-map').find('.parent-entry').hover(function(){
//event.preventDefault();
//var test = $(this);
//alert(test);
var targetLocation=$('.lower-image-map');
//alert($(this).attr('id'));
switch ($(this).attr('id')) {
case 'frozen-food-entry' :
targetLocation.load('html/frozen_food.html');
break;
case 'fresh-food-entry' :
targetLocation.load('html/fresh_food.html');
break;
case 'beverages-entry' :
targetLocation.load('html/beverages.html');
break;
case 'home-Health-entry' :
targetLocation.load('html/home_health.html');
break;
case 'pet-food-entry' :
targetLocation.load('html/pet_food.html');
break;
}
//$('.lower-image-map').load('html/frozen_food.html');
});
});