Изменение прозрачности DIV при наведении мыши
От нечего делать решил изобразить такую штуку, чтобы при наведении мыши на DIV его прозрачность менялась. Для изменения прозрачности используется появившееся в CSS3 свойство прозрачности opacity. Сразу скажу, что в недобраузере IE это работать скорее всего не будет. В Chrome, FF, Opera — все работает.
Итак, страница содержит 3 родительских div’a, внутри каждого еще по 2 div’a — один с картинкой, другой с текстом. Создает html файл с таким содержанием:.
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Изменение прозрачности DIV при наведении мыши.</title> <body> <div class="paretndiv" onMouseOver="up(this)" onMouseOut="down(this)" id="item1"> <div class="image"><img src="1.jpg"></div><div class="textbox">Чашка кофе</div> </div> <div class="paretndiv" onMouseOver="up(this)" onMouseOut="down(this)" id="item2"> <div class="image"><img src="2.jpg"></div><div class="textbox">Офисное кресло</div> </div> <div class="paretndiv" onMouseOver="up(this)" onMouseOut="down(this)" id="item3"> <div class="image"><img src="3.jpg"></div><div class="textbox">ЖК монитор</div> </div> </body> </html>
Для каждого родительского div’а указываем вызов пользовательских JavaScript функций:
- по наступлении события onMouseOver, когда мышка попадает на div срабатывает функция up(this)
- по наступлении события onMouseOut, когда мышка уходит из div’а срабатывает функция down(this)
Как видим у каждого из div’ов есть свой класс. Вот их мы и опишем дальше вот таким образом:
.paretndiv {
width:700px;
height:150px;
opacity:0.5;
}
.textbox{
height:inherit;
display: table-cell;
vertical-align: middle;
font-size:36px;
}
.image{
float:left;</p>
Здесь все должно быть понятно. Для div’а paretndiv устанавливаем начальную прозрачность 0,5. Содержимое div’а textbox располагаем вертикально по центру.
Осталось написать две функции — up, которая будет увеличивать прозрачность до 1 и down, которая будет возвращать прозрачность к начальному значению 0,5. Выглядят они примерно так:
function up(el){
el.style.opacity="1";
}
function down(el){
el.style.opacity="0.5";
}
В принципе, все. CSS и JS можно оформить в виде отдельных файлов, либо писать непосредственно в html файле. В папку с файлом html необходимо положить 3 jpg файла с именами 1, 2, 3 высотой до 150 пикселей. В итоге должно получится следующее:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Изменение прозрачности DIV при наведении мыши.</title></p>
<STYLE type="text/css">
.paretndiv {
width:700px;
height:150px;
opacity:0.5;
}
.textbox{
height:inherit;
display: table-cell;
vertical-align: middle;
font-size:36px;
}
.image{
float:left;
}
</STYLE></p>
<script language="javascript" type="text/javascript">
function up(el){
el.style.opacity="1";
}
function down(el){
el.style.opacity="0.5";
}
</script></p>
<body>
<div class="paretndiv" onMouseOver="up(this)" onMouseOut="down(this)" id="item1">
<div class="image"><img src="1.jpg"></div><div class="textbox">Чашка кофе</div>
</div>
<div class="paretndiv" onMouseOver="up(this)" onMouseOut="down(this)" id="item2">
<div class="image"><img src="2.jpg"></div><div class="textbox">Офисное кресло</div>
</div>
<div class="paretndiv" onMouseOver="up(this)" onMouseOut="down(this)" id="item3">
<div class="image"><img src="3.jpg"></div><div class="textbox">ЖК монитор</div>
</div>
</body>
</html>
Если div’ы расположить внутри ссылок, то от JS можно отказаться вообще, а использовать псевдокласс hover. Так что кому интересно — тут еще можно поковыряться 🙂
Скачать исходники примера или посмотреть пример.
Похожие записи
Один комментарий: Изменение прозрачности DIV при наведении мыши.