影像地图将鼠标置于突出
问题描述:
我正在为我们的网站导航手册的影像地图,我产生了一系列的代码,鼠标悬停一个div秀...影像地图将鼠标置于突出
编辑
的代码所有工作,但我需要突出显示的区域,当鼠标悬停,有没有一个简单的方法来做到这一点,我试图使用其他代码,但它会中断原来的Java脚本,使div不再显示,任何帮助,非常感谢!
function showHideDivs(indx) {
hideDivs();
oShowHideDivs[indx].style.display = 'block';
}
function hideDivs() {
for (i = 0; i < oShowHideDivs.length; i++) {
oShowHideDivs[i].style.display = 'none';
}
}
window.onload = function() {
oShowHideDivs = document.getElementById('container').getElementsByTagName('div');
var oMap = document.getElementById('myMap');
for (i = 0; i < oMap.areas.length; i++) {
oMap.areas[i].indx = i;
oMap.areas[i].onmouseover = function() {
showHideDivs(this.indx);
}
oMap.areas[i].onmouseout = hideDivs;
}
}
#container div {
display: none;
}
<div>
<img src="website.jpg" alt="" usemap="#myMap" />
</div>
<div id="container">
<div id="home">This is home</div>
<div id="about">This is about</div>
<div id="contact">This is contact</div>
</div>
<map name="myMap" id="myMap">
<area shape="rect" coords="0,0,100,100" href="" alt="home" />
<area shape="rect" coords="100,0,200,100" href="" alt="about" />
<area shape="rect" coords="0,100,100,200" href="" alt="contact" />
</map>
答
来自W3C的学校,请参见下面的代码。
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
你可以参考链接HTML map Tag
答
在你的onload函数体,
oShowHideDivs = document.getElementById('container').getElementsByTagName('div');
var oMap = document.getElementById('myMap');
for (i = 0; i < oMap.areas.length; i++) {
oMap.areas[i].indx = i;
oMap.areas[i].onmouseover = function() {
showHideDivs(this.indx);
}
我会建议一些小的改动。
oMap.areas[i].indx = 1
没有意义。 oMap
是<area>
标记的节点列表。 <area>
元素不具有indx
的属性。如果oMap
是JavaScript对象的数组,则将indx
的属性设置为可以。
望着这部分
oMap.areas[i].onmouseover = function() {
showHideDivs(this.indx);
}
它看起来就像你正在试图通过一个指数来识别相关的股利。
什么是有效的HTML是给div一个data-idnx
属性。它可以达到这样的效果相同:
for (i = 0; i < oMap.areas.length; i++) {
var area = oMap.areas[i];
area.dataset.idnx = i;
area.onmouseover = MapshowHideDivs(i);
area.onmouseout = hideDivs();
}
所以一起
// Modern version of window.onload = function()
(function() {
// Variable declarations at the top
// Function declarations
oShowHideDivs = document.getElementById('container').getElementsByTagName('div');
var oMap = document.getElementById('myMap');
function showHideDivs(indx) {
hideDivs();
oShowHideDivs[indx].style.display = 'block';
}
function hideDivs() {
for (i = 0; i < oShowHideDivs.length; i++) {
oShowHideDivs[i].style.display = 'none';
}
}
// Body of the script
for (i = 0; i < oMap.areas.length; i++) {
var area = oMap.areas[i];
area.dataset.idnx = i;
area.onmouseover = MapshowHideDivs(i);
area.onmouseout = hideDivs();
}
}
没有看到这个代码是如何工作的点击是指一个新的网站,而不是在具有悬停div固定,我也想知道如何使悬停区域突出显示与边框之前点击 – nsic
请检查此链接http://www.outsharked.com/imagemapster/default.aspx?demos.html# – Abhi