Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   выплывающее окно (https://javascript.ru/forum/dom-window/37642-vyplyvayushhee-okno.html)

SuperNoob 28.04.2013 21:04

выплывающее окно
 
Здравствуйте! Извините за глупый вопрос, но подскажите пожалуйста как лучше реализовать выплываение окна с текстом при наведении курсора (или щелчке) на один из объектов в svg-картинке? Заранее спасибо.

dmitriymar 28.04.2013 21:22

Здравствуйте!

Судя по вашему сообщению, вы ну совсем не знаете javascript.

Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.

На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/

Задавайте конкретные вопросы по ходу дела.

wc3banderlog 30.04.2013 12:08

Лучше всего реализовать средствами javascript!

Владлен 30.04.2013 12:28

ну вот так можно:
<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, время: 18:57.