Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   помоги те с onmouseover (https://javascript.ru/forum/dom-window/23157-pomogi-te-s-onmouseover.html)

rafka1 14.11.2011 15:56

помоги те с onmouseover
 
есть задача при наведении на опред участок картинки сверху картинки высвечивается текст.

Изначально думал использовать area:hover, но это невозможно.

в цсс все бы выглядело так area#button1:hover span {

display:block;

position: absolute;

margin-left: -150%;

top: -15%;


как это же записать с помощью onmouseover ?


нашел такой пример, но он мне не подходит, он лишь заменяет саму картинку

<area onmouseover="hover(this);" onmouseout="unhover(this);" href="...

<script>
function hover(obj) {
obj.style.backgroundImage="img/hover.jpg";
}

function unhover(obj) {
obj.style.backgroundImage="img/nohover.jpg";
}
</script>

Pavel M. 14.11.2011 16:03

Цитата:

Сообщение от rafka1
есть задача при наведении на опред участок картинки сверху картинки высвечивается текст.

Изначально думал использовать area:hover, но это невозможно.

почему css невозможно использовать ?

rafka1 14.11.2011 16:25

потому что hover нельзя применять к <area>

Pavel M. 14.11.2011 16:53

я имел в виду первый абзац

> есть задача при наведении на опред участок картинки сверху картинки высвечивается текст.

почему css невозможно использовать ?

rafka1 14.11.2011 18:09

потому что чтобы добиться кликабельности лишь определенной части картинки надо использовать теги <map> и <area>, а чтобы при наведении на эту самую определенную часть происходило какое то действо, в данном случае всплывал текст сверху надо использовать hover.
это если речь идет о цсс.

или вы знаете альтернативный метод с помощью css не использовать area:hover ?

trikadin 14.11.2011 19:18

rafka1, вы не первый с такой проблемой) У меня есть готовый скрипт, тысячи за две отдам.

Pavel M. 14.11.2011 21:16

Цитата:

Сообщение от rafka1
или вы знаете альтернативный метод с помощью css не использовать area:hover ?

можно, например, над тем местом картинки сверху расположить html элемент и на него повесить обработчик :hover

Андрей38 15.11.2011 03:32

Я вообще-то из Квери.
Тут может подойти Тулпит .Пусть появляеться и исчезает при достижении по Х такому-то и У-такому то.
получиться тож же ховер с границами ,вместо добавления дива к каждой картинке.А текст-див будет один на все картинки и постоянно следовать за курсором ...

rafka1 15.11.2011 11:49

Цитата:

Сообщение от Pavel M. (Сообщение 136459)
можно, например, над тем местом картинки сверху расположить html элемент и на него повесить обработчик :hover

ну тогда ведь при наведении на желаемую часть картинки ничего всплывать не будет....так как ховер применен совсем к другому элементу....

Pavel M. 15.11.2011 13:09

Цитата:

Сообщение от rafka1
ну тогда ведь при наведении на желаемую часть картинки ничего всплывать не будет....так как ховер применен совсем к другому элементу....

можно, например, так

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>

  <style>
	p {
		background: green;
		width: 200px;
		height: 200px;
		margin: 0;
	}
	div {
		position: absolute;
		width: 130px;
		height: 70px;
		left: 30px;
		top: 30px;
		background: red;
		cursor: pointer;
	}

	h4 {
		background: blue;
		display: none;
	}

	div:hover + h4 {
		display: block;
	}

  </style>

</head>
<body>

	<p>Большой элемент</p>

	<div>область над ним</div>

	<h4>Что-то всплывающее</h4>
  
</body>
</html>


Часовой пояс GMT +3, время: 01:34.