| |
Маленькие этюды для веб-программистов
 Алексей Комолов (С.-Петербург)
Создание эффекта прозрачности при наведении мыши
При создании веб-сайтов программистам постоянно приходится работать с графикой. И многие программисты довольно часто используют разные спецэффекты для графических изображений.
Ниже приведен код интересного спецэффекта (на JavaScript): при наведении мышки на изображение - оно становится прозрачным.
<script language="JavaScript">
function makeTransparent (imgObject, level)
{
if (navigator.appName.indexOf("Netscape") != -1)
imgObject.style.MozOpacity = level/100
else if (navigator.appName.indexOf("Microsoft") != -1)
imgObject.filters.alpha.opacity = level
}
</script>
<p> <img src="cat0.jpg" name="cat" width=320 height=240
style="filter:alpha(opacity=100);-moz-opacity:1/0"
onMouseover = "makeTransparent(this, 50)"
onMouseout = "makeTransparent(this, 100)">
</p>
Здесь часть кода: onMouseover = "makeTransparent(this, 50)" означает, что изображение при наведении мыши становится прозрачным на 50%, а onMouseout = "makeTransparent(this, 100)" - приобретает стопроцентную "непрозрачность" (возвращается изначальное состояние).
Заметьте, что можно создать обратный эффект, когда картинка прозрачна, и при наведении курсора мыши картинка становится четкой, "непрозрачной". Для этого достаточно в onMouseover = "makeTransparent(this, 50)" заменить цифру с 50 на 100, а в onMouseout = "makeTransparent(this, 100)" цифру 100 заменить на 50 - и "обратный" эффект будет достигнут.
Данный спецэффект проверен на работоспособность в браузерах Internet Explorer и Mozilla Firefox.
Результат можно посмотреть здесь.
|
