使用onmouseover在html脚本中使用“嵌套”图像标记

Question

我正在使用脚本编辑器设计Sharepoint页面。 我有一个我用过区域标签的图像。 因此，使用onmouseover会弹出另一个图像，然后它会重新恢复。 我还想在这个新图像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上放置另一个带有区域标签的地图，当我在onmouseover上我可以使用href来描述关于太阳的描述。 我似乎没有解决它。

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>

使用onmouseover在html脚本中使用“嵌套”图像标记

问题描述

2 个解决方案

解决方案1
0 2019-05-20 03:17:41

解决方案2
0 已采纳 2019-05-28 17:03:43

使用onmouseover在html脚本中使用“嵌套”图像标记

问题描述

2 个解决方案

解决方案1 0 2019-05-20 03:17:41

解决方案2 0 已采纳 2019-05-28 17:03:43

解决方案1
0 2019-05-20 03:17:41

解决方案2
0 已采纳 2019-05-28 17:03:43