Перейти к содержанию
СофтФорум - всё о компьютерах и не только

Подсветка линка


Рекомендуемые сообщения

Есть картинка размером 100х50. В центре машинка. Так вот мне нужно чтоб эта машинка принаведении курсора подсвечивалась по контуру. Наглядный пример есть в БК (если кто знает что это). Там в городе при выборе здания реализован такой эфект. Если кто знает как помогите плз.

Ссылка на комментарий
Поделиться на другие сайты

Рисуешь подсвеченую картинку

Скриптом меняешь их по функциям OnMouseOver OnMouseOut

Ссылка на комментарий
Поделиться на другие сайты

DEVIAS: в игре БК подсветка реализована спомощью фильтров, но фильтры работают только в браузере Internet Explorer

Для того чтобы эфект работал во всех браузерах, придётся немного отредактировать картинку (в фотошоп или фаерворкс)

контур твоей машинки должен быть прозрачным, сохрани картинку в gif или в png

подсветку сделаем спомощью javascript

в блоке <head> </head> вставь следующий код:

<script language="javascript"><!--function img_light(obj, color) { var o; if(document.getElementById) o = document.getElementById(obj); else if(document.all) o = document.all[obj]; o.style.backgroundColor = "#".color;}//--></script>

далее там где вставляем картинку:

<span id="carimg"><img src="путь_к_твоей_картинке" onMouseOver="img_light('carimg', 'ffffaa');" onMouseOut="img_light('carimg', 'ffffff');"></span>

здесь ffffaa это цвет подсветки (RRGGBB)

ffffff это цвет без подсветки (RRGGBB)

Удачи! ;)

Ссылка на комментарий
Поделиться на другие сайты

Спасибо за подсказку, но...

Не работает. Вопросик, что это за функция <span>. Далее картинку сохранил в png с прозрачным фоном, а в страницу вставляется с белым. Картинка не работает как ссылка. И почему-то нет никакого эфекта при наведении курсора. ;)

Ссылка на комментарий
Поделиться на другие сайты

DEVIAS: <span> это тег dHTML

если нужна ссылка, то можно сделать на css

картинка должна быть так же с прозрачным фоном

в блоке <head> </head>

<style>a.img:link, a.img:active, a.img:visited{ background-color: #ffffff; } /* цвет неподсвеченного рисунка */a.img:hover {background-color: #ffffaa; } /* цвет подсвеченного рисунка */</style>

там где картинка:

<a href="твой_url" class="img"><img src="путь_к_твоей_картинке"></a>
Изменено пользователем Лорд Дмитрий
Ссылка на комментарий
Поделиться на другие сайты

Ну уже лучше. Картинка работает как ссылка. Остались такие проблемы. Картинка вставляется не прозрачная, а с белым фоном. Хотя сохранял как прозрачный фон 100%. В формате png. Вокруг картинка какае-то бардовая рамка. Совсем не в тему она. И нет эфекта.

Может мне действительно сделать с заменой картинок? И функцией OnMouseOver? Может так будет проще, а?

Ссылка на комментарий
Поделиться на другие сайты

DEVIAS: ну если проще то:

<a href="твой_url"><img src="путь_к_простой_картинке"onMouseOver="this.src='путь_к_подсвеченной картинке';"onMouseOut="this.src='путь_к_простой_картинке';"></a>
Ссылка на комментарий
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...