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

Тема в разделе "Веб-дизайн", создана пользователем UDAV, 16 дек 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    776
    Симпатии:
    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:
     
  2. troop3r

    troop3r Постоялец

    Регистр.:
    14 ноя 2009
    Сообщения:
    138
    Симпатии:
    22
    Код:
    <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; }
     
  3. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    776
    Симпатии:
    153
    что-то не выходит.
     
  4. nazgard

    nazgard Постоялец

    Регистр.:
    20 июл 2009
    Сообщения:
    77
    Симпатии:
    5
    попробуй реализовать на js при помощи обработчиков onmouseover и onmouseout.
     
  5. Andy_ham

    Andy_ham Джедай на пенсии

    Регистр.:
    3 сен 2007
    Сообщения:
    450
    Симпатии:
    264
    Насколько я понял задачу, надо что-то типа такого
    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);
    }
    
    хотя требует проверки.
     
  6. drobvik

    drobvik Писатель

    Регистр.:
    14 май 2009
    Сообщения:
    2
    Симпатии:
    0
    Вариант через 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>
     
  7. belstar

    belstar Создатель

    Регистр.:
    4 июл 2009
    Сообщения:
    21
    Симпатии:
    1
    При верстке надо стараться чтобы все изображения были фоновыми, итак как я это делаю:
    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);
      }
       
    
    и не надо кучу лишнего кода!:)
     
  8. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Такой вариант насколько я знаю не кроссбраузерный:))) как сказано в посте №7 я думаю лучше всего, я тоже так делаю...
     
Статус темы:
Закрыта.