在 html 脚本中使用 "Nested" 图像标签和 onmouseover

Question

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

<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 来 link 关于太阳的描述。我似乎没有绕过它。

Answer 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

Answer 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>

在 html 脚本中使用 "Nested" 图像标签和 onmouseover

Using "Nested" image tags in html script with onmouseover

html

javascript

jquery

sharepoint-2013