Я думаю, вам нужно по-другому взглянуть на то, как к этому подойти, некоторые пункты в вашем вопросе кажутся неверными.
Если это дизайн портфолио, похожий на связанный, то вам нужно знать о 2 вещах:
- Снимок экрана сайта - контент, а не презентация. Люди приходят в ваше портфолио, чтобы увидеть, что вы сделали, важно, чтобы вы знали разницу между HTML img (контент) и фоновым изображением (презентация).
- Если у вас есть масштаб изображения, он будет выглядеть ужасно при разных разрешениях. Если вы растянете изображение или уменьшите его размер, это приведет к искажению изображения, что не очень приятно видеть в портфолио. Я советую вам быть прагматичными и выбирать, чтобы ваши изображения были фиксированного размера, что также поможет в добавлении ваших горячих точек в верхней части изображения. Вот как у автора связанного портфолио есть подходы, с дополнительным фоновым изображением, чтобы красиво разделить страницу.
Еще одна вещь, которую стоит отметить, это то, что связанный пример использует canvas для рисования точек из-за линий, соединяющих каждую из них. Canvas делает это легко, будучи динамичным, но не поддерживается в IE без использования плагинов. Однако, если вам не нужно менять эти точки очень часто, вы можете добиться аналогичного эффекта только с помощью изображений и CSS.
В остальной части этого ответа предполагается, что вы используете HTML4 / XHTML. В связанном примере используется HTML5 (некорректно местами), но без особых требований для использования этой технологии, я предполагаю, что вы не используете HTML5.
Для начала рассмотрим каждое изображение и заметки как отдельный блок контента, содержащийся в отдельном div. Как упоминалось ранее, снимок экрана является изображением содержимого и должен иметь собственный тег img. Я также утверждаю, что примечания представляют собой список конкретных пунктов, поэтому они должны быть помечены как таковые.
<div class="article">
<div>
<img src="my_screenshot.png" alt="Appropriate alt text here" />
<ul>
<li class="note1">Here is an interesting part of the image</li>
<li class="note2">This is also interesting</li>
<li class="note3">Look at this! Pretty cool huh?</li>
</ul>
</div>
</div>
Наценка: сделано. Вы можете использовать это для каждой части и просто заменить содержимое по мере необходимости. Если вы считаете, что порядок точек значительный, замените ul на ol.
Далее вы хотите подумать о CSS. Это только основы для начала, этого должно быть достаточно, чтобы указать вам правильное направление. Вам нужно установить div.article для позиционирования относительно, чтобы позволить позиционировать абсолютные дочерние элементы относительно левого верхнего угла этой конкретной записи. Также установите обертку div ширину, высоту и отцентрируйте ее (также установите размеры img). Наконец, вам нужно подготовить li заметки для позиционирования.
.article {position:relative}
.article div{position:relative; width:800px; height:600px; margin:0 auto}
.article img {display:block; width:800px; height:600px}
.article ul,.article ul li {position:absolute; list-style:none; top:0; left:0; margin:0; padding:0}
/* Debug styles */
.article ul li {height:20px; width:20px; background-color:#ff0000}
Теперь это всего лишь случай построения точек для каждого li. Используйте редактор изображений, чтобы определить верхнее левое положение (в пикселях) каждой точки, а затем установите каждый li.noteX в зависимости от ситуации.
.article ul li.note1{top:156px; left:89px}
Этого должно быть достаточно, чтобы поставить вас на правильный путь. Как только вы разберетесь с этим, вы можете начать добавлять фоновые изображения для заметок и любой JavaScript для добавления всплывающих подсказок и так далее. Что касается использования нескольких записей на странице, присвойте каждому div.article уникальный идентификатор и используйте его для более точного указания li.
РЕДАКТИРОВАТЬ: Живой пример с небольшим количеством JS, чтобы показать зависания. Извините за отсутствие реальных изображений, ужасные цвета должны быть достаточно визуальными;)