картинка+ссылка, наведение другая картинка

[sedrik]

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

[Great Rash]

http://htmlbook.ru/css/hover.html

«css спрайты» в Google.

[red_dot]

Это можно осуществить, например, средствами java script:

<img id="change_it" src="image_1.jpg" />
<a href="#" onmouseover="change_image()" onmouseout="return_image()">Ссылка</a>

<script type="text/javascript">

	function change_image() {
		document.getElementById("change_it").src="image_2.jpg";
	}

	function return_image() {
		document.getElementById("change_it").src="image_1.jpg";
	}

</script>

Хотя лучше сделать только лишь средствами HTML+CSS, например, сделать блок div, внутри ссылка. У блока сделать фон, но такой фон, создающий иллюзию того, что около ссылки находится картинка. Тогда при помощи псевдокласса :hover блока div при наведении мыши на этот блок можно поменять у него фон на другой. Тогда будет казаться, что картинка рядом сменилась. Есть и другие способы, всё зависит от вашей конкретной цели.

[swetlana]

red_dot, ну вы что-то прямо-таки вредные советы даёте.

Зачем придумывать что-то сложное?

<a class="sly" href="stp://there.foo">ссылка</a>

Этого кода html достаточно.

А в css так:

a.sly {
display: block;
padding: 32px 8px 32px 64px;
background: url(firstimage.png) left no-repeat;
}
a.sly:hover {
background-image: url(secondimage.png);
}

и всё.

Чем проще, тем лучше.

[sedrik]

спасибо за советы! С ява конечно, перебор но еще решил сделать через onmouseover. как сделаю выложу код.

[red_dot]

@swetlana, да действительно, почесав потом репку, понял что с JavaScript переборщил Но впринципе ваш вариант - это тоже самое что я предлагал во втором случае, только вы используете тег a вместо div и наглядно показали это в действии.

@sedrik, но ещё лучше использовать CSS-спрайты, которые имеют несколько преимуществ перед использованием нескольких отдельных изображений.