Ползунок внутри изображения

Question

Я хотел бы разместить слайдер внутри изображения (в частности, iMac), как у них на unbounce homepage. Мне кажется, мне нужен div, а затем jQuery, но я понятия не имею, с чего начать.

Вещь - это изображение внутри Mac, но не изображение iMac. Если это помогает, я использую WordPress, поэтому я тоже могу использовать любой плагин. Есть ли у вас какие-либо идеи о том, как это сделать?

Спасибо,

http://i.stack.imgur.com/HVe98.png

Answer 1

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

См. Здесь, чтобы начать: Dynamically add image to canvas. Или здесь: Dynamically add image to canvas

Answer 2

Late, но может быть полезным (за счет увеличения уровня сложности):

• Используйте ИАЦ изображение рамки PNG, оставляя его внутри «пустой», используя прозрачность. За ним, ползунок
• Сделать ползунок, который каждый образ framde по ИАЦ
• Расположите ползунок зависания ИАЦ изображение