Делаем красивый анонс с помощью OnMouseOver
Сразу оговорюсь – все написанное ниже – примитивно, и написано только для полного понимания происходящего. По сути все это можно написать гораздо проще и грамотнее.
И так, вот такой код:
<style>
.div_maindiv {
width: 450px;
height: 300px;
background-image: url(/files/showpic1.jpg);
}
.div_knopko {
float: left;
width: 145px;
height: 50px;
margin-left: 2px;
position: relative;
top: 245;
text-align: center;
padding-top: 14px;
font-weight: bold;
color: black;
cursor: pointer;
background-color: #999;
}
</style>
<div class="div_maindiv" ID="div_maindiv">
<div class="div_knopko" onmouseover="document.getElementById(’div_maindiv’).style.background=’url(/files/showpic1.jpg)’; this.style.backgroundColor=’#fff’" onMouseOut="this.style.backgroundColor=’#999′">Заголовок 1</div>
<div class="div_knopko" onmouseover="document.getElementById(’div_maindiv’).style.background=’url(/files/showpic2.jpg)’; this.style.backgroundColor=’#fff’" onMouseOut="this.style.backgroundColor=’#999′">Заголовок 2</div>
<div class="div_knopko" onmouseover="document.getElementById(’div_maindiv’).style.background=’url(/files/showpic3.jpg)’; this.style.backgroundColor=’#fff’" onMouseOut="this.style.backgroundColor=’#999′">Заголовок 3</div>
<br style="clear: both;">
</div>
Даст нам такую картину:
Симпатично, да?
Теперь сделаем разбор полетов, что же происходит, а именно разберем эту конструкцию:
onmouseover="document.getElementById(’div_maindiv’).style.background=’url(show1.jpg)’; this.style.backgroundColor=’#fff’" onMouseOut="this.style.backgroundColor=’#999′"
И так
Onmouseover – говорим, что действие будет происходить при наведении мыши на объект.
А внутри у нас:
document.getElementById(’div_maindiv’) – Объясняем, что сейчас будем работать с объектом, ID которого равен div_maindiv.
.style.background=’url(show1.jpg)’; - что же собственно делаем – ставим в качестве background’а картинку show1.jpg.
Точка с запятой показывает, что первое действие мы описали, и дальше будем писать второе:
this – как наверное поняли, это альтернатива document.getElementById(’div_maindiv’), и говорит она о том, что работать будем с объектом, в котором написан код.
.style.backgroundColor=’#fff’ – меняем background-color на белый цвет.
Ну и onMouseOut="this.style.backgroundColor=’#999′" – говорит о том, что при уводе мыши с элемента – необходимо поменять background-color у самого элемента обратно на серый.
