2012-06-30 4 views
1

Я хочу сделать две вещи для разных изображений на одной странице, я посмотрел на все, и я не могу найти ответ, мне бы хотелось, если бы кто-то мог мне помочь.Как создать изображение через изображение в javascript

На первом изображении я хочу наложить на него меньшее изображение на боковой поверхности, а при наведении большого изображения небольшое изображение изменится и появится надпись.

Кроме того, во втором изображении я хочу, чтобы изображение меньшего размера появлялось всегда, и если вы наведите указатель мыши на большое изображение, появится рамка изображения, а слова под изображением будут окрашены в другой цвет.

спасибо

+0

Проблема в том, что я не знаю, как установить маленькое изображение над большим – user1492721

+0

Мы не здесь, чтобы написать вам код, и вы не показали никаких доказательств того, что вы пробовали. Несмотря на это, я дам вам ключ к тому, где искать ... Вы должны посмотреть на использование CSS и, в частности, на 'position' attitute, используя значения' relative' и 'absolute', а затем' top', 'right',' bottom' и 'left'. – freefaller

ответ

0

Пытаться установить больше Z-индекс по парения действия на этом элементе вы зависания с помощью JavaScript. Положение меньшего изображения и некоторый текст над другим элементом могут быть сделаны, например. использование положения: абсолютное; и z-index (через javascript/jquery).

+0

Я написал код для imege над изображением и использовал z index, проблема в том, что я не знаю, как изменить маленькое изображение на пыльник на hover – user1492721

+0

вы можете использовать img + img для нацеливания изображения, следующего за другим, и добавить: hover ex (img: hover + img), чтобы изменить его на зависании :) – Reuben

+0

установить небольшое изображение в состоянии по умолчанию, например smallimage {display: none; }, а затем на hover добавьте класс в smallimage active и в css напишите .smallimage.active {display: block; }. Не забудьте удалить активный класс перед его добавлением. поэтому сначала removeClass ('active'), а затем addClass ('active'). Конечно, есть и другие способы достижения этого. Проверьте эту ссылку http://jqueryfordesigners.com/image-cross-fade-transition/, это немного отличается от того, что вы хотите, однако вы получите эту идею. – Derfder

Смежные вопросы