скрытие картинки при помощи css

msatmb · 24.08.2006, 07:39

Собственно вот такой вопросик. Есть ссылочка при наведении на которую в определенной части сайта появляется картинка. Убираем мышку с сылки, картинка тоже исчезает. Знаю что это можно реализовать посредством css при помощи visible и hidden. А вот что-то допетрить не получается

Может подскажите, или ссылочку дадите на пример

*ana* · 25.08.2006, 23:49

Да можно, но это не будет работать в грёбанном IE, так как IE не поддерживает половину CSS, а свойство .hover только для ссылок

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

18.09.2006, 09:32

Без использования javascript'а такого поведения не достич.

Цитата:

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


	Да можно, но это не будет работать в грёбанном IE, так как IE не поддерживает половину CSS, а свойство .hover только для ссылок

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

Wolverin · 20.10.2006, 17:34

Управление стилями производится с помощью JavaScript.
Вот в принципе неплохой пример:

Код:

<script language="javascript"> 
function Show()
{ 
	var obj=document.getElementById("MyImage");
	obj.style.visibility="visible";
} 
function Hide()
{
	var obj=document.getElementById("MyImage");
	obj.style.visibility="hidden";
}
</script>
<body>
<a href="javascript:void(0)" onMouseOver="Show()" onMouseOut="Hide()">Моя ссылка</a><br><br>
<img src="mp3.jpg" id="MyImage" style="visibility:hidden">
</body>

darkwolf · 13.12.2006, 09:44

Попробуй так

<form>
<input type="button" value="скрыть" onclick="document.all['level1'].style.display='none'">
<input type="button" value="показать" onclick="document.all['level1'].style.display='block'">
</form>

Добавлено через 3 минуты
#level1
{
position: absolute; top: 150px; left: 200px;
margin-top: 10px;
margin-right: 8px;
margin-bottom: 10px;
margin-left: 8px;
width: 30%;
height: 50%;
background: #6699CC;
border-top-color: #EEC714;
border-right-color: #000;
border-bottom-color: #EEC714;
border-left-color: #000 ;
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 1px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: double;
border-bottom-style: solid;
border-left-style: double;
text-align: center;
color: #FFFFFF;
z-index: 2;
}
Но повторюсь, это писалось на скорую руку в качестве примера. И после того, как нажмешь на кнопку скрыть, нажми F5, чтобы все обратно возвратилось.

p306ec · 25.11.2009, 23:08

Обрабатывать яваскриптом наведение на линк и показывать/скрывать картинку. По-другому - никак.

sphinx2001 · 28.11.2009, 10:41

а обработкой свойств .hover не получается чтоли? кусочек примера можно в студию?

SleepDog · 22.12.2009, 01:47

скинь пример

tvoi_man · 12.08.2010, 17:13

http://cssplay.co.uk тут много примеров кроссбразерных решений. яваскрипт использовать необязательно, можнореализовать на чистом css. пример накидаю, как появится время.

akseool · 12.08.2010, 20:49

делал на css и html без скриптов появление картинки по наведению курсора.

CSS:пример кода

HTML:пример кода

брал вот от сюда - http://www.dynamicdrive.com/style/cs...-image-viewer/
немного изменил и настроил под себя.

raycheel · 05.12.2010, 08:05

Пример у DarkWolf подойдет. Сасибо.

Eva_198 · 14.10.2012, 11:51

Возможно http://css.flepstudio.org/en/css-tips/css-tooltip.html (вариант 2) - подоходящим покажется так же?

24.08.2006, 07:39	#1
msatmb Новичок Пол: Регистрация: 30.03.2006 Сообщений: 16 Репутация: 3	скрытие картинки при помощи css Собственно вот такой вопросик. Есть ссылочка при наведении на которую в определенной части сайта появляется картинка. Убираем мышку с сылки, картинка тоже исчезает. Знаю что это можно реализовать посредством css при помощи visible и hidden. А вот что-то допетрить не получается Может подскажите, или ссылочку дадите на пример

25.08.2006, 23:49	#2
ana Модератор Пол: Регистрация: 20.10.2004 Адрес: Germany Сообщений: 543 Репутация: 312	Re: скрытие картинки при помощи css Да можно, но это не будет работать в грёбанном IE, так как IE не поддерживает половину CSS, а свойство .hover только для ссылок А почему нельза использовать JavaScript ? __________________ Лучше сидеть в маленькой душной пивной , чем работать на большом светлом заводе...

13.12.2006, 09:44	#5
darkwolf Неактивный пользователь Регистрация: 15.08.2006 Адрес: Латвия Сообщений: 5 Репутация: 3	Re: скрытие картинки при помощи css Попробуй так <form> <input type="button" value="скрыть" onclick="document.all['level1'].style.display='none'"> <input type="button" value="показать" onclick="document.all['level1'].style.display='block'"> </form> Добавлено через 3 минуты #level1 { position: absolute; top: 150px; left: 200px; margin-top: 10px; margin-right: 8px; margin-bottom: 10px; margin-left: 8px; width: 30%; height: 50%; background: #6699CC; border-top-color: #EEC714; border-right-color: #000; border-bottom-color: #EEC714; border-left-color: #000 ; border-top-width: 1px; border-right-width: 2px; border-bottom-width: 1px; border-left-width: 2px; border-top-style: solid; border-right-style: double; border-bottom-style: solid; border-left-style: double; text-align: center; color: #FFFFFF; z-index: 2; } Но повторюсь, это писалось на скорую руку в качестве примера. И после того, как нажмешь на кнопку скрыть, нажми F5, чтобы все обратно возвратилось. __________________ Vanitas vanitatum! Все суета сует! Последний раз редактировалось darkwolf; 13.12.2006 в 09:48.. Причина: Добавлено сообщение

28.11.2009, 10:41	#7
sphinx2001 Новичок Пол: Регистрация: 28.11.2009 Сообщений: 10 Репутация: 2	Re: скрытие картинки при помощи css а обработкой свойств .hover не получается чтоли? кусочек примера можно в студию?

22.12.2009, 01:47	#8
SleepDog Неактивный пользователь Пол: Регистрация: 26.09.2008 Сообщений: 4 Репутация: 1	Re: скрытие картинки при помощи css скинь пример

25.11.2009, 23:08	#6
p306ec Пользователь Пол: Регистрация: 23.09.2007 Сообщений: 48 Репутация: 2	Re: скрытие картинки при помощи css Обрабатывать яваскриптом наведение на линк и показывать/скрывать картинку. По-другому - никак.

12.08.2010, 17:13	#9
tvoi_man Неактивный пользователь Регистрация: 12.08.2010 Сообщений: 11 Репутация: 0	Re: скрытие картинки при помощи css http://cssplay.co.uk тут много примеров кроссбразерных решений. яваскрипт использовать необязательно, можнореализовать на чистом css. пример накидаю, как появится время.

05.12.2010, 08:05	#11
raycheel Неактивный пользователь Регистрация: 05.12.2010 Сообщений: 4 Репутация: 1	Re: скрытие картинки при помощи css Пример у DarkWolf подойдет. Сасибо.

14.10.2012, 11:51	#12
Eva_198 Пользователь Пол: Регистрация: 12.10.2012 Адрес: москва Сообщений: 104 Репутация: 246	Re: скрытие картинки при помощи css Возможно http://css.flepstudio.org/en/css-tips/css-tooltip.html (вариант 2) - подоходящим покажется так же?

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Скрытие розеток под навесной TV	ВадимАчка	Электрика	33	23.08.2014 00:54
Как ускорить скрытие неиспользуемых значков в трее	vers139	Windows XP	5	09.12.2008 12:24
Javascript скрытие текста.(HIDE)	crazy59	Java Script	1	11.02.2008 06:58