Форум

rafka1 · #1 (**permalink**) 14.11.2011, 15:56

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

Изначально думал использовать 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. · #2 (**permalink**) 14.11.2011, 16:03

Сообщение от rafka1

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

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

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

rafka1 · #3 (**permalink**) 14.11.2011, 16:25

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

Pavel M. · #4 (**permalink**) 14.11.2011, 16:53

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

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

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

rafka1 · #5 (**permalink**) 14.11.2011, 18:09

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

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

trikadin · #6 (**permalink**) 14.11.2011, 19:18

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

Pavel M. · #7 (**permalink**) 14.11.2011, 21:16

Сообщение от rafka1

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

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

Андрей38 · #8 (**permalink**) 15.11.2011, 03:32

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

rafka1 · #9 (**permalink**) 15.11.2011, 11:49

Сообщение от Pavel M.

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

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

Pavel M. · #10 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript