создать карту изображений с помощью Javascript

Есть ли способ создать карту изображений на изображении, когда изображение создается в Javascript?

Итак, изображение создается таким образом:

var img = new Image();

затем установите все свойства.

Но как мне теперь создать карту изображения на этом изображении?

С уважением, Тони

ОБНОВЛЕНИЕ

Вот мой код для создания изображения:

  function createimg()
  {
       var img = new Image();
       img.src='Image/URL';
       img.alt='Next image';  
       img.id = 'span1';
       img.style.zIndex = 10;
       img.style.position = 'absolute';  
       img.style.display='none'; 
       img.style.top = '130px';
       img.style.padding='10px'; 
       img.style.left='440px'; 
       img.usemap='#trialmap';   
       img.className ='dynamicSpan';
       document.body.appendChild(img);
       return img;
  }

Это находится внутри тегов. Теперь карта изображений:

<map name="trialmap">
    <area shape ="rect" coords ="0,0,500,500"
     href ="http://www.google.com" target ="_blank" alt="Sun" />

    <area shape ="circle" coords ="100,100,10,10"
     href ="http://www.twitter.com" target ="_blank" alt="Mercury" />
</map>

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


javascript imagemap
person Tony The Lion    schedule 08.10.2009    source источник
comment
Поскольку они связаны по имени, вы можете разместить его в любом месте вашего HTML. И поскольку карта ничего не делает и не отображается, если она никогда не привязана к изображению, вы можете заранее добавить ее в HTML, без необходимости в javascript, за исключением добавления карты использования к изображению.   -  person Anthony    schedule 08.10.2009

Ответы (2)


arrow_upward
3
arrow_downward

Первый,

Как вы создаете изображение в Javascript?

Но по вашему вопросу...

Карта изображения привязана к элементу <img />, а не к самому изображению. Итак, даже если у вас есть метод создания изображения в javascript, как вы размещаете это изображение на странице?

Если изображение передается на сервер и, следовательно, имеет URL-адрес, вы можете создать элемент img в DOM, а затем создать карту изображения.

На самом деле вы могли бы получить карту изображения еще до того, как изображение было создано, поскольку все, что связывает карту с изображением, — это атрибут usemap, который указывает на атрибут name элемента map.

Быстрое редактирование

Думаю, теперь я понимаю. Метод Image(), о котором вы говорите, просто создает элемент img, верно?

Таким образом, вам просто нужно добавить атрибут/свойство usemap и установить для него имя <map>, которое вы хотите использовать.

Чтобы использовать метод Дэвида, вы должны использовать что-то вроде:

//This assumes the image will go in some div with the id of "image-box"

var imageBox = getElementById("image-box");
var myImage = createElement("img");
myImage.id = "myImage";
myImage.src = "myimage.png";
myImage.useMap = "#myImageMap";
imageBox.appendChild(myImage); 

//Now you would need to have a map element with a name of myImageMap

var myMap = createElement("map");
myMap.name = "myImageMap";
imageBox.appendChild(myMap);

//Obviously you would want to then fill the map using the appendChild method with the area elements that make it useful...
person Anthony    schedule 08.10.2009
comment
Да, Image() — это просто объект, который создает изображение. - person Tony The Lion; 08.10.2009
comment
Метод appendChild принимает ссылку на узел DOM, а не на строку. - person Quentin; 08.10.2009
comment
Спасибо. Я что-то пропустил в исправлении? - person Anthony; 08.10.2009

arrow_upward
0
arrow_downward

http://www.w3.org/TR/html4/struct/objects.html#h-13.6 объясняет структуру HTML. Вам просто нужно построить эту структуру непосредственно в DOM, а не в HTML.

Opera WSC содержит хорошее введение в DOM.

person Quentin    schedule 08.10.2009
comment
Привет, Квентин, не могли бы вы сказать мне, есть ли способ добавить новый usemap через JAvascript? То есть вместо того, чтобы жестко кодировать карту использования с атрибутами области в самом HTML, просто сгенерировать ее на лету и назначить какому-то изображению? - person SexyBeast; 16.03.2013
comment
Вам просто нужно построить эту структуру непосредственно в DOM, а не в HTML. - person Quentin; 17.03.2013
comment
Да, да, удалось сделать это сразу после того, как я задал этот вопрос ..: D - person SexyBeast; 17.03.2013