Как установить код JS для опрокидывания

Question

Код gooverled rollover и нашел тот, который кажется, что он должен работать по этому адресу: http://www.dnolan.com/code/js/rollover/. Это, вероятно, работает и все, кроме ... heh heh ... Я не знаю, как «создать состояние опрокидывания для любого изображения в моем документе». То, как г-н Нолан дает инструкцию, подразумевает, что это еще проще, чем установка кода в заголовке документа, и поэтому не нуждается в объяснениях, но, к сожалению, в моем случае это не так.

Мне нужно это для моего навигатора, который состоит из строки из 8 круговых изображений, которые должны быть заменены при наведении изображений одинакового размера и формы, но другого цвета.

Может ли кто-нибудь из вас блестящих людей заполнить недостающую информацию? Мне просто нужна часть, которая не имеет соответствующего примера: у меня есть часть в теге и в заголовке, и я внес соответствующие изменения в имена изображений. Или, если бы вы могли быть РЕАЛЬНЫМ персиком и дать мне шаг за шагом на все это, я был бы бесконечно благодарен.

<div id="header"> 
    <div id="home"><a href="feather.html"><img src="images/buttons/home.png" width="89"  height="89" alt="Home"></a></div> 
    <div id="security"><a href="security.html"><img src="images/buttons/security_o.png" width="89" height="89" alt="Security"></a></div> 
    <div id="phase_1"><a href="phase_1.html"><img src="images/buttons/phase_1.png" width="89" height="89" alt="Phase 1"></a></div> 
    <div id="phase_2"><a href="phase_2.html"><img src="images/buttons/phase_2.png" width="89" height="89" alt="Phase 2"></a></div> 
    <div id="phase_3"><a href="phase_3.html"><img src="images/buttons/phase_3.png" width="89" height="89" alt="Phase 3"></a></div> 
    <div id="basic_package"><a href="basic_package.html"><img src="images/buttons/basic_package.png" width="89" height="89" alt="Basic Package"></a></div> 

#header { 
background-image: url(images/complete_header.jpg); 
background-repeat: no-repeat; 
height: 391px; 
width: 900px; 
position: relative; 
} 

#home { 
width: 89px; 
height: 89px; 
position: absolute; 
top: 199px; 
left: 91px; 
} 

CSS для остальных 7 кнопок точно такой же, за исключением левого позиционирования.

Answer 1

Я думаю, вы должны просто добавить класс imgover к каждому изображению, которое вы хотите использовать для опрокидывания.

Например заменить <img src="sample.jpg" alt="Some Image"> в вашем коде <img src="sample.jpg" alt="Some Image" class="imgover"> и создать sample_o.jpg изображение

Answer 2

Просто перечитайте ссылка немного futher:

для любого изображения в документе вам нужно будет создать для него это единственное требование - это то, что он назван так же, как и исходное изображение, но ему нужно _o в конце имени.

Так что, если у вас есть изображение foo.jpg, он ожидает, что вы есть foo_o.jpg заменить его на опрокидывание.

Конечно, это намного лучше сделать с помощью css и использовать спрайты. Поиск Google должен принести много результатов для этого. Вот first example, который подошел ко мне.