ещё вопрос

Игорь Ермаков · October 5, 2008

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

Ruster · October 5, 2008

CSS

.ruster
{
	width: 100px;
	height: 100px;
	background: url('КАРТИНКА-1.jpg') 0 0 no-repeat;
}

a:hover .ruster
{
	background: url('КАРТИНКА-2.jpg') 0 0 no-repeat;
}

HTML

<a href="#"><img src="spacer.gif" alt="Описание картинки" class="ruster" /></a>

spacer.gif - это прозрачная картинка 1x1px

Edited October 5, 2008 by Ruster

Игорь Ермаков · October 5, 2008

попробую спасибо

Игорь Ермаков · October 5, 2008

не получается браузер не хочет отображать картинку

Ruster · October 6, 2008

Вот полный код, на значит что то не так сделал

<!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" xml:lang="ru" lang="ru">
<head>
	<title>HTML Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">

.ruster
{
	width: 88px;
	height: 31px;
	background: url('http://ruster.info/templates/i/vcss.gif') 0 0 no-repeat;
	border: none;
}

a:hover .ruster
{
	background: url('http://ruster.info/templates/i/valid-xhtml10.png') 0 0 no-repeat;
}

	</style>
</head>
<body>


<p>

	<a href="#"><img src="http://ruster.info/templates/i/spacer.gif" alt="Описание картинки" class="ruster" /></a>

</p>


</body>
</html>

P.S.

чтобы вторая картинка сразу же загружалась без задержки (если даже у пользователя очень медленный интернет)

его ты должен предварительно загрузить, или советую объединить две картинки в одну и при a:hover не менять картинку, а просто позицию.

vvsh · October 6, 2008

Можно вот так попробовать

<img src="ссылка на картинку" onMouseOver="this.src:картинку при наведении" onMouseOut="this.src:картинка без наведения">

Victor Ananiev · October 6, 2008

на цсс более кроссбраузерно, точнее некоторые параноики скрипты вырубают))

vvsh · October 6, 2008

на цсс более кроссбраузерно, точнее некоторые параноики скрипты вырубают))

Я просто предложил свой вариант.

Sign In

ещё вопрос

Question

Игорь Ермаков

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Ruster

Link to comment

Share on other sites

Игорь Ермаков

Link to comment

Share on other sites

Игорь Ермаков

Link to comment

Share on other sites

Ruster

Link to comment

Share on other sites

vvsh

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

vvsh

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information