 Как здкелать, Наводиш на изображение... |
На этом месте находится расчудесная шапка. Включите flash - не пожалеете!
Здравствуйте, гость ( Вход | Регистрация )
  |
| ArhiModer |
 30.4.2008, 15:08
Сообщение
#1
|
 Поселенец  Группа: Пользователи Сообщений: 111 Регистрация: 9.12.2007 Пользователь №: 8 058 Репутация:  2   |
Короче надо так, чтобы при наведении курсора на изображение, оно менялось на другое. Курсор уводиш сново первое
-------------------- Забить на все ржавый гвоздь
|
   |
 
|
| антиКИЛЛЕР |
30.4.2008, 22:58
Сообщение
#2
|
 Шатунок Группа: Медведи-шатуны Сообщений: 867 Регистрация: 4.9.2006 Из: Заречный Пользователь №: 984 Репутация: 12 |
Это можно сделать либо на ява скриптах, либо на CSS. Как сделать это на ява-скрипте не могу точно сказать, т.к. не очень в нём разбираюсь...
На css алгоритм примерно такой: Создаешь некий класс для img. А качестве обычного прописываешь там беграунд первой картинки. А потом прописываешь тоже самое, но для hover (и там уже прописываешь URL второй картинки которая должна показываться при наведении). В случаее css желателно чтобы было зарнее известно ли размеры картинки или сама картинка была однородной (чтобы не возникало проблем с правильным отображением и повторением картинки)/ Вот например чтобы это было в ячейках таблицы. Синтаксис точно не понмю, поэтмоу за достоверную точность не ручаюсь но должно выгдлядеть примерно так: td.ResetImage {background-image: url('images/img_not_hover.gif');} td.ResetImage:hover {background-image: url('images/img_hover.gif');} Так же тебе скорее всего придётся использовать "background-position", чтобы правильно расположить свою картинку. И лучше всего установить ещё фиксированные размеры у этих ячеек, совпадающие с размерами картинок. Предупреждаю что в IE 6 иранее версиях может не работать, т.к. они поддерживают hover, только для тэга "а". Но где-то в сети есть класс, который нужно скачать и подключить и будет такая фича поддерживаться и в IE... Поищи в рассылках RusFaq примерно полугодовой давности... гжде-то там была ссылка нга этот клас.. сам его модно время использовал. -------------------- Web Forever - портал для тех, кто с Веб-технологиями навсегда.
|
|
|
|
| krest |
3.5.2008, 17:11
Сообщение
#3
|
 Поселенец Группа: Пользователи Сообщений: 155 Регистрация: 12.11.2007 Из: Краснодарский край Пользователь №: 7 096 Репутация: 3 |
А че незя что ли сделать класс типа a.img в ссылке поместить фоновый рисунок и менять его hover - ром, типа
<a class="img" href="..."><a/> и все будет работать в ИЕ6 -------------------- |
|
|
|
| ArhiModer |
3.5.2008, 17:59
Сообщение
#4
|
|
Поселенец Группа: Пользователи Сообщений: 111 Регистрация: 9.12.2007 Пользователь №: 8 058 Репутация: 2 |
Можеш по подробней
-------------------- Забить на все ржавый гвоздь
|
|
|
|
| krest |
3.5.2008, 21:17
Сообщение
#5
|
|
Поселенец Группа: Пользователи Сообщений: 155 Регистрация: 12.11.2007 Из: Краснодарский край Пользователь №: 7 096 Репутация: 3 |
Код <style> .blockV1 {width:100px; height:50px;} .blockV1 a .blockD1 {background:#00FF80; background:url("images11.gif");width:100%; height:100%;} .blockV1 a:hover { background:#808080; color:#00FF00; background:url("images12.gif");} .blockV1 a:hover .blockD1 { background:#808080; color:#00FF00; background:url("images12.gif");} .blockV2 {width:100px; height:50px;} .blockV2 a .blockD2 {background:#00FF80; background:url("images21.gif");width:100%; height:100%;} .blockV2 a:hover { background:#808080; color:#00FF00; background:url("images22.gif");} .blockV2 a:hover .blockD2 { background:#808080; color:#00FF00; background:url("images22.gif");} /* и так далее для каждой кнопки */ </style> <html> <div class="blockV1"> <a href="#"><div class="blockD1"> </div></a> </div> <div class="blockV2"> <a href="#"><div class="blockD2"> </div></a> </div> <!-- и так далее для каждой кнопки --> </html> естественно дивы blockVxx можно разместить либо с помощью таблицы или еще как-нибудь -------------------- |
|
|
|
| krest |
3.5.2008, 21:25
Сообщение
#6
|
|
Поселенец Группа: Пользователи Сообщений: 155 Регистрация: 12.11.2007 Из: Краснодарский край Пользователь №: 7 096 Репутация: 3 |
Еще возможно нужно будет запретить повтор фонового рисунка указанием свойства
background-repeat:no-repeat; после background: url( "..."); т.е. background: url ("..."); background-repeat:no-repeat; -------------------- |
|
|
|
| 3ABAPKA |
4.5.2008, 6:40
Сообщение
#7
|
 Поселенец Группа: Пользователи Сообщений: 149 Регистрация: 13.2.2008 Пользователь №: 10 561 Репутация: 2 |
А можно вот так!
Код <a href="" > <IMG onmouseover="this.src='C01-01.jpg'" onmouseout="this.src='C01-04.jpg'" src="C01-04.jpg" border="0" align="absmiddle" height="100"></a> Можно не использовать <a> |
|
|
|
|
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0
|
Текстовая версия | Сейчас: 25.7.2008, 22:33 |
|
|