Несколько подписей к изображению - нажмите на ссылки, чтобы увидеть по одной за раз

Question

Я пытаюсь сделать что-то похожее на http://www.nejm.org/doi/full/10.1056/NEJMimc1109704. (Нажмите «Воспроизвести» и перейдите на страницу 5 - интерактивный физический экзамен.) Я думаю, что они делают это с Flash, но я бынравится использовать javascript / jQuery.

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

Буду ли я решать это как карту изображения?Т.е. создать карту и использовать jQuery для переключения разных частей карты?Есть ли плагин, который делает это?Поиски в Google не помогают мне, но, возможно, я не знаю, что искать.Любая помощь будет оценена.

Answer 1

У меня та же проблема, и я нашел imageMapster.Проверьте http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles Я думаю, это то, что вы хотите сделать.Просто сегодня это решение, еще не разобрались.Выглядит многообещающе, хотя.В противном случае посмотрите qTip2 http://craigsworks.com/projects/qtip2/demos/ Возможно, некоторые изменения позволят вам / нам делать то, что мы хотим сделать Удачи!Держите вас в курсе, если я понял это

Answer 2

Зачем вам нужен jQuery?

В любом случае, опустите основное изображение и установите его положение в том месте, где вы хотите.Вы можете даже поместить его в хороший контейнерный div, просто убедитесь, что все ваши div с заголовками относятся к одному и тому же родителю.Затем поместите надписи с фиксированной позицией ваших изображений надписей с более высоким z-индексом в вашем CSS.Затем поместите изображения подписи в соответствующие верхнюю и левую позиции, пока они не будут правильными.Конечно, используйте прозрачные PNG.

Все, что вам нужно сделать, чтобы переключить их, это установить для style.display элемента значение "none" или "наследовать"