Jump to content

Иван98

Newbie
  • Posts

    20
  • Joined

  • Last visited

Иван98's Achievements

Explorer

Explorer (1/14)

0

Reputation

1

Community Answers

  1. Всё получилось!!! Кому интересно вот ссылка: http://codepen.io/Ivan545/pen/BKwxPy
  2. Друзья,всем добрый день! Помогите пожалуйста разобраться. Имеется фоновое изображение и подложка сайта на которой размещены кнопки. Необходимо чтобы за кнопками отсутствовала подподложка, а рядом где кнопки отсутствуют она осталась. Хотелось бы чтобы было вот так: http://hkar.ru/HHwR Сам код вот здесь: http://codepen.io/Ivan545/pen/reGdQe
  3. Игорь, большое вам спасибо за помощь!!!
  4. Попробовал, совсем перестало выводить изображения http://codepen.io/anon/pen/NNRqvR
  5. Туда к сожалению не залить изображения. Вот пожалуйста http://codepen.io/anon/pen/qZaEeY
  6. Здравствуйте, товарищи! Есть две ссылки каждая размещена в отдельном svg. При наведении на одну ссылку (pushkin) должно появляется фоновое изображение в виде круга синего цвета, при наведении на другую (lermontov.info) появляется фоновое изображение уже в виде окружности зелёного цвета. На деле правильно отображается лишь изображение при наведении на ссылку lermontov.info, а при наведении на ссылку pushkin вместо синего круга отображается окружность зелёного цвета. Подскажите пожалуйста как это исправить. <!DOCTYPE html><html><head></head><body><svg type="image/svg+xml" width="190" height="190" style="position: absolute; opacity: 1; z-index: 110!important; ; top: 155px; left: 118px;"xmlns="http://www.w3.org/2000/svg" version="1.1"xmlns:xlink="http://www.w3.org/1999/xlink" width="190" height="190" viewBox="-59 -67 190 190" > <style> a:hover {background-image: url('okr1.png'); background-size: cover;} </style> <path id="link0" d="M10,30 L65,30" stroke="grey" fill="none" /><a xlink:href="http://pushkin.niv.ru" xlink:show="new"><text font-size="17" font-family="arial" fill=" #0000FF"><textPath xlink:href="#link0" startOffset="0%">pushkin.niv.ru</textPath></text></a></svg > <svg type="image/svg+xml" width="330" height="330" style="position: absolute; opacity: 1; z-index: 100!important; ; top: 85px; left: 48.5px; " xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" > <style> svg:hover {background-image: url('okr2.png'); background-size: cover;} </style> <path id="link1" d="M20,150 A130,130 0 1,1 280,150" stroke="transparent" fill="none" /> <a xlink:href="http://lermontov.info" xlink:show="new"><text font-size="17" font-family="arial" fill=" #0000FF"><textPath xlink:href="#link1" startOffset="18%">lermontov.info</textPath></text></a></svg > </body></html>Картинка при наведении курсора на ссылку pushkin. Хотя исходно изображение которое указано в коде выглядит так: Во вложении сама страница с изображениями: https://yadi.sk/d/bwGFEsg9q7KjY
  7. Здравствуйте! Помогите пожалуйста разобраться. Необходимо чтобы при наведении курсора на ссылку появлялся DIV находящийся на другой странице, что я попытался сделать при помощи следующего скрипта: onmouseover="document.getElementById('opis').style.display='block'" onmouseout="document.getElementById('opis').style.display='none'"При помещении кода на одну страницу всё работает. http://codepen.io/anon/pen/reNZMb Но при размещении div на другой странице он не выводится. index.html: <!DOCTYPE html><body><object data="link0.svg" type="image/svg+xml" width="190" height="190" style="position: absolute; opacity: 1; z-index: 110!important; ; top: 355px; left: 518px;" ></object><div id="opis" style="display:none">Poiskovaiy systema.</div></body></html> link0.svg: <?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"><svgxmlns="http://www.w3.org/2000/svg" version="1.1"xmlns:xlink="http://www.w3.org/1999/xlink" width="190" height="190" viewBox="-59 -67 190 190"> <defs><path id="link0" d="M10,30 L65,30"stroke="grey" fill="none" /></defs><a xlink:href="http://ya.ru" xlink:show="new" onmouseover="document.getElementById('opis').style.display='block'" onmouseout="document.getElementById('opis').style.display='none'"><text font-size="17" font-family="arial" fill=" #0000FF"><textPath xlink:href="#link0" startOffset="0%">ya.ru</textPath></text></a></svg>
  8. Я так тоже пробывал, но к сожалению когда ссылок больше чем одна, при переводе курсора с одной ссылки на другую предыдущая исчезает. http://codepen.io/anon/pen/PZjxVR
  9. Здравствуйте! Подскажите пожалуйста. При наведении курсора на ссылку появляется картинка, но она перекрывает ссылку. ДО наведения курсора http://hkar.ru/G26z После наведения курсора http://hkar.ru/G26A Хотя в стилях для картинки задано: a image {visibility: hidden; position: absolute; z-index:1;}А для ссылки при наведении: a:hover text {text-decoration: underline; position: absolute; z-index:100;}Весь код: <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <svgxmlns="http://www.w3.org/2000/svg" version="1.1"xmlns:xlink="http://www.w3.org/1999/xlink"width="330" height="330" viewBox="-18 -15 330 330"><path id="link1" d="M20,150 A130,130 0 1,1 20,150.01"stroke="grey" fill="none"/><style> a image {visibility: hidden; position: absolute; z-index:1;} a:hover image {visibility: visible;} a:hover text {text-decoration: underline; position: absolute; z-index:100;} </style> <a xlink:href="http://www.tolstoy.ru" xlink:show="new"><text font-size="16" font-family="arial" fill=" #0000FF"><textPath xlink:href="#link1" startOffset="0%">tolstoy.ru</textPath></text><image xlink:href="images/okr2.png" height="330" width="330" x="-18" y="-15"/></a></svg> <object data="link.svg" type="image/svg+xml" width="400" height="400" style="position: absolute; opacity: 1; ; top: 300px; left: 460px;" ></object></body></html>Также код вот здесь: http://codepen.io/anon/pen/vLZxea Заранее спасибо за помощь.
  10. Igor Schnaider, огромнейшее спасибо за помощь, всё робит!.http://codepen.io/anon/pen/BjRqBo
  11. Здравствуйте! Подскажите пожалуйста. При наведении на ссылку и при её нажатии должен по-идее изменятся её цвет, но этого не происходит. http://hkar.ru/FZ9f <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body><object data="link.svg" type="image/svg+xml" width="500" height="500" style="position: absolute; opacity: 1; z-index: 100!important; ; top: 285px; left: 442px;" ></object></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"><svgxmlns="http://www.w3.org/2000/svg" version="1.1"xmlns:xlink="http://www.w3.org/1999/xlink"width="330" height="330"><path id="link1" d="M20,150 A130,130 0 1,1 20,150.01"stroke="grey" fill="none"/><style>a:visited {color: #FF0000;} a:hover {color: #FFA500; }</style><a xlink:href="http://www.lermontov.niv.ru" xlink:show="new"><text font-size="16" font-family="arial" fill=" #0000FF"><textPath xlink:href="#link1" startOffset="19%">lermontov.niv.ru</textPath></text></a></svg>Файлы во вложенииhttps://yadi.sk/d/1PCUB5_nmm3P5
  12. Igor Schnaider, в очередной раз огромное вам спасибо!!! задание нужных параметров для viewBox всё решило!
  13. Здравствуйте! Подскажите пожалуйста. Проблема следующая, при наведении курсора на ссылку появляется изображние, но не полностью, часть изображения почему-то обрезана. Ссылки созданы на траектории окружности при помощью SVG. При наведении на ссылку pushkin должен появлятся круг, но появляется только 1/4 его часть. http://hkar.ru/FXMi При наведении курсора на две другие ссылки должна появлятся оружность, но она тоже появляется не целиком. http://hkar.ru/FXMj Все файлы разместил здесь: https://yadi.sk/d/NMvbqOdcmjz5F
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy