Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
davidoff72
0 / 0 / 0
Регистрация: 17.07.2014
Сообщений: 116
1

Как из спрайта сделать ссылку

24.10.2015, 20:38. Просмотров 811. Ответов 7
Метки нет (Все метки)

Надо из кнопки , которую хочу сделать из спрайта , надо сделать ссылку на другую страницу. Пока не доходит как это...
спрайти делать буду так:

HTML5
1
2
3
4
5
<div class="id2">
        <ul class=buttons >
            <li class=buttons1></li>                
        </ul>
    </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
ul{
    list-style:none;
    margin: 0;
    padding: 0;
.......
}
.buttons li{
    background:url(sprite.png)no-repeat ;
    display: inline-block;
    height: 35px;
    width: 140px;
.......
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
24.10.2015, 20:38
Ответы с готовыми решениями:

как сделать ссылку
Нужно сделать ссылку на локальной html страничке, которая открывала бы папку (а не файл) в обычном...

Как сделать ссылку на скачивание
Всем привет , вот у меня такая проблема . Я знаю HTML но одно никак немогу понять, как сделать...

Как сделать внутреннюю ссылку
Делаю простенький web сайт использую фреймы , разделил на 3 рамки ( шапка , меню и текст). Суть...

Как сделать ссылку на программу?
&lt;a href=&quot;C:\Program Files&quot;&gt;Ссылка на программу&lt;/a&gt; это не работает.

Как сделать ссылку на верх страницы?
Возможно ли осуществить это с помощью css и html? Если да то как? вот хочу чтото типа такого. ...

7
Fedor92
Эксперт HTML/CSS
2934 / 2497 / 1063
Регистрация: 15.12.2012
Сообщений: 9,390
Записей в блоге: 9
24.10.2015, 21:22 2
davidoff72, в тег <li> вставьте тег <a> и уже для ссылки задайте фон...
Пример:
HTML5
1
<li><a href="mylink"></a></li>
1
davidoff72
0 / 0 / 0
Регистрация: 17.07.2014
Сообщений: 116
24.10.2015, 21:25  [ТС] 3
да, там вообще то должно быть три li в какой из них вставлять href ?

HTML5
1
2
3
4
5
<ul class=buttons >
                    <li class=buttons1></li>
                    <li class=buttons2></li>
                    <li class=buttons3></li>
                </ul>
0
Fedor92
Эксперт HTML/CSS
2934 / 2497 / 1063
Регистрация: 15.12.2012
Сообщений: 9,390
Записей в блоге: 9
24.10.2015, 21:42 4
Код будет, схематически, выглядеть следующим образом:
HTML5
1
2
3
4
5
<ul class="buttons" >
       <li><a class="buttons1" href="mylink"></a></li>
       <li><a  class="buttons2" href="mylink"></a></li>
        <li><a class="buttons3" href="mylink"></a></li>
</ul>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
ul{
    list-style:none;
    margin: 0;
    padding: 0;
.......
}
.buttons li{
     display: inline-block;
    height: 35px;
    width: 140px;
.......
a.buttons1, a.buttons2, a.buttons3{display:block;  background:url(sprite.png)no-repeat }
С помощью background-position указываете позицию нужной картинки из спрайта... Если мы под спрайтом понимаем одно и тоже...
1
24.10.2015, 21:42
davidoff72
0 / 0 / 0
Регистрация: 17.07.2014
Сообщений: 116
24.10.2015, 23:43  [ТС] 5
странно, сделал как написано но ссылка не активна...в чем секрет?

HTML5
1
2
3
4
5
<div class="id2">
    <ul class="buttons">
        <li><a class="buttons1" href="mylink"></a></li> 
    </ul>
</div>
0
Fedor92
Эксперт HTML/CSS
2934 / 2497 / 1063
Регистрация: 15.12.2012
Сообщений: 9,390
Записей в блоге: 9
24.10.2015, 23:51 6
davidoff72, в атрибут href пишите адрес страницы(например google.com) на которую хотите сделать ссылку вместо mylink... mylink написано для примера...
1
davidoff72
0 / 0 / 0
Регистрация: 17.07.2014
Сообщений: 116
24.10.2015, 23:54  [ТС] 7
я поменял местами теги и ссылка активировалась...

HTML5
1
2
3
4
<ul class="buttons">
        <a href="mylink"><li class="buttons1"></li></a>
                    
           </ul>
теперь надо вставить спрайты
0
Fedor92
Эксперт HTML/CSS
2934 / 2497 / 1063
Регистрация: 15.12.2012
Сообщений: 9,390
Записей в блоге: 9
25.10.2015, 00:00 8
Цитата Сообщение от davidoff72 Посмотреть сообщение
я поменял местами теги и ссылка активировалась...
Вообще-то она итак должна быть активной, главное, чтобы валидатор не заругал...
Цитата Сообщение от davidoff72 Посмотреть сообщение
теперь надо вставить спрайты
Вставляйте, в принципе это делается просто... Удачи...
0
25.10.2015, 00:00
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
25.10.2015, 00:00

Как сделать ссылку с заменой рисунка?
Привет всем! Как сделать ссылку-картинку, что б когда на неё наводишь курсор она менялась на 2-ю...

Как сделать ссылку поверх картинки
Народ я не могу понять как сделать так что бы по верх картинки была ссылка? То есть мне надо не...

Подскажите как сделать ссылку в дивах
Подскажите новичку как сюда ссылку вставить чтоб при клике на фон открывалось в новой вкладке? Или...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.