Карта изображений

[Avesha]

Доброго дня уважаемые!

Прошу совета у знатоков)

Дело в том, что у меня есть карта изображений (1 большая картинка состоящая из 7).

http://jsfiddle.net/wBSyd/

Необходимо, чтобы при наведении на каждый кусочек появлялось увеличенное изображение этого кусочка. Где-то глубоко, очень глубоко я понимаю, что возможно мне поможет код CSS

#(id или класс) a:hower {

background: url(' ');

}

Но кому и как присвоить класс или id... Вот в этом и вопрос.

И будут ли работать мои ссылки перехода к нужному разделу...

Заранее благодарю за ответ, любую помощь или пинок в правильную сторону.

[Kray Storm]

есть карта изображений (1 большая картинка состоящая из 7)

Точнее: одна картинка с 7-ю "активными" областями, в этом вся загвоздка.

при наведении на каждый кусочек появлялось увеличенное изображение этого кусочка. ...мне поможет код CSS

CSS вроде пока не умеет выдирать и из единого изображения фрагмент и масштабировать. Может быть, разве, какие-то экспериментальные CSS3-возможности. Теоретически, если брать только CSS, можно посмотреть в сторону множественных фонов или нескольких областей-блоков и смене значений background/background-size при наведении. И туда еще ссылки нужно делать... Замороченно, как-то.

Если использование карт не принципиально, то я бы просто порезал изображение на фрагменты. Засунуть их внутрь <a>, спозиционировать и дать нужную реакцию при :hover не проблема, можно даже красивости через transitional добавить.

пинок в правильную сторону

Бдум! Карты, работа с областями при наведении. Что-то подобное. Но там возни тоже достаточно и это уже не "чистый CSS".

[Avesha]

Спасибо большое.

CSS вроде пока не умеет выдирать и из единого изображения фрагмент и масштабировать.

Так а мне и не надо выдирать - я в шопе сделаю картинки для каждого из 7 кусочков... (http://i46.fastpic.r...a49ac3138ca.png)

спозиционировать

Ой... тут как-то тяжко) Я как напозиционирую...

Edited June 11, 2013 by Avesha

[Kray Storm]

у меня есть карта изображений

я в шопе сделаю картинки для каждого из 7 кусочков

Ну тогда и карты не нужны. Вот все "само" и разрешилось ))

Глянул изображение. Так это будут обычные "карточки товаров"? Тогда тут карты совершенно не в тему. Каждый объект со всеми своими ссылками и картинками - в отдельный блок и вперед.

А увеличение делается обычной сменой width/height при :hover.

[Avesha]

Если не трудно - гляньте пожалуйста сюда... http://jsfiddle.net/vtPeF/1/

Попробовала сделать по предложенному варианту

Я порезала картинку (которая была картой), но как сделать теперь, чтобы при наведении не просто картинка менялась в своем div-e а во всплывающем окошке появлялась увеличенная картинка этого же изображения (которую я сделаю в фотошопе)?

Edited June 11, 2013 by Avesha

[Kray Storm]

Вообще такие вещи легко и быстро делают на jQuery, но ведь у нас есть CSS3(!) и мы не ищем легких путей ))

Можно сделать как-то так.

Edited June 11, 2013 by Kray Storm

[Avesha]

Вообще такие вещи легко и быстро делают на jQuery, но ведь у нас есть CSS3(!) и мы не ищем легких путей ))

Можно сделать как-то так.

Спасибо Вам огромное - буду ковырять в этом направлении!)