Ссылка внутри изображения

[dimg]

У меня фон сайта - сложная картинка как фон фиксированной таблицы. Нужно сделать что-бы часть этой картинки фона (не прямоугольная эмблема без текста) работала как ссылка. Т.к. это background table то видимо MAP нельзя заставить работать, из-за сложной картинки нежелательно собирать фон из частей (хотя-бы из-за проблем с позиционированием в разных броузерах, то же в случае прозрачных гифов), можно использовать какой-то другой способ ссылки одинаково работающий в основных броузерах?

Спасибо.

[psywalker]

У меня фон сайта - сложная картинка как фон фиксированной таблицы. Нужно сделать что-бы часть этой картинки фона (не прямоугольная эмблема без текста) работала как ссылка. Т.к. это background table то видимо MAP нельзя заставить работать, из-за сложной картинки нежелательно собирать фон из частей (хотя-бы из-за проблем с позиционированием в разных броузерах, то же в случае прозрачных гифов), можно использовать какой-то другой способ ссылки одинаково работающий в основных броузерах?

Спасибо.

давай ссылку на страницу с таблицей и скрин той местности, которая должна быть кликабельной... поглядим, чё там у тя не выходит

[dimg]

давай ссылку на страницу с таблицей и скрин той местности, которая должна быть кликабельной... поглядим, чё там у тя не выходит

Нужно сделать ссылкой эмблему вверху красный треугольник

[psywalker]

Нужно сделать ссылкой эмблему вверху красный треугольник

Блин, это справа вверху который с надписью: ГРОМАДСЬКА ВАРТА ?

Лана, не важно, смысл такой короче: http://psywalker.ru/table/Table-BG.html

Edited September 25, 2009 by psywalker

[dimg]

Прикольно, спасибо.

Единственно хреново, что по справочнику Влада position в стилях не поддерживает нормально даже 6 IE, которій ещё у многих, поэтому я стараюсь такое не использовать, но здесь оставлю этот метод.

[psywalker]

Прикольно, спасибо.

Единственно хреново, что по справочнику Влада position в стилях не поддерживает нормально даже 6 IE, которій ещё у многих, поэтому я стараюсь такое не использовать, но здесь оставлю этот метод.

Даа, есть такое дело в ИЕ6, но такие вещи кажется он нормально понимает, в любом случае ты у себя протести и если всё гуд, то вполне достойное решение. А вообще изначально надо нормально верстать и тогда не нужно будет прибегать к таким извращениям

Edited September 25, 2009 by psywalker

[mishka]

position:absolute - ие6 нормально поддерживает.

Напишеш в ссылке(для поисковиков, да и вообще некрасиво будет пустым оставить) "громадська варта", задаш ссылке ширину-высоту, и текст скроешь text-indent:-9999px. Ну и абсолютом повесишь на нужное место.

[psywalker]

position:absolute - ие6 нормально поддерживает.

Напишеш в ссылке(для поисковиков, да и вообще некрасиво будет пустым оставить) "громадська варта", задаш ссылке ширину-высоту, и текст скроешь text-indent:-9999px. Ну и абсолютом повесишь на нужное место.

Нихрена медведь не прав ты, абсолют в ИЕ6 поддерживается НЕ нормально, У меня уже много случаев было, особенно связано с фоном внутри блока. А последний случай - это Логотип у меня пропал, он лежал в блоке с абсолютом, или помнишь недавно чел на форуме писал, что у него вообще блок с абсолютом исчез с Имгой (Жёлтый камаз) внутри? А главное в этих ситуациях никакой Зуум не помогает даже. Как нибудь столкнусь ещё разок, продемонстрирую тебе

Кстати вот тебе ещё один пример: Ссылки на абсолюте, когда нужно ховер эффект создать для всплывающей подсказки, часто бывает, что без behavior: url(csshover.htc); не обойтись, хотя поведение не понятное, вроде бы ссылки должен осёл понимать

Edited September 25, 2009 by psywalker

[mishka]

Нихрена медведь не прав ты, абсолют в ИЕ6 поддерживается НЕ нормально, У меня уже много случаев было, особенно связано с фоном внутри блока. А последний случай - это Логотип у меня пропал, он лежал в блоке с абсолютом, или помнишь недавно чел на форуме писал, что у него вообще блок с абсолютом исчез с Имгой (Жёлтый камаз) внутри? А главное в этих ситуациях никакой Зуум не помогает даже. Как нибудь столкнусь ещё разок, продемонстрирую тебе

Ну что тут тебе сказать... Практика, практика еще раз практика. Также увидишь что и опера иногда с сылками на абсолюте недружит. Но это все мелочи.

Абсолют нормально работает в ие6.

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

Edited September 26, 2009 by mishka2

[psywalker]

Ну что тут тебе сказать... Практика, практика еще раз практика. Также увидишь что и опера иногда с сылками на абсолюте недружит. Но это все мелочи.

Абсолют нормально работает в ие6.

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

Я понял Вас, уважаемый Гуру, а тогда не могли бы вы решить Простой пример с Абсолютом, просто у меня - новичка, не выходит ничего (видимо верстал через переподвыперд) Только пожалуйста БЕЗ исользования behavior: url(csshover.htc);, так как по Вашим словам ИЕ6 прекрасно работает с Абсолютом. Буду рад увидеть решение

1) Спрайт: http://psywalker.ru/Forum/Hover/sprite.gif

2) Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:hover</title>
<style type="text/css">
*{ margin: 0; padding: 0;}

	ul { list-style: none;}

			ul li a{ 
				display: block;
				text-align: center;
				width: 80px; 
				height: 20px; 
				background: url(sprite.gif) 50% 0 no-repeat; 
				padding-top: 30px;
				border: 1px solid red;
				position: relative;
			}
			ul li a span { 
				display: none; 
				position: absolute;
				top: 0;
				left: 0;
				width: 80px; 
				height: 20px; 
				padding-top: 30px; 
				background: #fff url(sprite.gif) 50% -72px no-repeat;
				text-align: center;


			}

			ul li a:hover span { display: block;}

</style>
</head>

<body>
	<ul>
		<li>
			<a href="#">Главная
				<span>НаведениЕ</span>

			</a>
		</li>
	</ul>
</body>
</html>

Edited September 26, 2009 by psywalker

[mishka]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>:hover</title>
	<style type="text/css">
	*{ margin: 0; padding: 0;}
	ul { list-style: none;}
	ul li a{
		display: block;
		text-align: center;
		width: 80px;
		height: 20px;
		background: url(sprite.gif) 50% 0 no-repeat;
		padding-top: 30px;
		border: 1px solid red;
		position: relative;
	}
	ul li a span {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 80px;
		height: 20px;
		padding-top: 30px;
		text-align: center;
		cursor:pointer;
	}
	ul li a:hover{
		background: url(sprite.gif) 50% -72px no-repeat;
		text-indent:-9999px;
	}
	ul li a:hover span { display: block;text-indent:0;}
	</style>
</head>

<body>
	<ul>
		<li>
			<a href="#">Главная
				<span>НаведениЕ</span>
			</a>
		</li>
	</ul>
</body>
</html>

Только не начинай рассказывать что неправильно... И типа "а если там это то потом то..."

Твой html я сохранил, и стили тоже несильно менял

Edited September 26, 2009 by mishka2

[psywalker]

Отлично медведь, снимаю шляпу перед мастером А идею я запомню, мне очень понравилась!

Вот кстати ещё одна моя реализация, тут вообще без абсолюта: http://psywalker.ru/Forum/Hover/main2.html