Новичок нуждается в помощи при наведении курсора и карте на HTML-странице, чтобы показывать изображения при наведении курсора - PullRequest
Новая
       16

Новичок нуждается в помощи при наведении курсора и карте на HTML-странице, чтобы показывать изображения при наведении курсора

2 голосов
/ 23 декабря 2009

Есть небольшая веб-страница на www.peterbio.com/mom/test.htm

Кто-то написал код, наведя курсор мыши и создав карту изображения. Когда вы нажимаете на один из фиолетовых воздушных шаров, появляется другое изображение.

  1. *** Нужна помощь в добавлении дополнительного кода, чтобы я мог добавить еще одну картинку с наведением курсора мыши на другой шарик в изображении. Я не знаю как. Но с примером и дополнением к коду на странице выше я могу немного узнать.

Тогда я могу сделать то же самое, чтобы все всплывающие подсказки на изображении делали наведение мыши и показывали другие JPG (позже я добавлю другие изображения). Вы можете использовать тот же jpg, чтобы добавить 2-е, 3-е и т. Д.

  1. *** Также нужно знать, какую бесплатную программу для карт я могу использовать для создания карты изображений, чтобы я мог делать то же самое с остальными шарами - UNLESS - вы любезно добавили другие координаты к карте изображений и используйте то же изображение для всех других шаров.

Не уверен, нужно ли предварительно выбирать изображения или нет. Их будет около 110 тыс. Или меньше.

Большое спасибо за вашу помощь. Пытаюсь сделать что-то для моей семьи, так как моя мама умерла. Полагаю, что справляюсь. PC

1 Ответ

5 голосов
/ 23 декабря 2009 
<map name="momMap" id="momMap">

В этом случае каждая область представляет собой воздушный шар, определяемый координатами, затем действие "onmouseover" запускает функцию javascript "changeImage", которая принимает атрибут "newimage", который является именем изображения показать.

Координаты баллона, который вы хотите установить, вставляются парами. Например, 0,0 будет означать верхний левый угол, чем больше пар вы добавляете, тем больше вершин имеет ваша фигура, область, образованная соединением этих вершин, будет той, на которую воздействует действие javascript. 

<area shape="poly" coords="326,93,316,136,275,165,250,163,235,127,261,100,286,66,308,68" href="#" onmouseover="changeImage('momf.jpg')" onmouseout="resetImage()"/>

Таким образом, "poly" устанавливает тип области на полигон, а координаты определяют, где и сколько существует вершин. Старайтесь сохранять эти координаты вершин в порядке, чтобы не запутать некоторые браузеры. Кроме многоугольника вы можете использовать и другие фигуры, такие как круги и прямоугольники. Использование этих типов областей описано здесь .

Вы запросили пример, это покажет то же изображение (так как я не знаю другого изображения в этой папке) в квадрате 100px от верхнего левого угла родительского изображения: 

<area shape="poly" coords="0,0,100,0,100,100,0,100" href="#" onmouseover="changeImage('momf.jpg')" onmouseout="resetImage()"/>

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

...