javascript - HTML/CSS 将鼠标悬停在图像上以获得特写图像/测试/超链接

Question

我正在为我工​​作的设施构建一个资源网站，需要脚本方面的帮助。

我有一张包含多种药物的图片，我想将其悬停以显示更多信息。以下链接是我在网上找到的示例。

image link

我希望能够将鼠标悬停在每种药物上以在其旁边弹出一个窗口，其中包含特写图像、药物名称和指向外部站点的超链接。实现这一目标的最简单方法是什么。

非常感谢!

Answer 1

使用图像映射和一些 javascript 鼠标事件操作。主图像是具有矩形/圆形“区域”区域的图像映射。信息被放入“div” block 中，这些 block 通过样式属性“display”设置为“block”或“none”而可见/不可见。 init() 函数使所有“div” block 在开始时不可见。

HTML:

<img src="XYZ" alt="medications" usemap="#medsMap">
<map name="medsMap">
<area shape="rect" coords="x,y,w,h" onmouseover="showInfo('med1')" onmouseout="hideInfo('med1')" >
<area shape="circle" coords="x,y,r" onmouseover="showInfo('med2')" onmouseout="hideInfo('med2')" >
</map>

<div class="medInfo" id="med1">
// All your html about medication 1
</div>
<div class="medInfo" id="med2">
// All your html about medication 2
</div>

Javascript:

window.onload = init;

function init(){
    var infos = document.getElementsByClassName('medInfo');
    for (var i=0, i<infos.length, i++){
        infos[i].style.display = 'none';
    }
}

function showInfo(divId){
    document.getElementById('med1').style.display = 'block'
}

function hideInfo(divId){
    document.getElementById('med1').style.display = 'none'
}