появление текста при наведении курсора на рисунок

textcloner · May 18, 2009

прошу подсказать, как сделать так, чтобы при наведении курсора на картинку в определенном месте появлялся текст???

я так понимаю это реализуется с помощью javascript?

s0rr0w · May 18, 2009

прошу подсказать, как сделать так, чтобы при наведении курсора на картинку в определенном месте появлялся текст???
я так понимаю это реализуется с помощью javascript?

Да. На этом форуме было триста примеров как это сделать.

textcloner · May 18, 2009

извиняюсь, но что-то найти то что нужно не получается.

belovres · May 18, 2009

Вот бери это

Всплывающие подсказки

И адаптируй под себя, хотя это вроде то что надо ток называется по другому

Styx · May 18, 2009

Кроссбраузерно это можно сделать так...

<p><img src="img.gif" alt="image" onmouseover="document.getElementById('hiddenTxt').firstChild.data='Text is visible!';" onmouseout="document.getElementById('hiddenTxt').firstChild.data=' ';" /></p>
<div id="hiddenTxt"> </div>

Zippovich · May 18, 2009

Если использовать конструкцию:

<a><img /></a>, то можно и без js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test title image</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
</head>
<body>
	<p>
		<a href="java script:;" title="Image">
			<span>Это подсказка, как и было задумано.</span>
			<img src="images/test-img.jpg" alt="Это картинка, при наведении на которую появляется красивая подсказка. Сделано без JS." />
		</a>
	</p>
</body>
</html>

* {padding: 0; margin: 0}
body {padding: 40px; font: 24px Arial, Tahoma, Verdana, sans-serif}
p {text-align: center}
img {border: 0}
a {position: relative; display: inline-block; width: 226px; color: lightblue; text-decoration: none; cursor: default}
a:hover {background: transparent}
a span {display: none; width: 200px; position: absolute; top: 50%; left: 50%}
a:hover span {display: block; border: 3px solid #e5e5e5; opacity: 0.9; background: #5d5d5d; filter: alpha(opacity=90)}

http://css.if.ua/podskazka/

Edited May 18, 2009 by Zippovich

s0rr0w · May 18, 2009

a href="java script:;"

Руки бы отрывал за такое...

Zippovich · May 18, 2009

да, я бы тоже оторвал руки за кривой форум, который ставит пробел там где я его не ставил

SelenIT · May 18, 2009

Дело не в пробеле, а вообще ссылках с таким псевдопротоколом. Которые даже в более осмысленном варианте javаscript:void() убивают все эффекты смены картинок в IE, а в более запущенных случаях и вовсе затирают содержимое окна черт-те чем.

Единственные разумные применения этой нестандартной фичи — отладочный вывод и букмарклеты.

"Глухая" ссылка делается так: <a href="#" onclick="return false">

Edited May 18, 2009 by SelenIT

Zippovich · May 18, 2009

Ваш вариант, что бы было <a> и никуда не переходило?

SelenIT · May 18, 2009

См. отредактированный пост выше.

Zippovich · May 18, 2009

За правильную глухую ссылку спасибо.

Я конечно извиняюсь за свою необразованность, есть где про почитать про вредность: java script:; . Что там затирается и какие эффекты не работают, а то что-то не замечал ни разу.

s0rr0w · May 18, 2009

Начнем с другого, такого протокола как javascript в природе не существует.

SelenIT · May 18, 2009

Пример разрушения динамики картинок в IE: http://forum.vingrad.ru/forum/topic-178421.html

Общие соображения: http://javascript.ru/unsorted/why_href_js_is_bad

Позитивный пример (правда, очень-очень старый: http://kruglov.ru/articles/nontrivialjs/#windowprint

Mants · May 26, 2009

Курчу верчу но в Опере заставить работать не могу. Лис норм, ИЕ тоже норм, а Опера не хочет. Пример интересный, без js а то сейчас использую длинющий код, но стабильно работающий. Правда сделанный на основе всплывающеего меню.

Zippovich · June 2, 2009

Пример разрушения динамики картинок в IE: http://forum.vingrad.ru/forum/topic-178421.html
Общие соображения: http://javascript.ru/unsorted/why_href_js_is_bad
Позитивный пример (правда, очень-очень старый: http://kruglov.ru/articles/nontrivialjs/#windowprint

Огромное спасибо за ссылки.

Sign In

появление текста при наведении курсора на рисунок

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information