在带有 onmouseover 的 html 脚本中使用“嵌套”图像标签答案

【问题标题】：Using "Nested" image tags in html script with onmouseover在带有 onmouseover 的 html 脚本中使用“嵌套”图像标签
【发布时间】：2019-05-29 01:03:43
【问题描述】：

我正在使用脚本编辑器设计一个 Sharepoint 页面。我有一张我使用过区域标签的图像。因此，使用 onmouseover 时会弹出另一个图像，并且它会恢复为 onmouseout。我还想在这个新图像上使用另一个区域标签，我可以在其中添加区域标签。类似于嵌套图像映射的东西。

<img src="planets.gif" width="145" height="126" alt="Planets" name="myname"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" onmouseover=myname.src="C:\Users\Quabynar\Pictures\sun.gif" ; onmouseout=myname.src="C:\Users\Quabynar\Pictures\planets.gif">
  <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>

我希望在鼠标悬停时在 sun.gif 上放置另一张带有区域标签的地图，我可以使用 href 链接到关于描述太阳的链接。我似乎没有绕过它。

【问题讨论】：

标签： javascript jquery html sharepoint-2013

【解决方案1】：

这个演示怎么样？

 <style type="text/css">
        /* ------------- CSS Popup Image ------------- */
        #thumbwrap {
            position: relative;
            width: 252px;
            height: 252px;
        }

        .thumb img {
            border: 1px solid #000;
            margin: 3px;
            float: left;
        }

        .thumb span {
            position: absolute;
            visibility: hidden;
        }

        .thumb:hover, .thumb:hover span {
            visibility: visible;
            top: 0;
            left: 250px;
            z-index: 1;
        }
    </style>
<div id="thumbwrap">
        <a class="thumb" href="#"><img width="250" src="https://www.w3schools.com/howto/img_snow.jpg" alt=""><span><img src="https://www.w3schools.com/howto/img_snow.jpg" alt=""></span></a>        
    </div>

https://www.w3schools.com/code/tryit.asp?filename=G48M3NZQAW0K

【讨论】：

非常感谢。我尝试使用 css，但悬停在图像的一部分上不起作用，就像它对 html imagemaps 所做的那样。

【解决方案2】：

终于可以得到我想要的结果了。我不需要另一张地图。我将所有区域标签放在一张地图中，并在 onmouseover 和 onmouseout 时使用了图像切换功能。这很简单。

<html>
<body>
<img src="planets.png" width="745" height="926" alt="Planets" name="myname" 
ismap="ismap"
usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" 
onmouseover=myname.src="C:\Users\Quabynar\Pictures\sun.png" ; 
onmouseout=myname.src="C:\Users\Quabynar\Pictures\planets.gif">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
<area target="_blank" href=".../hackathon.htm" shape="rect" coords="73,250,234,297" 
onmouseover="cycleprep()"; onmouseout="">
<area target="_blank" href="../mindmap.htm" shape="rect" coords="128,343,279,385" 
onmouseover="cycleprep()"; onmouseout="" >
<area target="_blank" href=".../prep_more.htm" shape="rect" coords="206,414,375,459" 
onmouseover="cycleprep()"; onmouseout="">   

</map>

<script LANGUAGE="javascript">
image1=new Image
image1.src =".../sun.png"
image2=new Image 
image2.src=".../planets.png"

function cycleprep() {
document.Auditcycle.src=image1.src;return true;
}

function cyclefull() {
document.Auditcycle.src=image2.src; return true;
}


</script>
</body>
</html>

【讨论】：