Просмотр только определенных частей изображения

Question

Привет, я хотел бы видеть только определенную часть изображения на своем сайте, и я думаю, что если я правильно помню, мне нужно использовать javascript для этого? Кто-нибудь может дать мне код для этого?

Более конкретно, это изображение:

Я бы хотел видеть только переднюю часть головы. Диаграмма для этого изображения:

Спасибо. Если это не на нужном веб-сайте, было бы здорово, если бы его можно было переместить.

Answer 1

Вы можете использовать CSS для достижения этой цели. Установите изображение в качестве фона, установите высоту / ширину части, которую вы хотите видеть, и установите положение фона, чтобы поместить часть, которую вы хотите видеть, в «окно», которое вы создали.

http://www.askapache.com/css/css-background-image-sprite.html

Answer 2

хорошо .. вы определяете элемент (div), который должен быть изображением «контейнер», и вы устанавливаете полное изображение как css «background-image». затем вы управляете смещением изображения с помощью правила css "background-position".
Это можно сделать только с помощью css, но вы можете динамически изменять правила css с помощью javascript.
хороший пример - страница jquery ui :

вы можете видеть, что он загружает весь набор значков в качестве фонового изображения к любому значку, отображаемому на сайте, а затем "перемещает" фон в нужное положение с помощью background-position