Наложение слоев. Помогите разобраться.

Статус
В этой теме нельзя размещать новые ответы.
UDAV

UDAV

Постоялец
Регистрация
22 Июн 2007
Сообщения
775
Реакции
153
Есть общий блок на слое, в котором несколько ссылок в виде картинок, хочу сделать чтобы при наведении на одну картинку, на ней появлялась другая картинка... но никак не получается этого сделать.
Делаю вот так, не закрашивается...
Код: 
<style>
.1 {width: 100px; height: 100px; background: #000; z-index: 1}
.2 {width: 100px; height: 100px; z-index: 2}
.2:hover {background: #0B7061;}
</style>
<body>
<div class="1">
<div class="2"><a href="#"><img src="111.gif"></a></div>
</div>
</body>
Если к ссылке добавить class="2", то закрашивается, но под картинкой! А как сделать чтоб НАД картинкой было? :bc:
 
Код: 
<div class="2"><a href="#"><img src="111.gif">[B]<span></span>[/B]</a></div>

.2 { position: relative; }
.2 a span { display: none; position: absolute; top: 0; left: 0; width: 100px; height: 100px; }
.2 a:hover span { display: block; }
 
что-то не выходит.
 
попробуй реализовать на js при помощи обработчиков onmouseover и onmouseout.
 
Насколько я понял задачу, надо что-то типа такого
HTML: 
<a href="#"><div id="abc"></div></a>
и css
HTML: 
#abc {
   position:relative;
   width:400px;
   height:274px;
   z-index:1;
   background-image: url(111.jpg);
}
#abc:hover {
   position:relative;
   width:400px;
   height:274px;
   z-index:10;
   background-image: url(222.jpg);
}
хотя требует проверки.
 
Вариант через js, библиотека jquery (google)

<script type="text/javascript" src="jquery.js"></script>
<div class="2"><a href="#"><img id="img_src" src="111.gif"></a></div>

<script type="text/javascript">
jQuery = jQuery.noConflict(true);
jQuery(document).ready(function(){
//При наведение на #id=img_src
jQuery('#img_src').hover(function (){
//Там где #id = img_src
jQuery('#img_src').attr('src','222.gif');
//Заменим картинку
});
});
</script>
 
При верстке надо стараться чтобы все изображения были фоновыми, итак как я это делаю:
html:
HTML: 
<a href="#"></a>
css:
HTML: 
 a {
   display:block;
   width:100px;
   height:100px;
   background-image:url(images/kartinka1.png);
   
  }
a:hover {
   display:block;
   width:100px;
   height:100px;
   background-image:url(images/kartinka2.png);
  }
и не надо кучу лишнего кода!:)
 
Andy_ham написал(а):
Насколько я понял задачу, надо что-то типа такого
HTML: 
<a href="#"><div id="abc"></div></a>
и css
HTML: 
#abc {
   position:relative;
   width:400px;
   height:274px;
   z-index:1;
   background-image: url(111.jpg);
}
#abc:hover {
   position:relative;
   width:400px;
   height:274px;
   z-index:10;
   background-image: url(222.jpg);
}
хотя требует проверки.
Нажмите для раскрытия...
Такой вариант насколько я знаю не кроссбраузерный:))) как сказано в посте №7 я думаю лучше всего, я тоже так делаю...
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху