Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
misterX_
0 / 0 / 0
Регистрация: 28.01.2014
Сообщений: 2
1

теги map и area. Создание всплывающей картинки

28.01.2014, 17:28. Просмотров 972. Ответов 3
Метки нет (Все метки)

Написал код, который позволяет при наведении на area выводить всплывающую картинку.
Не получается сделать если областей/картинок много.

стиль:
HTML5
1
2
3
4
5
6
7
8
9
<style type="text/css">
img {border: 0;}
 
    #newDiv {
    position: absolute;
    margin-left: 90px;
    margin-top: 90px;
    }
</style>
сама карта:

HTML5
1
2
3
4
5
6
<div id="body">
    <map name="Img" id="Img">
      <area nohref="nohref" id="ar_1" alt="" title="" shape="rect" coords="0,180,100,360"/>
    </map>
    <img src="1.jpg" alt="9" usemap="#Img" width="965" height="360">
</div>
код:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    var body = document.getElementById("body");  
    var first = body.getElementsByTagName("map")[0];
    
    function f_createElement() {    
        var newDiv = document.createElement("div");
                newDiv.innerHTML = "<img src='/images/1_1.png'/>";}     
        newDiv.id = "newDiv";
        body.insertBefore(newDiv, first);
    }
    
    function f_removeElement() {
        var newDiv = document.getElementById("newDiv"); 
        newDiv.parentNode.removeChild(newDiv);
    }
    
    document.getElementById("Img").onmouseover = f_createElement;
    document.getElementById("Img").onmouseout = f_removeElement;
Добавлено через 1 час 19 минут
Помогите пожалуйста. Не знаю как определить на какой area наведена мышка.
Вот так не помогает:
Javascript
1
2
var area1 = document.getElementById("ar_1");
if (area1.onmouseover)
Добавлено через 35 минут
Кто-нибудь может помочь? Хотя бы по тупому - лишь бы работало
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
28.01.2014, 17:28
Ответы с готовыми решениями:

Появление div при наведении на area в map-е
Имеется карта map, на ней обозначены области area &lt;div class=&quot;map&quot; align=&quot;center&quot;&gt; &lt;img...

Открытие картинки из тега <AREA> в окне jQuery
Добрый день. Впервые попробовал построение карты ссылок на картинке с помощью &lt;map&gt;. Всё сделал,...

Как для html map area в форме звезды сделать тень при наведение на area?
Как для html map area в форме звезды сделать тень при наведение на area?

фон <map><area ... >
Есть карта: &lt;img src=&quot;прозрачная.png&quot; usemap =&quot;#map&quot; width=&quot;600&quot; height=&quot;400&quot; alt=&quot;карта&quot;&gt; ...

Тег area в map
Здравствуйте, может кто знает... как задать area цвет... или это вообще невозможно?? Вот код где...

3
slagemer1
44 / 26 / 16
Регистрация: 01.01.2014
Сообщений: 163
29.01.2014, 15:43 2
Скинь целиком код, а то лень так копировать.
0
newJS
Эксперт JSЭксперт HTML/CSS
2399 / 1073 / 307
Регистрация: 23.06.2011
Сообщений: 3,345
30.01.2014, 08:08 3
Цитата Сообщение от misterX_ Посмотреть сообщение
Не получается сделать если областей/картинок много.
ну и где это много? или мы должны рисовать картинку, писать координаты....
давай архивом готовое, может кто и поможет
0
misterX_
0 / 0 / 0
Регистрация: 28.01.2014
Сообщений: 2
30.01.2014, 20:53  [ТС] 4
Всем спасибо за ответы. Решил проблему самостоятельно. Тему можно закрывать
0
30.01.2014, 20:53
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
30.01.2014, 20:53

<area> и <map>! как часто используете?
О таких тегах как &lt;area&gt; и &lt;map&gt; знаю давно, но по неизвестным даже мне причинам я ими ни разу не...

Как убрать рамку с area и map
Есть сайт, на нём решил использовать map Но вот в чём незадача, в IE лезет рамка, пытался...

Сгенерировать случайную точку, принадлежащую полигонув map area
Задание: сгенерировать случайную точку, которая бы лежала внутри полигона area с заданными...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru