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

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

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


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 25 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

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

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

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

ПРИМЕР ТУТ:

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

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

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

Цитата:
Сообщение от 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
Репутация: 10
По умолчанию

Цитата:
Сообщение от 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
Репутация: 14
По умолчанию

Это все реалызовано с помощью С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
Репутация: 10
По умолчанию

ССЫЛКА 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,808
Репутация: 2359
По умолчанию

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

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

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

Опции темы

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

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нарастить базу данных 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


02:47.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.