Помогите с активными областями вокруг изображения...

Тема в разделе "Наполнение", создана пользователем golubchuk, 19.01.2010.

  1. Offline

    golubchuk Недавно здесь

    Регистрация:
    19.01.2010
    Сообщения:
    3
    Симпатии:
    0
    Пол:
    Мужской
    Для примера есть сайт... http://www.strogaem.ru/
    там на главной странице представлен каталог продукции. При наведении курсора на область вокруг изображения меняется цвет фона, и все это работает как ссылка вместе с изображением.
    Как это реализовать?
     
  2.  
  3. Offline

    golubchuk Недавно здесь

    Регистрация:
    19.01.2010
    Сообщения:
    3
    Симпатии:
    0
    Пол:
    Мужской
    Если смотреть исходный код данной страницы...
    <td><a
    href="http://www.strogaem.ru/213.html"
    target="_blank"
    title="Дачные туалеты"
    class="hit"
    style="background-image: url(/images/submenu/tualet.jpg)">
    Дачные туалеты
    </a>
    </td>
    то за все это отвечает class="hit". но вот что в нем нужно прописать понять никак не могу(((((
     
  4. Offline

    golubchuk Недавно здесь

    Регистрация:
    19.01.2010
    Сообщения:
    3
    Симпатии:
    0
    Пол:
    Мужской
    Нашел....:)
     
  5. agruts
    Offline

    agruts Russian Joomla! Team

    Регистрация:
    01.03.2006
    Сообщения:
    612
    Симпатии:
    21
    Пол:
    Мужской
    может кому еще пригодится:

    Код (html):
    1. <div class="1">
    2.    <div>
    3.      <a href="link">
    4.         <img>
    5.           <br />
    6.          <span>text</span>
    7.        </a>
    8.    </div>
    9. <div>


    CSS:
    Код (CODE):
    1. .1 div {
    2.    float:left;
    3.    margin:5px;
    4.    width:100px;
    5.    heght:100px;
    6. }
    7.  
    8. .1 div a {
    9.    display:block;
    10.    width:100px !important;
    11.    heght:100px !important;
    12.    text-decoration:none;
    13.     padding:10px;
    14.    background-color:#CCC;
    15.    border: solid #333 1px;
    16. }
    17.  
    18. .1 div a:hover{
    19.    background-color:#FFC;
    20.    border:solid #999 1px;
    21. }
     

Поделиться этой страницей

Загрузка...