выплывающее окно
Здравствуйте! Извините за глупый вопрос, но подскажите пожалуйста как лучше реализовать выплываение окна с текстом при наведении курсора (или щелчке) на один из объектов в svg-картинке? Заранее спасибо.
|
Здравствуйте!
Судя по вашему сообщению, вы ну совсем не знаете javascript. Освойте основы языка и вопрос отпадет сам, полностью или частично. А с чем не справитесь - поможем. На сайте javascript можно начать изучать с учебника, раздел Основы javascript. Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/ Задавайте конкретные вопросы по ходу дела. |
Лучше всего реализовать средствами javascript!
|
ну вот так можно:
<style>
.b {
border: none;
width: 100%; // размер
height: 100%; // размер
background: url(это обычно состояние);
}
.button-hover {
background: url(при наведение);
}
.button-click {
background: url(по щелчку);
}
</style>
<button style="свои настройки"> <div id="a" class="b" onclick="какаято функция"></div></button>
<script>
var button = document.getElementById('a')
button.onmouseover = function() {
addClass(this, 'button-hover')
}
button.onmouseout = function() {
removeClass(this, 'button-hover')
removeClass(this, 'button-click')
}
button.onmousedown = function() {
addClass(this, 'button-click')
}
button.onmouseup = function() {
removeClass(this, 'button-click')
}
// -------------- helpers --------------
function addClass(el, cls) {
for(var c = el.className.split(' '),i=c.length-1; i>=0; i--) {
if (c[i] == cls) return
}
el.className += ' '+cls
}
function removeClass(el, cls) {
for(var c = el.className.split(' '),i=c.length-1; i>=0; i--) {
if (c[i] == cls) c.splice(i,1)
}
el.className = c.join(' ')
}
</script>
Вот как то так. |
| Часовой пояс GMT +3, время: 10:18. |