Использование «вложенных» тегов изображения в html-скрипте с onmouseover - PullRequest
Новая
       9

Использование «вложенных» тегов изображения в html-скрипте с onmouseover

0 голосов
/ 19 мая 2019

Я создаю страницу 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 для ссылки на описание Солнца. Я, кажется, не могу обойти это.

Ответы [ 2 ]

0 голосов
/ 28 мая 2019

Наконец-то я смог получить желаемые результаты.Мне не нужна была другая карта.Я поместил все теги области в одну карту и использовал функции для переключения изображений при 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>
0 голосов
/ 20 мая 2019

Как насчет этой демонстрации? 

 <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

...