X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Смена картинки при наведении
inartur
inartur
Topic Starter сообщение 5.9.2011, 15:07; Ответить: inartur
Сообщение #1


Здравствуйте всем!
У меня вопрос... ну или даже просьба помочь.
Есть у меня есть 4 картинки:


Хочу сделать такой блок в сайдбаре, чтобы при наведении на определенный участок изображение меняллось. Как сделать с целым изображением я в сети нашел, это не сложно а как тут поступить? Получается нужно это изображение разрезать на 3 куска, а потом их как-то склеить? Или как? Плюс мне нужно чтобы менялось только при наведении на участок текста а не на целое изображение.

В общем помогите пожалуйста, хотяб порядок действий какой, желательно еще конечно чтобы все изображения загружались при загрузке страницы.

Сообщение отредактировал inartur - 5.9.2011, 15:08
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
JayFunk
JayFunk
сообщение 5.9.2011, 15:10; Ответить: JayFunk
Сообщение #2


В css стиль:

A.imghover {
background: url('Картинка один');
display: block;
width: 294px;
height: 47px;
}

A.imghover:hover {
background: url('Картинка два');
}

В html:

<a href="#" class="imghover"></a>


Ну и заменяешь ширину и высоту.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
inartur
inartur
Topic Starter сообщение 5.9.2011, 15:21; Ответить: inartur
Сообщение #3


Да, так я умею. Но картинок то 4 и хочется чтобы менялось только при наведении на участок текста.
Это мне ее разрезать нужно получается?

Сообщение отредактировал inartur - 5.9.2011, 15:21
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Чеснок
Чеснок
сообщение 5.9.2011, 15:37; Ответить: Чеснок
Сообщение #4


так разрезать на 3 части (картинок 3 сами логотипы не меняются), сверстать блочно и ховер каждому куску отдельный. и ещё проще:
Не картинкой а, шрифт надписей им прописываем ховер цвет и подчёркивания класс (легче грузится и если картинки отключены в браузере - работает)

Сообщение отредактировал Чеснок - 5.9.2011, 15:41


--------------------
Забанен за мошенничество


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
startup
startup
сообщение 5.9.2011, 15:41; Ответить: startup
Сообщение #5


Помимо css можно использовать JS:
document.getElementById('название id').src='Название картинки';


--------------------
Оптимизация и продвижение сайтов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
inartur
inartur
Topic Starter сообщение 5.9.2011, 15:45; Ответить: inartur
Сообщение #6


(startup @ 5.9.2011, 15:41) *
Помимо css можно использовать JS:

Да я в этом JS... Если не лень, можешь подробнее немного написать, или ссылку какую

Сообщение отредактировал inartur - 5.9.2011, 15:45
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
startup
startup
сообщение 5.9.2011, 15:58; Ответить: startup
Сообщение #7


(inartur @ 5.9.2011, 14:45) *
Да я в этом JS... Если не лень, можешь подробнее немного написать, или ссылку какую

Разделите изображение на карту:
http://htmlweb.ru/html/imagemap.php

Далее, на каждую область вставьте событие

onMouseMove="ShowImage('1')"
onMouseMove="ShowImage('2')"


И простой скрипт:

function ShowImage(id){
if(id==1){document.getElementById('id изображения').src='Название картинки 1';}
else if(id==2){document.getElementById('id изображения').src='Название картинки 2';}
...
}


--------------------
Оптимизация и продвижение сайтов.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
inartur
inartur
Topic Starter сообщение 5.9.2011, 18:29; Ответить: inartur
Сообщение #8


Получилось smile.gif - zonadizaina.ru
Только с CSS и обрезкой картинок. Првый раз такое сделал )
Спасибо всем

Сообщение отредактировал inartur - 5.9.2011, 18:29
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Bloome
Bloome
сообщение 14.9.2011, 22:32; Ответить: Bloome
Сообщение #9


да,кроме как разрезать никак не сделать наверно, хотя поройся в гугле,может и найдёшь чего-нибудь!))

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


--------------------
клоновод
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на первый заказ.
Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на п
6 stu999 1551 21.3.2024, 20:45
автор: stu999
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыКто и зачем покупает картинки обезьян по $200 тысяч?
NFT
167 metvekot 27096 6.3.2024, 21:58
автор: Boymaster
Открытая тема (нет новых ответов) Получил странную ссылку при линкбилдинге
Как поведет себя поиск при обнаружении странной ссылке?
10 r0mZet 2178 24.10.2022, 19:23
автор: Wachowski
Горячая тема (нет новых ответов) 300 площадок под вечные ссылки на выбор: ТИЦ 20-9400, PR 0-6, ЯК, DMOZ. Скидки при пакетном заказе!
65 inkon 30255 19.7.2022, 13:41
автор: Funoman
Горячая тема (нет новых ответов) тИЦ отменили! Новый показатель Яндекса ИКС! Лучшие площадки под размещение. Бесплатное написание статей при любом заказе.
Эксклюзивное предложение. Успей получить написание статей БЕСПЛАТНО
71 VIMstat 78307 21.6.2022, 9:38
автор: VIMstat


 



RSS Текстовая версия Сейчас: 28.3.2024, 14:45
Дизайн