[First of may]

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

Заранее спасибо.

@темы: HTML

Comments

[Itsygo]

div onhover = .....
через картинку в диве и innerhtml
или getelementbyid с айди картинки и смену src.

[Trotil]

Можно. Обработкой события onmouseover (мышка наведена на элемент) и onmouseout (мышка покинула элемент)

Картинки предварительно лучше подгрузить:

var img = new Object();
img["news1"] = new Image(75, 53);
img["news1"].src="news1.jpg";

и т.д.

[Itsygo]

Trotil, м, ты прав.можно и легче без css www.w3.org/WAI/UA/TS/html401/cp0102/0102-ONMOUS...

[First of may]

Trotil Itsygo
спасибо, я поняла

[chipp]

Trotil, м, ты прав.можно и легче без css www.w3.org/WAI/UA/TS/html401/cp0102/0102-ONMOUS...

уважаемый Itsygo . Перед тем как писать что-то, проверьте свои слова. Где вы там css нашли? это чистейший Javasсript. и то, на что вы дали ссылку работает по тому же принципу, только размусолено для тех, кто не понимает ничего в JavaScript

[Itsygo]

chipp,
уважаемый,
прочитай моё первое сообщение. я предложил с css (через div/innerhtml), т.к не помнил про хэндлеры onmouseover/onmouseout в < img а ссылку я дал на пример с тем, что предложил Trotil, и да, там чистый js.

[Джей Ди]

Trotil First of may ещё можно запендюрить два изображения в дивы с абсолютным позиционированием, и менять их прозрачночть. Получится плавное перетекание одной картинки в другую, но там нужно помучаться чуть дольше.

Trotil в принципе можно и не создавать объект изображения, а просто подменить срк у элемента. Браузер сам загрузит пик, но при первом наведении будет небольшой скачок. (вариант Itsygo )

[Trotil]

но при первом наведении будет небольшой скачок.

Лично мне такой вариант не очень по душе...
Поэтому я и предложил предварительную подгрузку.

[Itsygo]

>Trotil First of may ещё можно запендюрить два изображения в дивы с абсолютным позиционированием, и менять их прозрачночть
мона тогда не прозрачность а z-index

[Co0L]

Мне понравилось решение в форуме phpBB3) Там для кнопок используются картинки, разделенные горизонтально на 2 части) Верхняя часть кнопка в обычном состоянии, нижняя часть кнопка при наведении. Потом методом onmouseover меняется позиционирование кнопки путем изменения значения top на величину равную (0-половина общей высоты картинки). Преимущество такого метода в том, что сменные картинки подгружаются сразу)

[First of may]

Itsygo
А как это сделать? Есть ли пример?

[Джей Ди]

Itsygo будет резкий скачок (вроде так ). Абсолютно бессмысленно беря во внимание вариант Trotil (у него проще).
First of may ну вот например мой код (плавно показывает мой логопит на старт пэйдж).

<sсriрt language=Javasсript>
var opacity = 0;
var handler = 0;
function hello_show()
{
opacity++;
document.getElementById("logotype").style.filter="alpha(opacity="+opacity+")";
document.getElementById("logotype").style.opacity=opacity/100;
handler = setTimeout("hello_show()",10);
if (opacity>99) clearTimeout(handler);
}
next();
</sсriрt>
<img src="logotype.gif" alt="Logotype." style="margin-bottom: 50px; opacity: 0; filter: alpha(opacity=0); " id="logotype" onload="setTimeout('hello_show()',1000);">

Просто повесть обработчик на две картинки и расположи их одна по одной.

[Itsygo]

Волчонок Джей,
с opacity (вроде) НЕ кроссбраузеровое решение. недавно делал сайт для проэкта, за...лся с опасити png и гифов и попытками заставить её правильно работать на ie6 (opera и ff вроде были ничего, хотя у ff (вроде) другое название фильтра).

Насчет скачка, может быть, но мне казалось, что если прелоудить картинки и они одного размера - то всё должно быть ок (по кр мере в варианте 2).

First of may,
1 вариант - 2 div с картинками и разными z-index'aми, - достаешь дивы через getelementbyid, меняешь z-index при onmouseover/out (или можно поменять display:none/block). Примера нет, писать влом. Погугли, похожих примеров должно быть предостаточно. upd (www.htmlforums.com/client-side-scripting/t-onmo...)

2ой вариант просто с хэндлерами onmouseover/out на img мя давал ссылку выше.

[Джей Ди]

Itsygo обрати внимание: у меня и опаси и фильтр.

[Itsygo]

Itsygo обрати внимание: у меня и опаси и фильтр.

каюсь. тем не менее, работает ли это на i.e 6?

[Джей Ди]

Itsygo йа-йа. =) Я всегда тестирую в 7 п 6 ослике. =) Они ведь такие похожие, но совсем разные. =)
Z-индекс - это позиционирование слоя, и при смене хоть на одну единицу слой выскачит вверх. Вот и получится резкий скачек изображения. А вот со сменой прозрачности можно добиться морфинга.

[Itsygo]

А какая реакция при display:none -> block и visibility: hidden-> visible?

[Джей Ди]

Itsygo поясни вопрос.

[Itsygo]

уже попробовал сам, просто было лень .
но спасибо за внимание

[Джей Ди]

Itsygo при визибле = хидден - блок генерируется но не отображается. Дли дисплэй = ноне, ене генерируется (картинки не подгружаются).