Вернуться   SEO форум - оптимизация и продвижение сайтов > Web разработки > Дизайн и верстка

Важная информация
Дизайн и верстка - Верстка: блочная, div, HTML... Дизайн, внешний вид сайта.

Ответ
 
Опции темы Оценить тему Опции просмотра
Старый 20.03.2013, 16:13   #1
 
Аватар для itteller
 
Сообщений: 37
FR (активность): 504

Доп. информация
По умолчанию Автор темы ссылка картинка - реализация через css

Туплю со страшной силой и html-book не помогут

Нужно сделать ссылку картинкой. Причем картинку (кнопку) прописать в css (картинка будет располагаться в двух местах на всех контентых страницах). Причем будет вдобавок состояние "наведено" (о псевдоклассе hover я ещё что-то помню). Но вот как это технически правильно сделать в css и как код что потом я должен вписывать в код html?
itteller вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 20.03.2013, 16:23   #2
 
Аватар для Peugeon
 
Сообщений: 159
FR (активность): 4,744

Доп. информация
По умолчанию

В CSS:

#blablabla{
background-image: url(image.jpg);
}

На страницу:

<div id="blablabla"><href="http://test.ru"></a></div>

Это без hover. Как-то так в общем...
Peugeon вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
itteller (20.03.2013)
Старый 20.03.2013, 16:34   #3
 
Аватар для itteller
 
Сообщений: 37
FR (активность): 504

Доп. информация
По умолчанию Автор темы

div или можно span?
itteller вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 20.03.2013, 16:38   #4
 
Аватар для Phoenix
 
Сообщений: 1,021
FR (активность): 39,032

Доп. информация
По умолчанию

можно так сделать


.bla { background-image:url('images/image.png'); } .bla:hover { background-image:url('images/image2.png'); }



<a href="http://сайт.ру" ><div class="bla"></div></a>


В сео денег нет, совсем нет
Phoenix вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
itteller (21.03.2013)
Старый 20.03.2013, 16:38   #5
 
Аватар для Peugeon
 
Сообщений: 159
FR (активность): 4,744

Доп. информация
По умолчанию

Цитата:
Сообщение от itteller Посмотреть сообщение
div или можно span?
Я обычно через div делаю.
Peugeon вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 20.03.2013, 17:01   #6
 
Аватар для itteller
 
Сообщений: 37
FR (активность): 504

Доп. информация
По умолчанию Автор темы

хм, а как насчет no-repeat? да и с позиционированием в принципе.
itteller вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 20.03.2013, 17:13   #7
 
Аватар для Phoenix
 
Сообщений: 1,021
FR (активность): 39,032

Доп. информация
По умолчанию

itteller, ну тут уже от поставленной задачи зависит. Все есть на html-book


В сео денег нет, совсем нет
Phoenix вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 20.03.2013, 19:34   #8
 
Аватар для webmas
 
Сообщений: 490
FR (активность): 19,322

Доп. информация
По умолчанию

Оффтоп:
Цитата:
Сообщение от Phoenix Посмотреть сообщение
можно так сделать


.bla { background-image:url('images/image.png'); } .bla:hover { background-image:url('images/image2.png'); }



<a href="http://сайт.ру" ><div class="bla"></div></a>


А можно так
<a class="bla" href="[URL]http://[/URL]сайт.ру" >Тут ещё анкор можно засунуть</a>

Только тогда не забываем в css дописать
a.bla {     background-image:url('images/image.png'); display:block; text-indent:-999px; } .bla:hover {     background-image:url('images/image2.png'); }
webmas вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
itteller (21.03.2013)
Старый 21.03.2013, 10:52   #9
 
Аватар для itteller
 
Сообщений: 37
FR (активность): 504

Доп. информация
По умолчанию Автор темы

ага. решил задачу, спасибо.
itteller вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 25.04.2013, 14:29   #10
 
Аватар для Sheremet
 
Сообщений: 1
FR (активность): 108

Доп. информация
По умолчанию

Можно и дивами и спаном. А можно и а... Вдруг, если что
Sheremet вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 18.05.2013, 18:50   #11
 
Аватар для levka9
 
Сообщений: 5
FR (активность): 0

Доп. информация
По умолчанию

ещё вариант, меньше писанины:

<div class="bla" onclick="http://сайт.ру"></div>
levka9 вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Ответ

Метки
верстка, ссылка картинка

Быстрый ответ
Ваше имя пользователя: Регистрация. Для входа нажмите здесь
Случайный вопрос

Сообщение:
Опции
Внимание!
Этой теме более 3285 дней. Вы можете оставить сообщение здесь. Но, обращаем внимание. Возможно, рациональней создать новую тему (найти свежее обсуждение)?


Опции темы
Опции просмотра Оценка этой теме
Оценка этой теме:

Ваши права в разделе
Вы не можете создавать новые темы
Вы можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Яндекс.Картинки - через 10-30 картинок появляется вот эта картинка... hurt Яndex 1 12.07.2012 17:14
Ссылка - картинка ardamid Оптимизация страниц сайта 2 16.11.2011 12:46
Прикольная картинка Турист Юмор 1 12.06.2011 23:34
Товарищи почётные, нужен ваш совет. Идея сайта и реализация. terranodar Почетные пользователи - скрытый раздел 19 18.04.2011 18:05
Если фон сайта картинка.. падаван Дизайн и верстка 6 20.03.2011 23:23

Текущее время: 08:01. Часовой пояс GMT +3.