Перейти к содержимому


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 273 3 темы, 17 сообщений, 7 баллов репутации

  • Фотография WGN
    #2

    WGN (worldgamenews.com)
    Очков активности: 64.5 Вне конкурса за определение пользователя месяца

  • Фотография ShowPrint
    #3

    ShowPrint (ShowPrint.ru)
    Очков активности: 52.5 0 тем, 7 сообщений, 5 баллов репутации

  • Фотография BlackLion
    #4

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография Ixman
    #7

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография profi
    #10

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 17.08.2018
Топ 5 участников по репутации


Иконка вместо ссылки в меню

#1 Kdes70

Kdes70
  • Неактивные
  • 55 сообщений
  • Репутация: 0
0

Отправлено 26 February 2012 - 16:26

помогите пожалуйста решить такую проблему,
хочу в меню в место текста вставить картинку текста с последующим спрайтом
как это можно сделать ?

должно получится как на картинке

Прикрепленные изображения

  • Безымянный.png

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как изменить иконку на сайте во вкладка и при добавлении его в избранное
  2. Html верстка на конкретном примере
  3. Получение favicon любого сайта
  4. Вставка иконки в html
  5. Не кликабельные ссылки

#2 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 26 February 2012 - 18:34

Kdes70,
намного приятнее и понятнее отвечать на вопрос, если он сформулирован на понятном языке, примерно так:
"Как сверстать меню с кнопками-картинками, изображение на которых меняется при наведении на эти кнопки курсора мыши? Изменение изображения хочется реализовать по методу спрайтов."

Картиночное меню верстается примерно так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>menu</title>
<style type="text/css">
ul#menu{
display: block;
list-style: none;
}
ul#menu li{
float: left;
}
ul#menu li a{
display: block;
height: 45px; /*высота кнопок меню*/
}
/*Кнопка "Главная"*/
ul#menu li a#main{
width: 120px; /*ширина кнопки "Главная", ширина будет у каждой кнопки своя, равная ширине соответствующей картинки меню*/
background: url(main.png);
/* Картинка, содержащая изображения кнопки "Главная" в обычном состоянии и в подсвеченном.(в данном случае имеет размер 120х90px)
Изображения в картинке одно под другим, сверху - обычное, сразу под ним - подсвеченное*/
}
ul#menu li a#main:hover{
background: url(main.png) 0 -45px;/*меняем изображение на кнопке на подсвеченное смещением фона*/
}
/*Кнопка "Залог"*/
ul#menu li a#bail{
width: 100px;
background: url(bail.png);
}
ul#menu li a#bail:hover{
background: url(bail.png) 0 -45px;
}
/*Кнопка "Покупка"*/
ul#menu li a#buy{
width: 140px;
background: url(buy.png);
}
ul#menu li a#buy:hover{
background: url(buy.png) 0 -45px;
}
/*Кнопка "Контакты"*/
ul#menu li a#contacts{
width: 165px;
background: url(contacts.png);
}
ul#menu li a#contacts:hover{
background: url(contacts.png) 0 -45px;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="main.htm" id="main"></a></li>
<li><a href="bail.htm" id="bail"></a></li>
<li><a href="buy.htm" id="buy"></a></li>
<li><a href="contacts.htm" id="contacts"></a></li>
</ul>
</body>
</html>

  • 0

#3 Kdes70

Kdes70
    Topic Starter
  • Неактивные
  • 55 сообщений
  • Репутация: 0

Отправлено 26 February 2012 - 20:55

Спасибо)))огромное
  • 0


Оформление форума – IPBSkins.ru