Jump to content

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


DEVIAS
 Share

Recommended Posts

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

Link to comment
Share on other sites

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)

Удачи! ;)

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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>
Edited by Лорд Дмитрий
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...