Форум программистов
 
О проблемах, например, с регистрацией пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль.

Вернуться   Форум программистов > Скриптовые языки программирования > PHP
Регистрация

Восстановить пароль
Повторная активизация e-mail

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Ответ
 
Опции темы
Старый 12.07.2011, 19:54   #1
towayy
Новичок
Джуниор
 
Регистрация: 12.07.2011
Сообщений: 3
По умолчанию Нарастить картинку на кнопку

Привет
Подскажите пожалуйста для чайника на примере как воообще накладывают картинки подобно этому примеру в котором зелёная леана пущена по всем кнопкам.

Как я только не пробовал у меня всё отдельно получается смещение.

ПРИМЕР ТУТ:

towayy вне форума Ответить с цитированием
Старый 12.07.2011, 19:59   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

1. imagemap
2. Поверх кнопок позиционированием налеплена леана, а сверху невидимые дублеры кнопок
3. вся картинка разрезана на кнопки и находится в таблице (дивах, списке) с общим бэкграундом с лианой
4. флешка
5. еще что-то
установите фаербаг и посмотрите, либо тупо раберите исходный код страницы
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 12.07.2011, 20:31   #3
towayy
Новичок
Джуниор
 
Регистрация: 12.07.2011
Сообщений: 3
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
либо тупо раберите исходный код страницы
Мне бы ещё тупо разобрать что ты написал ))):
towayy вне форума Ответить с цитированием
Старый 13.07.2011, 08:02   #4
mrgrudge
Форумчанин
 
Аватар для mrgrudge
 
Регистрация: 20.02.2010
Сообщений: 229
По умолчанию

Цитата:
Сообщение от towayy Посмотреть сообщение
Мне бы ещё тупо разобрать что ты написал ))):
1) почему вы запостили это в раздел PHP и не в HTML \CSS? ))
2) скорее всего нарисовали вот такую картинку как вы видите и разрезали ее на маленькие (для каждой кнопки отдельная) или сделали спрайтом.
что такое спрайты гуглите " css спрайты"
что такое разрезали гуглите "Photoshop CS 3\4\5 для новичков")

в любом случае все это реализовано с помощью css Либо css+javascript.
+1 про FireBug под каждой браузер (кроме осла вроде) есть такая довольно удобная штука. У некоторых (Chrome) даже встроенная.
С помощью нее можно выделять элементы на странице и смотреть из чего они сделаны их css стили и многое многое другое. Рано или поздно вы придете к этому, но лучше раньше все же)
mrgrudge вне форума Ответить с цитированием
Старый 13.07.2011, 16:00   #5
towayy
Новичок
Джуниор
 
Регистрация: 12.07.2011
Сообщений: 3
По умолчанию

Цитата:
Сообщение от mrgrudge Посмотреть сообщение
1) почему вы запостили это в раздел PHP и не в HTML \CSS? ))
2) скорее всего нарисовали вот такую картинку как вы видите и разрезали ее на маленькие (для каждой кнопки отдельная) или сделали спрайтом.
что такое спрайты гуглите " css спрайты"
что такое разрезали гуглите "Photoshop CS 3\4\5 для новичков")

в любом случае все это реализовано с помощью css Либо css+javascript.
+1 про FireBug под каждой браузер (кроме осла вроде) есть такая довольно удобная штука. У некоторых (Chrome) даже встроенная.
С помощью нее можно выделять элементы на странице и смотреть из чего они сделаны их css стили и многое многое другое. Рано или поздно вы придете к этому, но лучше раньше все же)
Искал как написать тебе личное сообщение всё облазал вплоть до профиля но ничего похожего на ЛС не нашёл.

Поэтому продолжу тут.

Сразу говорю то что я здесь выкладываю это не моё. Я лишь пытаюсь разобраться как так делается. Для примера наткнулся на сайт
В оригинале выглядет так:

ССЫЛКА 1: http://animeonline.su/

А вот как картинка выглядет у них целиком:

ССЫЛКА 2 http://animeonline.su/templates/Black/images/shapka.png

Если отталкиваться от выше изложенного то тут способ обсалютно такой как ты написал выше или тут что то уже другое выесняется?.

Я просто в HTML как рыба на траве.
Знаю основы как картики вставлять как ссылки делать и тому подобную ерунду вводную.

Просто я думал что может кто то попонятнее покажет 1 раз на примере как выглядеть код должен а я бы с вами чуть что его разобрал что бы до меня дошло как это делается.
Не хочется учить HTML очень сильно всего из0-за надобности понять 1 этот урок по накладываю картинок в таком стиле
towayy вне форума Ответить с цитированием
Старый 13.07.2011, 21:46   #6
Anubys
Форумчанин
 
Регистрация: 08.05.2010
Сообщений: 177
По умолчанию

Это все реалызовано с помощью СSS в комбинации с JavaScript
пример
http://vremenno.net/html-css/css-drop-down-menu/
Чуть-чуть не то но так же делается меню которое вы показали


Ну а с фоновым изображением, в этом случае Веб-дизайнер воспользовался или манипуляцией с свойством position или воспользовался слоями (до этого я еще сам не добрался возможностей не знаю)

Смотрите этот участок кода и есть сама ссылка
Код:
<li> <a class="hide" href="http://anime-forum.su" target="_blank" id='menu_4'> Форум </ a>
Если бы мы убрали следующее: class = "hide" тогда эта ссылка стала бы такой которую вы уже умеете делать. И таким образом делаются следующие ссылки.
CSS очень нужная штука при сайто-строительстве

Последний раз редактировалось Anubys; 13.07.2011 в 21:59.
Anubys вне форума Ответить с цитированием
Старый 14.07.2011, 06:55   #7
mrgrudge
Форумчанин
 
Аватар для mrgrudge
 
Регистрация: 20.02.2010
Сообщений: 229
По умолчанию

ССЫЛКА 1: http://animeonline.su/
как и предпологалось
Все правильно шапка единая картинка, так же как и менюха
http://animeonline.su/templates/Blac...es/menu/22.gif - меню,
у шапки и у меню есть в стилях свойство z-index: 100 у меню и 997 у шапки. Это позволяет накладывать эелементы друг на друга.

+ свойства position и свойством top у шапки получили такое наложение.

А при наведении на отдельное меню у эелементов li срабатывает подсвойство hover и картинка у отдельной менюхи меняется.

+1 к Anubys знание CSS и HTML и JavaScript нужно в сайтостроительстве. вам крайне тяжело будет получать удовлетворительные результаты без этих языков. Тоже самое что на кресло пилота истребителя посадят инженера, который этот самый самолет спроектировал, но не в курсе как им управлять)
думай как баг, действуй как баг, и ты найдешь баг )
mrgrudge вне форума Ответить с цитированием
Старый 14.07.2011, 10:10   #8
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от mrgrudge Посмотреть сообщение
+1 про FireBug под каждой браузер (кроме осла вроде) есть такая довольно удобная штука.
Для ослика это DebugBar, можно установить в паре с ie-tester-ом.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 14.07.2011, 10:16   #9
mrgrudge
Форумчанин
 
Аватар для mrgrudge
 
Регистрация: 20.02.2010
Сообщений: 229
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Для ослика это DebugBar, можно установить в паре с ie-tester-ом.
имхо если для веб разработки ты используешь осла, то DebugBar теб врятли поможет)
думай как баг, действуй как баг, и ты найдешь баг )
mrgrudge вне форума Ответить с цитированием
Старый 15.07.2011, 16:29   #10
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от mrgrudge Посмотреть сообщение
имхо если для веб разработки ты используешь осла, то DebugBar теб врятли поможет)
DebugBar нужен не для разработки, а для отладки. По крайней мере, это намного удобней, чем отлаживать структуру "методом тыка".
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нарастить базу данных edition Microsoft Office Excel 6 12.07.2010 00:06
Как получить картинку при наведении на другую картинку (ссылку) seeker1 JavaScript, Ajax 8 04.07.2010 19:42
как кнопку поменять на картинку неботан HTML и CSS 5 22.11.2009 00:23
Кто нибудь может подсказать как нарастить Дату определенное кол-во раз? •ScReam•™ Помощь студентам 2 18.06.2009 01:18
Как на кнопку добавить картинку? xTANATOSx Общие вопросы Delphi 3 05.11.2007 14:11


Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru
Пеллетный котёл Emtas
котлы EMTAS