如何控制多层的显示

做了一个内容结构图，大概如下：　　　主要内容内内内内内内内
容容容容容容容
模模模模模模模
块块块块块块块
1 2 3 4 5 6 7现在想实现这样的效果：
鼠标移到“内容模块1”上，隐藏除001层外（内容结构图在001层里）的其他层，在鼠标右边显示layer1，鼠标移开即隐藏layer1；但单击“内容模块1”后，鼠标移开后layer1不隐藏，直到单击layer1层才隐藏；
鼠标移到“内容模块2”上，隐藏除001层外（内容结构图在001层里）的其他层，在鼠标右边显示layer2，鼠标移开即隐藏layer2；但单击“内容模块2”后，鼠标移开后layer2不隐藏，直到单击layer2层才隐藏；其他内容模块依此类推。请高手帮忙实现。谢谢！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

再补充一些吧：这里上传不了图片，其实这个结构图很简单，就是用word做的，“主要内容”是用一个框框起，“内容模块1”用一个框框起，其他都一样。
然后把结构图变成jpg图片，插入页里的某一层里。
然后，为了介绍每一个“内容模块”的具体内容，就与些对应的建立了一个层，把简介内容放在这个层里。当鼠标移到某一“内容模块”上时，就显示对这一内容模块的内容简介，即要显示这一层。鼠标移开这一内容模块，简介内容就关闭，即隐藏这一层。
但当单击某一内容模块时，显示的内容简介这一层就一直显示，鼠标移开了也不隐藏，只有当单击内容简介时才关闭这一层。不知清楚了没有？
不知道你要的效果是不是这样的
<!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=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript" type="text/javascript">
function showinfodiv(layname,layname1,layname2,layname3)
{
   document.getElementById(layname).style.display = "block";
   document.getElementById(layname1).style.display = "none";
   document.getElementById(layname2).style.display = "none";
   document.getElementById(layname3).style.display = "none";
}
</script>
<style type="text/css">#title1 {
width:600px;
font-size:14px;
margin:0 0 0 0;
   padding:0;
border-bottom:3px solid #FF7C3E ;
}#title1 ul {
margin:0;
padding:0 15px 0 0;
list-style: none;
}
#title1 li {
float:left;
padding: 0;
}
#title1 p a {
color:red;
}#title1 a {
float:left;
margin:0;
padding:0 10px 0 5px;
text-decoration:none;
}
#title1 a span{
display:block;
padding:5px 15px 4px 6px;
color: #000000;
font-size:14px;
   font-weight :bold;
}
#title1 a:hover {
margin:0;
padding:0 10px 0 5px;
text-decoration:none;
}#title1 a:hover span {
display:block;
padding:5px 15px 4px 6px;
}</style>
<body>
<div class="news1" id="xinwen1" >
<div id="title1" >
<ul>
<li>
<a  onmouseover="showinfodiv('xinwen1','xinwen2','xinwen3','xinwen4');">
<span >
1111111
</span>
</a>
</li>
<li>
<a onmouseover="showinfodiv('xinwen2','xinwen1','xinwen3','xinwen4');">
<span>
222222
</span>
</a>
</li>
<li>
<a  onmouseover="showinfodiv('xinwen3','xinwen1','xinwen2','xinwen4');">
<span style="background:url(./images/portal/tabright4.gif) no-repeat right top;">
333333333333
</span>
</a>
</li>
<li>
<a  onmouseover="showinfodiv('xinwen4','xinwen1','xinwen2','xinwen3');">
<span style="background:url(./images/portal/tabright4.gif) no-repeat right top;">
4444444444
</span>
</a>
</li>
</ul>
</div>
<div id="newsline1" >
1111111
</div>
</div>

<div class="news1" id="xinwen2" style="display:none;">
<div id="title1" >
<ul>
<li>
<a  onmouseover="showinfodiv('xinwen1','xinwen2','xinwen3','xinwen4');">
<span >
1111111
</span>
</a>
</li>
<li>
<a onmouseover="showinfodiv('xinwen2','xinwen1','xinwen3','xinwen4');">
<span >
222222
</span>
</a>
</li>
<li>
<a  onmouseover="showinfodiv('xinwen3','xinwen1','xinwen2','xinwen4');">
<span>
333333333333
</span>
</a>
</li>
<li>
<a  onmouseover="showinfodiv('xinwen4','xinwen1','xinwen2','xinwen3');">
<span >
4444444444
</span>
</a>
</li>
</ul>
</div>
<div id="newsline1">
222222
</div>
</div>

<div class="news1" id="xinwen3" style="display:none;">
<div id="title1" >
<ul>
<li>
<a  onmouseover="showinfodiv('xinwen1','xinwen2','xinwen3','xinwen4');">
<span >
1111111
</span>
</a>
</li>
<li>
<a onmouseover="showinfodiv('xinwen2','xinwen1','xinwen3','xinwen4');">
<span >
222222
</span>
</a>
</li>
<li>
<a onmouseover="showinfodiv('xinwen3','xinwen1','xinwen2','xinwen4');">
<span >
333333333333
</span>
</a>
</li>
<li>
<a onmouseover="showinfodiv('xinwen4','xinwen1','xinwen2','xinwen3');">
<span>
4444444444
</span>
</a>
</li>
</ul>
</div> <div id="newsline1">
333333333333
</div>
</div>
<div class="news1" id="xinwen4" style="display:none;">
<div id="title1" >
<ul>
<li>
<a  onmouseover="showinfodiv('xinwen1','xinwen2','xinwen3','xinwen4');">
<span >
1111111
</span>
</a>
</li>
<li>
<a  onmouseover="showinfodiv('xinwen2','xinwen1','xinwen3','xinwen4');">
<span >
222222
</span>
</a>
</li>
<li>
<a onmouseover="showinfodiv('xinwen3','xinwen1','xinwen2','xinwen4');">
<span >
333333333333
</span>
</a>
</li>
<li>
<a onmouseover="showinfodiv('xinwen4','xinwen1','xinwen2','xinwen3');">
<span>
4444444444
</span>
</a>
</li>
</ul>
</div>

<div id="newsline1">
4444444444
</div>
</div>
</body>
</html>
这样的?
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{
font-size:12px; color:#333;
}
ul{
list-style-type:none; padding:0px; margin:0px;
}
.menu{
width:500px; overflow:hidden;
}
.menu li{
float:left; width:15px; margin-right:20px; cursor:pointer;
}
.layer{
display:none; position:absolute; width:200px; height:100px; border:1px solid #006699; background:#F5F6FB;
}
</style>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var isClick = false;
window.onload = function(){
var menu = $("menu");
var li = menu.getElementsByTagName("li");
for(var i=0; i<li.length; i++){
(function(i){
li[i].onmouseover = function(oEvent){
if(isClick) return;

oEvent = oEvent || window.event;
var layer = $("layer" + i);
layer.style.display = "block";
layer.style.left = oEvent.clientX + 10 + "px";
layer.style.top = oEvent.clientY + "px";
layer.onclick = function(){
if(isClick){
this.style.display = "none";
isClick = false;
}
};
};
li[i].onmouseout = function(){
if(!isClick){
$("layer" + i).style.display = "none";
}
};
li[i].onclick = function(){
isClick = true;
};
})(i);
};
};
</script>
</head><body>
<div>
    <ul id="menu" class="menu">
        <li>内容模块1</li>
        <li>内容模块2</li>
        <li>内容模块3</li>
        <li>内容模块4</li>
    </ul>
    <div id="layer0" class="layer">
        内容结构图001
    </div>
    <div id="layer1" class="layer">
        内容结构图002
    </div>
    <div id="layer2" class="layer">
        内容结构图003
    </div>
    <div id="layer3" class="layer">
        内容结构图004
    </div>
</div>
</body>
</html>
谢谢。是这种效果。但兄弟你提供的是对文字的，而我是在图片上。你这里是每一个内容结构图文字放在一个层里，而我的是这些内容结构做为一个总图放在一个层里，然后在dreamweaver里通过矩形热点工具选定具体划出热点，鼠标移到上面再显示内容简介层。