Кнопка Play поверх картинок

Люди добрые, поможите пожалуйста.

Как сделать появление кнопки Play (или любой другой) поверх картинки при наведении мыши?
Т.е. навёл мышь на картинку, появилась кнопочка для проигрывания, как на некоторых тубах. Адреса этих тубов вспомнить не могу, иначе - свистнул бы код и не спрашивал. Видел вариант с картинкой в качестве бэкграунда, но он мне не нравится.

Всем спасибо.

Отпозиционируй кнопку плей над картинкой. И выставь ей стиль display:none; И потом на Javascript писать надо появление и прятанье её. И всё. Если сам не разберёшься стукни в аську мне. помогу.

gimcnuk писал:

Видел вариант с картинкой в качестве бэкграунда, но он мне не нравится.

а чем вариант плох?

xp-ViT: спасибо за совет, но сделал по-другому, примитивно.
Skat: картинки должны индексироваться СЕ. А как будет индексироваться фон, не знаю.

Я чо-то не понял вопроса, наверное. Это же самый простой оверолл, состоящий из двух картинок, одна из которых появляется после наведения на нее мышки и именно с ней связан соответствующий линк.

Можно то же самое сделать с помощью свободно позиционируемых элементов (если сайт не на шаблонах). Но овероллы проще всего.

А подробней? Если можно с примерами.
Если подразумевается замена одной картинки на другую, то это не подходит.
Как это должно выглядеть: картинка (тумба), при наведении на неё мыши, поверх картинки-тумбы появляется кнопка play, под которой видно картинку-тумбу. Т.е. одна картинка поверх другой. Надеюсь, понятнее стало

Видел вариант с z-index, но там абсолютное позиционирование.

gimcnuk писал:

А подробней? Если можно с примерами. Если подразумевается замена одной картинки на другую, то это не подходит. Как это должно выглядеть: картинка (тумба), при наведении на неё мыши, поверх картинки-тумбы появляется кнопка play, под которой видно картинку-тумбу. Т.е. одна картинка поверх другой. Надеюсь, понятнее стало Видел вариант с z-index, но там абсолютное позиционирование.

Два варианта.

1. Первая картинка, которая видна изначально, до того, как на нее навели мышку, это твоя основная картинка. Вторая картинка, которая появляется после наведения мышки и которая залинкована, - это та же самая картинка, на которой нарисована кнопка.

2. Первая - основная картинка. Вторая - это кнопка на прозрачном фоне (гиф или пнг).

И - самый простой оверолл, который в любой версии дримвивера делается и линкуется за 4 секунды.

Эта, я что-то плохо соображаю! Естественно везде в моих предыдущих постах следует читать не ОВЕРОЛЛ, а РОЛЛОВЕР (ROLLOVER)! СОРРИ!

Dreamweaver>Insert>Image Objects> Rollover Image, там Original image - это твоя исходная картинка, Rollover image - та, которая появится после наведения мышки. А When clicked, Go to URL - это строка адреса, натурально.

1. Не вариант, картинок много.
2. А подробней этот вариант можно? Боюсь, не всё так просто. Кучу сайтов пересмотрел, ни один пример не подходит.

Дримвивера нет. Попробую поискать термин роловер.

gimcnuk писал:

1. Не вариант, картинок много. 2. А подробней этот вариант можно? Боюсь, не всё так просто. Кучу сайтов пересмотрел, ни один пример не подходит. Дримвивера нет. Попробую поискать термин роловер.

Существуют серверные директивы, которые сами за тебя все сделают, но я в них не разбираюсь. Но все-равно (имхо) по-любому тебе придется с каждой картинкой индивидуально работать, потому что каждая из них имеет индивидуальный линк, если я правильно понял. Но подготовить изображения для ролловеров можно автоматом в фотошопе - пусть их будет даже несколько тысяч, все будет сделано за пять минут. Вот примерный алгоритм:

1. Сделай папку, в которую положи все картинки превьюшек. Вероятно, они у тебя будут одного размера, хотя это не принципиально

2. В ней сделай бэтч-ренейминг, например от 0001 до 9999, чтобы они у тебя стояли в нужном тебе порядке.

3. Создай копию этой папки. В ней сделай новый бэтч-ренейминг, добавив к номеру индекс "а" (0001-а - 9999-а).

4. Открой фотошоп и создай новый документ с прозрачным бэкграундом. Его размер должен быть не больше твоей самой маленькой картинки (если они разные).

5. Нарисуй на ней кнопку нужного цвета, размера и формы. Сохрани где-нибудь, но не в этих двух папках.

6. Открой из папки-копии любую картинку.

7. Сделай активной картинку с кнопкой, щелкнув по ней.

8. Открой закладку Actions и создай новый сет и новое действие (как-то обзови, потом сгодится). Нажми на кнопку записи макрокоманды.

9. Сделай Select>All, a потом Edit>Copy.

10. Активизируй щелчком по ней картинку-копию и сделай Edit>Paste. При этом будет создан новый слой с кнопкой, причем она по умолчанию будет стоять ровно посередине картинки. Если надо поместить в другое место, то надо еще кое-что сделать; потом скажу, если надо.

11. Сделай Layer>Flatten Image и сохрани полученное где угодно, кроме двух упомянутых папкок. Важно: сохраняй через Save As, потому что если будешь сохранять через Save for Web and device, не сможешь потом использовать автоматизацию. Закрой картинку-копию. Картинку с кнопкой не закрывай.

12. Выключи запись макрокоманды.

Все. Это можно сделать буквально за три минуты.

Теперь запусти File>Autоmate>Batch и укажи, что надо выполнить новую макрокоманду. При соответствующих настройках в твоей папке-копии через две минуты все картинки будут заменены на картинки с кнопкой. Перемести их в твою основную папку. Теперь картинки будут стоять в нужном порядке - основная, а сразу после нее - картинка с кнопкой. Ничего не надо будет искать при создании ролловеров. Положи эту папку куда надо на свой сайт.

Теперь открой свою страницу с превьюшками в дримвивере и делай то, что написано в в моем посте от 30.04 18:42. Наверное, твои превьюшки располагаются в ячейках таблицы. Щелкаешь в нужной - и вставляешь туда тремя щелчками мышки нужный ролловер. Ничего проще не придумать. Хелп к фотошопу рекомендует использовать именно Дримвивер.

Можно воспользоваться методой создания ролловеров, описанной в хэлпе фотошопа, но мне она представляется менее удобной.

Если Дримвивер тебе нужен только для ролловеров, то рекомендую старенький четвертый - весит мало, работает шустро. Или восьмерку. CS4 не обязателен.

Хэв фан.

В реальности все гораздо проще, чем может показаться.

http://Hae6y.narod.ru/rollover/

Это пример, что было сделано по указанной методе (без создания макрокоманды, естественно) за 1 минуту из больших картинок.

Спасибо за развёрнутый ответ, но - зря.
Не терпит моя тонкая душа, подобного ужасного действия - удвоения количества картинок. Это не метод.
Да и дримвивер этот, денег стоит. Платить не хочется, а воровать - совесть не позволяет.

В качестве компенсации отвесил рейтингу, сколько позволяет мой ранг. Чем могу ...

Вообще в CSS есть такая штука, как проперть z-index, которая позволяет размещать одно над другим. Есть opacity, которая указывает непрозрачность (то есть свойство, обратное прозрачности) для элемента. Есть jQuery, который упрощает сильно работу с JS и DOM. Всех этих элементов в сумме должно хватить для создания того, что тебе нужно ;)

То gimcnuk: тебе универсальный способ какой то нужен? Или пойдет что нибудь конкретно под твою верстку ? Если в двух словах, с пмощью ЦСС позиционируешь картинку в формате пнг с прозрачностью 100% над своей, при наведении мыши прозрачность убираешь в ноль. Это без скриптов всяких. Если конкретный случай, можешь в асю стукнуть, попробуем придумать

Всем спасибо.

Принцип я понимаю, реализация хромает.
Кривой вариант я сделал, теперь балуюсь с з-индексами и визибилитью. Везде свои недостатки, а хочется совершенства

Совершенство либо достигается годами, либо покупается