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



 

Здравствуйте, гость ( Вход | Регистрация )

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


Новичок
*

Группа: User
Сообщений: 34
Регистрация: 11.6.2010
Из: Москва
Поблагодарили: 5 раз
Репутация:   -2  


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


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

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

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


Завсегдатай
*****

Группа: Active User
Сообщений: 731
Регистрация: 6.7.2011
Из: Ukraine
Поблагодарили: 201 раз
Репутация:   44  


В 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


Новичок
*

Группа: User
Сообщений: 34
Регистрация: 11.6.2010
Из: Москва
Поблагодарили: 5 раз
Репутация:   -2  


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

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


мошенник
*******


Группа: Banned
Сообщений: 3623
Регистрация: 9.12.2009
Из: СССР ☭
Поблагодарили: 1520 раз
Репутация:   262  


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

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


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


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


Бывалый
****

Группа: User
Сообщений: 272
Регистрация: 30.8.2011
Поблагодарили: 67 раз
Репутация:   9  


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


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


Новичок
*

Группа: User
Сообщений: 34
Регистрация: 11.6.2010
Из: Москва
Поблагодарили: 5 раз
Репутация:   -2  


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

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

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


Бывалый
****

Группа: User
Сообщений: 272
Регистрация: 30.8.2011
Поблагодарили: 67 раз
Репутация:   9  


(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


Новичок
*

Группа: User
Сообщений: 34
Регистрация: 11.6.2010
Из: Москва
Поблагодарили: 5 раз
Репутация:   -2  


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

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


клоновод
**

Группа: Banned
Сообщений: 58
Регистрация: 12.9.2011
Поблагодарили: 2 раза
Репутация:   -4  


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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Чем сжимать картинки для сайта без потери качества
1st-finstep.ru - Заработок в сети и методы продвижения сайта
16 komarik_vlad 1676 Вчера, 20:11
автор: komarik_vlad
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыЗапилен сервис добавления водяного знака на картинки
10 Ultrastalker 839 16.12.2017, 23:27
автор: Ultrastalker
Открытая тема (нет новых ответов) Переносится ли вес и тИЦ от входящих ссылок при 301 редиректе
11 Bel_Ami 2918 11.12.2017, 20:50
автор: alexandrrr
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыОшибка при создании шаблона страницы ВП
Нет картинок
5 semarg 715 9.12.2017, 15:36
автор: Nell
Горячая тема (нет новых ответов) 300 площадок под вечные ссылки на выбор: ТИЦ 20-9400, PR 0-6, ЯК, DMOZ. Скидки при пакетном заказе!
61 inkon 14034 7.12.2017, 20:28
автор: inkon


 



RSS Текстовая версия Сейчас: 18.12.2017, 1:50
Дизайн