div картинка ссылка

Тема в разделе "Веб-дизайн", создана пользователем Plan, 12 июл 2010.

Модераторы: zek24
  1. Plan

    Plan Постоялец

    Регистр.:
    24 май 2010
    Сообщения:
    144
    Симпатии:
    24
    искал не нашёл подобной темы,

    Как сделась ссылку при нажатии на картинку?

    в CSS:
    Код:
    #menupc {
    background: url("/путь/pc.png") ;
    display: block;
    width: 65px;
    height: 65px;
    }
    
    #menupc:hover {
    background-position: 0 -65px;
    }
    html:
    Вывод на страницу
    HTML:
    <td><div id="menupc"></div></td>
     
  2. sw04

    sw04 seoplayer

    Регистр.:
    1 дек 2007
    Сообщения:
    601
    Симпатии:
    193
    можно так:
     
    Plan нравится это.
  3. Cepera-exp

    Cepera-exp Постоялец

    Регистр.:
    8 янв 2009
    Сообщения:
    102
    Симпатии:
    33
    <td><a href='#' id="menupc"></a></td>
    Как вариант
     
  4. mittus

    mittus Создатель

    Регистр.:
    12 июл 2009
    Сообщения:
    72
    Симпатии:
    11
    нельзя советовать такого счастья.
    Делайте ссылкой сам div блок:
    <div onClick="window.open(this.href='http//site.ru/');"></div> - в новом окне
    <div onClick="location.href='http://site.ru/'"></div> - в текущем
    и для #menupc добавьте cursor: pointer;
     
  5. ef1

    ef1 Прохожие

    - здесь картинка является фоновым изображением ссылки
    - элемент "div" в ячейке таблицы не используем, для компактности кода
    - инлайн элементу "a" задаем свойства блока
    в CSS:
    Код:
    #menupc {
    background : url(pc.png);
    display : block;
    cursor : pointer;
    width : 65px;
    height : 65px;
    }
    Вывод на страницу
    Код HTML:
    <table>
    <tr>
    <td>
    <a href="rezin2.html" id="menupc">&nbsp;</a>
    </td>
    </tr>
    </table>
     
  6. gruz222

    gruz222 Постоялец

    Регистр.:
    8 авг 2008
    Сообщения:
    62
    Симпатии:
    6
    а зачем именно div делать ссылкой?

    разве списком нельзя?

    типо так

    <td><ul><li id="menupc"><a href="#"></a></li></ul></td>

    для li указываешь backcground

    делаешь его display:block; (если нужно чтобы был со свойствами, как див)
     
  7. zzzkabanzzz

    zzzkabanzzz Создатель

    Регистр.:
    15 июн 2011
    Сообщения:
    56
    Симпатии:
    4
    Вот так див-ссылка, но будет работать лишь если у пользователя работает js,то есть в 99%.
    <div onсlick="window.open(this.href='нужный сайт');">текст дива</div>
     
  8. comua

    comua Постоялец

    Регистр.:
    26 фев 2008
    Сообщения:
    110
    Симпатии:
    31
    Если надо сделать что-то вроде менюшки, чтобы картинки были в роли кнопок-ссылок, то я бы делал так...

    Код:
    <a href="#" class="menubutton" title="SEO">SEO</a>
    Код:
    .menubutton { 
    background-image: url("http://img.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    height: 30px;
    width: 120px;
    text-indent: -99999px;
    text-decoration: none;
     }