Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Не появляется картинка при наведении курсора на сс

Автор: aspirin545 6.1.2016, 13:41

Доброго времени суток, люди добрые!!!
Помогите пожалуйста.
При наведении курсора на ссылку размещённую на окружности, нарисованной с помощью svg, должна по-идее появляться картинка, но она упортно этого делать не хочет. Помогите пожалуйста разобраться в причине.

На обычной ссылке всё происходит как надо.

Код


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
   </head>
 <body>
 <style>
 
.okrug span{
   position: absolute; 
   left: 500px;
   z-index: 100!important;
   visibility: hidden;
   }
 
.okrug:hover span{
visibility: visible;
}
 </style>
 
 <object data="link.svg" type="image/svg+xml" width="400" height="450" > 
 </object>


<!--обычная ссылка-->
<a class="okrug" href="http://www.ya.ru"  xlink:show="new">ya.ru<span><img src="images/okr1.jpg" style="position: absolute; " />
</span>
</a>

</body>
</html>

Вот и моя ссылка, отказывающаяся работать:

Код


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="400">
<title></title>
<desc>
</desc>
<path id="mypath2" d="M50,150 A130, 130 0 1,1 50,150.01"
stroke="grey" fill="none"/>


<a class="okrug" xlink:href="http://www.ya.ru"  xlink:show="new">
<text font-size="17" font-family="arial" fill=" #0000FF">
<textPath xlink:href="#mypath2" startOffset="35%">
ya.ru<span><img src="images/okr1.jpg" style="position: absolute; 
   top: 348px;
   left: 511px;"
   /></span>
</textPath>
</text>
</a>

</svg>

Во вложении все сопутствиющие файлы.
Заранее благодарю за помощь!

Автор: Samotnik 6.1.2016, 15:09

aspirin545, с СВГ знаком, но очень мало. Там ведь есть mouseover, mouseout. Зачем именно эта сложная конструкция xlink:show?

Автор: aspirin545 6.1.2016, 15:20

Друзья, всем спасибо! Разобрался!!! smile

Вот рабочий вариант:

Код


<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
    <title></title>
    <desc></desc>

  <style>
        a image {
            visibility: hidden;
        }

        a:hover image {
            visibility: visible;
        }
    </style>

    <path id="mypath2" d="M50,150 A130, 130 0 1,1 50,150.01" stroke="grey" fill="none"/>

    <a class="okrug" xlink:href="http://www.ya.ru" xlink:show="new">
        <text font-size="17" font-family="arial" fill=" #0000FF">
            <textPath xlink:href="#mypath2" startOffset="35%">ya.ru</textPath>
        </text>
        <image xlink:href="images/okr1.jpg" width="100%" height="100%" x="0" y="0"/>
    </a>
</svg>