|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
12.07.2011, 19:54 | #1 |
Новичок
Джуниор
Регистрация: 12.07.2011
Сообщений: 3
|
Нарастить картинку на кнопку
Привет
Подскажите пожалуйста для чайника на примере как воообще накладывают картинки подобно этому примеру в котором зелёная леана пущена по всем кнопкам. Как я только не пробовал у меня всё отдельно получается смещение. ПРИМЕР ТУТ: |
12.07.2011, 19:59 | #2 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
1. imagemap
2. Поверх кнопок позиционированием налеплена леана, а сверху невидимые дублеры кнопок 3. вся картинка разрезана на кнопки и находится в таблице (дивах, списке) с общим бэкграундом с лианой 4. флешка 5. еще что-то установите фаербаг и посмотрите, либо тупо раберите исходный код страницы
Alar, верни репу!
|
12.07.2011, 20:31 | #3 |
Новичок
Джуниор
Регистрация: 12.07.2011
Сообщений: 3
|
|
13.07.2011, 08:02 | #4 |
Форумчанин
Регистрация: 20.02.2010
Сообщений: 229
|
1) почему вы запостили это в раздел PHP и не в HTML \CSS? ))
2) скорее всего нарисовали вот такую картинку как вы видите и разрезали ее на маленькие (для каждой кнопки отдельная) или сделали спрайтом. что такое спрайты гуглите " css спрайты" что такое разрезали гуглите "Photoshop CS 3\4\5 для новичков") в любом случае все это реализовано с помощью css Либо css+javascript. +1 про FireBug под каждой браузер (кроме осла вроде) есть такая довольно удобная штука. У некоторых (Chrome) даже встроенная. С помощью нее можно выделять элементы на странице и смотреть из чего они сделаны их css стили и многое многое другое. Рано или поздно вы придете к этому, но лучше раньше все же)
думай как баг, действуй как баг, и ты найдешь баг )
|
13.07.2011, 16:00 | #5 | |
Новичок
Джуниор
Регистрация: 12.07.2011
Сообщений: 3
|
Цитата:
Поэтому продолжу тут. Сразу говорю то что я здесь выкладываю это не моё. Я лишь пытаюсь разобраться как так делается. Для примера наткнулся на сайт В оригинале выглядет так: ССЫЛКА 1: http://animeonline.su/ А вот как картинка выглядет у них целиком: ССЫЛКА 2 http://animeonline.su/templates/Black/images/shapka.png Если отталкиваться от выше изложенного то тут способ обсалютно такой как ты написал выше или тут что то уже другое выесняется?. Я просто в HTML как рыба на траве. Знаю основы как картики вставлять как ссылки делать и тому подобную ерунду вводную. Просто я думал что может кто то попонятнее покажет 1 раз на примере как выглядеть код должен а я бы с вами чуть что его разобрал что бы до меня дошло как это делается. Не хочется учить HTML очень сильно всего из0-за надобности понять 1 этот урок по накладываю картинок в таком стиле |
|
13.07.2011, 21:46 | #6 |
Форумчанин
Регистрация: 08.05.2010
Сообщений: 177
|
Это все реалызовано с помощью СSS в комбинации с JavaScript
пример http://vremenno.net/html-css/css-drop-down-menu/ Чуть-чуть не то но так же делается меню которое вы показали Ну а с фоновым изображением, в этом случае Веб-дизайнер воспользовался или манипуляцией с свойством position или воспользовался слоями (до этого я еще сам не добрался возможностей не знаю) Смотрите этот участок кода и есть сама ссылка Код:
CSS очень нужная штука при сайто-строительстве Последний раз редактировалось Anubys; 13.07.2011 в 21:59. |
14.07.2011, 06:55 | #7 |
Форумчанин
Регистрация: 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 нужно в сайтостроительстве. вам крайне тяжело будет получать удовлетворительные результаты без этих языков. Тоже самое что на кресло пилота истребителя посадят инженера, который этот самый самолет спроектировал, но не в курсе как им управлять)
думай как баг, действуй как баг, и ты найдешь баг )
|
14.07.2011, 10:10 | #8 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Для ослика это DebugBar, можно установить в паре с ie-tester-ом.
Alar, верни репу!
|
14.07.2011, 10:16 | #9 |
Форумчанин
Регистрация: 20.02.2010
Сообщений: 229
|
имхо если для веб разработки ты используешь осла, то DebugBar теб врятли поможет)
думай как баг, действуй как баг, и ты найдешь баг )
|
15.07.2011, 16:29 | #10 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
DebugBar нужен не для разработки, а для отладки. По крайней мере, это намного удобней, чем отлаживать структуру "методом тыка".
Alar, верни репу!
|
Опции темы | Поиск в этой теме |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Нарастить базу данных | edition | Microsoft Office Excel | 6 | 12.07.2010 00:06 |
Как получить картинку при наведении на другую картинку (ссылку) | seeker1 | JavaScript, Ajax | 8 | 04.07.2010 19:42 |
как кнопку поменять на картинку | неботан | HTML и CSS | 5 | 21.11.2009 23:23 |
Кто нибудь может подсказать как нарастить Дату определенное кол-во раз? | •ScReam•™ | Помощь студентам | 2 | 18.06.2009 01:18 |
Как на кнопку добавить картинку? | xTANATOSx | Общие вопросы Delphi | 3 | 05.11.2007 13:11 |