Kaylang Вредный и упрямый Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору stilus34 Код: <a href="ссылка" onMouseOver="document.image1.src='цветная_картинка.gif'" onMouseOut="document.image1.src='нецветная_картинка.gif'"><img src="нецветная_картинка.gif" border=0 name="image1"></a> Всего записей: 38887 | Зарегистр. 29-08-2002 | Отправлено: 17:17 10-02-2011 | Исправлено: Kaylang, 17:18 10-02-2011

poyt Advanced Member Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору stilus34 Другой вариант - сделать это на CSS, используя свойства background и псевдо-селектор :hover Всего записей: 642 | Зарегистр. 26-06-2006 | Отправлено: 19:21 10-02-2011

Kaylang Вредный и упрямый Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору poyt Цитата:  сделать это на CSS, используя свойства background и псевдо-селектор :hover Тоже правильно. Ну и привел бы сразу пример. CSS: Код: a.rollover {     background: url('нецветная_картинка.gif');     border: 0px solid #000; }   a.rollover:hover {     background: url('цветная_картинка.gif'); }   HTML: Код: <a href="ссылка" class="rollover"> </a>   Как-то так, если не ошибся. Всего записей: 38887 | Зарегистр. 29-08-2002 | Отправлено: 20:03 10-02-2011

ASE_DAG Gold Member Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору stilus34 А еще имейте в виду, что «цветная картинка» начнет загружаться только после того, как вы наведете курсором на ссылку. Поэтому в первый раз картинка может на время пропасть. Как вариант решения, надо слепить обе гифки в один файл (см. CSS sprites). ---------- Dmitry Alexandrov <321942@gmail.com> [PGP] [BTC] Всего записей: 9272 | Зарегистр. 12-05-2005 | Отправлено: 20:31 10-02-2011 | Исправлено: ASE_DAG, 20:32 10-02-2011

Kaylang Вредный и упрямый Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору ASE_DAG Цитата: А еще имейте в виду, что «цветная картинка» начнет загружаться только после того, как вы наведете курсором на ссылку. Можно сделать прелоад. Цитата: Как вариант решения, надо слепить обе картинки в один файл (см. CSS sprites). Тоже верно. Пример приведешь или мне опять это делать?   CSS Код: a.rollover {     background: url('картинка.jpg');     width: ширина_рисункаpx;     height: высота_нецветной_части_рисунка px; } a.rollover:hover {     background-position: 0px -высота_нецветной_части_рисунка px; } Сам рисунок состоит из двух частей: верхняя нецветная, которая отображается всегда и нижняя цветная, которая отображается при наведении мыши.   Как-то так. Всего записей: 38887 | Зарегистр. 29-08-2002 | Отправлено: 20:33 10-02-2011 | Исправлено: Kaylang, 20:39 10-02-2011

Cheery .:МордератоР:. Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору stilus34 вы хотите мультибраузерное решение? нет такого.. только два варианта картинок. иначе возня с фильтрами в IE или работа с canvas в других браузерах, но не все это поддерживают http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html ---------- Away/DND Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 20:50 10-02-2011

Kaylang Вредный и упрямый Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Cheery Как я понял ему нужно, чтобы картинки были привязаны к ссылкам, которые будут отображаться под картинками, и чтобы при наведении на ссылку картинка менялась.   stilus34 Сами картинки, при этом, не должны быть ссылками? Всего записей: 38887 | Зарегистр. 29-08-2002 | Отправлено: 21:09 10-02-2011

poyt Advanced Member Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору stilus34 Цитата: Можно и ссылками их сделать тоже В случае картинок-ссылок вариант подсказал Kaylang. Дополню, что сама ссылка становится контейнером, а фоном в ней размещается картинка при помощи CSS и свойства background. А изменение фона будет производится при наведении и таким образом срабатывании псевдо-элемента :hover.   В случае, если у вас будет ещё и ссылка при наведении на которую должна меняться картинка - то тогда картинкам необходимо назначить идентификаторами и управлять их CSS-свойствами при наведении. Всего записей: 642 | Зарегистр. 26-06-2006 | Отправлено: 13:40 11-02-2011

Kaylang Вредный и упрямый Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору stilus34 Цитата: Можно и ссылками их сделать тоже   Можно все меню разместить в таблице (в div'ах). В ячейке (div'е) фоном указывать картинку, чтобы она закрывала верхнюю часть, а в нижней располагать ссылку. При наведении на ссылку (onMouseOver) менять фон у родительского элемента по this.parentElement.className="класс для цветной картинки", по смещению курсора мыши со ссылки (onMouseOut) менять фон у родительского элемента this.parentElement.className="класс для нецветной картинки". Как-то так.   или так: Цитата: В случае, если у вас будет ещё и ссылка при наведении на которую должна меняться картинка - то тогда картинкам необходимо назначить идентификаторами и управлять их CSS-свойствами при наведении. Только тогда надо продумать идентификаторы, чтобы можно было правильно связать идентификатор каждой ссылки с идентификатором нужной картинки. Всего записей: 38887 | Зарегистр. 29-08-2002 | Отправлено: 14:52 11-02-2011 | Исправлено: Kaylang, 14:54 11-02-2011

bredonosec Platinum Member Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Kaylang значительно проще всего навсего менять положение координаты картинки при наведении.   Цитата: background-position: 0px -высота_нецветной_части_рисунка px;   Цитата: Сам рисунок состоит из двух частей: верхняя нецветная, которая отображается всегда и нижняя цветная, которая отображается при наведении мыши.   ээ.. вообще-то эффект получается именно такой, как человеку надо. на дефолт и он-аут он видит первую часть картинку, на он-овер - вторую, на клик можно видеть третью, на визитед можно сделать 4-ю.   Где-то у меня живые примеры валялись, но сто лет назад и забыл, как те проекты зовутся. ---------- Вопрос: 'Что человек курит?' как правило возникает не когда ты слышишь, как он дышит, а когда видишь, что он пишет Пропеллер играет роль вентилятора, он останавливается -пилот потеет Аськи нету. Всего записей: 16334 | Зарегистр. 13-02-2003 | Отправлено: 15:35 11-02-2011

Kaylang Вредный и упрямый Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору bredonosec Дело в том, что ему нужна смена картинок при наведении на ссылку, а не на саму картинку.   Хотя если сделать картинки, в которых верхняя (нецветная) и нижняя (цветная) будут иметь полностью прозрачную часть, которая будет располагаться там, где ссылка, то вполне можно.   ЗЫ. А все необходимое для этого указано выше. Единственное, что можно добавить, это вместо указания смещения в px Код: a.rollover:hover {     background-position: 0px -высота_нецветной_части_рисунка px; } можно просто позиционировать картинку по нижнему краю: Код: a.rollover:hover {     background-position: 0px bottom; } Всего записей: 38887 | Зарегистр. 29-08-2002 | Отправлено: 16:20 11-02-2011 | Исправлено: Kaylang, 16:22 11-02-2011

ASE_DAG Gold Member Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Господа, простите, но оп, по-моему, действительно хотел обойтись без заготовки двух версий одной фотографии заранее. См. пост Cheery.   stilus34 Так? ---------- Dmitry Alexandrov <321942@gmail.com> [PGP] [BTC] Всего записей: 9272 | Зарегистр. 12-05-2005 | Отправлено: 00:40 12-02-2011

Kaylang Вредный и упрямый Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору ASE_DAG Цитата: Господа, простите, но оп, по-моему, действительно хотел обойтись без заготовки двух версий одной фотографии заранее. Сомневаюсь, что в автоматическом режиме вы сможете расскрасить нецветную фотографию. Всего записей: 38887 | Зарегистр. 29-08-2002 | Отправлено: 01:18 12-02-2011

Cheery .:МордератоР:. Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Kaylang Цитата: Сомневаюсь, что в автоматическом режиме вы сможете расскрасить нецветную фотографию. можно автоматически сделать из цветной нецветную ---------- Away/DND Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 01:32 12-02-2011

bredonosec Platinum Member Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Цитата: Дело в том, что ему нужна смена картинок при наведении на ссылку, а не на саму картинку. без разницы, емнис.   Хотя ч-б фильтр тоже вроде как имелся (но мне кажется, это решение будет больше ресурсов кушать) Всего записей: 16334 | Зарегистр. 13-02-2003 | Отправлено: 12:43 12-02-2011

Kaylang Вредный и упрямый Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Cheery Цитата: можно автоматически сделать из цветной нецветную Согласен, но Цитата: И при наведении на ссылку картинка становилась цветной.   bredonosec Цитата: без разницы, емнис. Не совсем. Первоначально он спросил как изменять свойство одного объекта при наведении мыши на другой. Всего записей: 38887 | Зарегистр. 29-08-2002 | Отправлено: 13:16 12-02-2011 | Исправлено: Kaylang, 13:17 12-02-2011

bredonosec Platinum Member Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Kaylang Цитата: Согласен, но   Цитата: И при наведении на ссылку картинка становилась цветной.   ёмаё, смеешься? По дефолту фильтр включен, по оновер выключается )))     Цитата: Первоначально он спросил как изменять свойство одного объекта при наведении мыши на другой. ну тогда с жабаскриптом, ок ) Всего записей: 16334 | Зарегистр. 13-02-2003 | Отправлено: 13:21 12-02-2011

Страницы: 1 2

Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Смена картинки при наведении на ссылку

Переход по форумам  Закладки   » Компьютеры Цифровое изображение Программы Microsoft Windows UNIX Другие OS Hardware В помощь сисадмину Прикладное программирование Игры Форумные игры   » Интернет Web-программирование В помощь вебмастеру Графика Хостинг Зацените-ка!   » Тематические Ikonboard v.2 Ikonboard v.3 Invision Board Другие форумы PHP-Nuke и другие порталы Мобила   » Общие Спорт Флейм Темы по региональным встречам Музыка и Кино Юмор Литература и Живопись   » Ru.Board Новости Помощь по форуму   » Андеграунд eBookz Варезник Раздачи и акции Мобильный варезник Андеграунд Игры и фильмы   » Специальные Тестирование