Как сделать ссылку из образа

Тема в разделе "Верстка", создана пользователем Ahmad, 8 сен 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1
    У меня есть простой вопрос, который я не могу решить.

    У меня есть простой HTML код:

    <div id="tps_block">
    <div id="tps_point1"><a href="#">Point 1</a></div>
    <div id="tps_point2"><a href="#">Point 2</a></div>
    <div id="tps_point3"><a href="#">Point 3</a></div>
    </div>

    Идея состоит в том, что есть 3 изображения бок о бок, и когда при наведении мыши кончено каждого изображения, изображение будет изменяться, обратил внимание на одну, а изображение является интерактивным тоже, так что пользователь попадает в другое место, когда изображение нажата.

    Мне удалось применить эффект при наведении, но я не могу получить ссылку на работу.

    Может кто-то мне помочь?
     
  2. linpc

    linpc

    Регистр.:
    6 апр 2012
    Сообщения:
    178
    Симпатии:
    52
    Если можно пожалуйста на русском языке, что вы хотите сделать. И если есть пример, то покажите.
    А то я вот ни чего не понял вообще
     
    Шумадан нравится это.
  3. WiZXaK

    WiZXaK Причиняю добро

    Регистр.:
    8 сен 2012
    Сообщения:
    580
    Симпатии:
    807
    <a href="#">Point 1</a> - Эта строка и создает ссылку :crazy:
    Я чего-то не понял?
     
  4. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1
    Проблема в том, я не могу получить HERF ссылка на работу. При наведении указателя мыши на картинке, я не получаю символ руки, которая обычно показывает за ссылки
     
  5. WiZXaK

    WiZXaK Причиняю добро

    Регистр.:
    8 сен 2012
    Сообщения:
    580
    Симпатии:
    807
    Используйте псевдокласс :hover в CSS
    P.S: Информация | Информация-2
     
  6. esche

    esche

    Регистр.:
    9 авг 2009
    Сообщения:
    359
    Симпатии:
    243
    Какая-то невнятная идея :D быть может, сначала разобраться с кашкой в голове?
    А что мешает сделать "по-человечески" - изображение в тэге <img> засунуть в тэг ссылки <a> и ссылка будет нормально работать.
     
  7. gres_18

    gres_18 Pythonобандерівець®

    Регистр.:
    26 апр 2009
    Сообщения:
    407
    Симпатии:
    206
    Чет я не вижу никаких тегов картинок в первом сообщении. Или они фоном у вложенных дивов стоят? Тогда, может, требуется преобразовать ссылки в блочные элементы (#tps_block a {display: block;}) что увеличит полезную площадь ссылки до размеров объемлющего блока. Пример: http://jsfiddle.net/UtSAh/
     
    Последнее редактирование: 8 сен 2013
  8. linpc

    linpc

    Регистр.:
    6 апр 2012
    Сообщения:
    178
    Симпатии:
    52
    Ребят пусть он покажет Пример, как ему надо. А так ломать голову и гадать это бред.
     
  9. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1
    К сожалению я забыл упомянуть, изображение наносится через CSS ..

    Это CSS я использую:

    #tps_block {
    height: 45px;
    width: 940px;
    }

    #tps_point1 {
    width: 351px;
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 0 no-repeat;
    text-indent: -9999px;
    display: block;
    height: 100%;
    float: left;
    }
    #tps_point1:hover {
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 -45px no-repeat;
    }

    #tps_point2 {
    width: 284px;
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px 0 no-repeat;
    text-indent: -9999px;
    display: block;
    height: 100%;
    float: left;
    }
    #tps_point2:hover {
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px -45px no-repeat;
    }

    #tps_point3 {
    width: 305px;
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px 0 no-repeat;
    text-indent: -9999px;
    display: block;
    height: 100%;
    float: left;
    }
    #tps_point3:hover {
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px -45px no-repeat;
    }
     
  10. gres_18

    gres_18 Pythonобандерівець®

    Регистр.:
    26 апр 2009
    Сообщения:
    407
    Симпатии:
    206
    И правда, очень жаль...
    Измени html код таким образом:
    HTML:
    <div id="tps_block">
        <a href="#"><div id="tps_point1">Point 1</div></a>
        <a href="#"><div id="tps_point2">Point 2</div></a>
        <a href="#"><div id="tps_point3">Point 3</div></a>
    </div>