1

画像が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>

私が読んだことによると、これは画像のすぐ下にある必要があるため、これをどこに配置しますか? タグ内に入れることができず、動作しません。

4

2 に答える 2

3

初め、

Javascriptでどのように画像を作成しますか？

しかし、あなたの質問に移りましょう...

<img />画像マップは、実際の画像自体ではなく、要素に関連付けられています。では、JavaScriptで画像を作成する方法がある場合でも、その画像をページにどのように配置しますか？

画像がサーバーにプッシュされているためにURLがある場合はimg、DOMに要素を作成してから、画像マップを作成できます。

実際、マップを画像に結び付けるのは要素usemapの属性を指す属性であるため、画像が作成される前に画像マップを作成することもできます。namemap

クイック編集

私は今理解していると思います。Image()あなたが参照している方法は、単に要素を作成することですimgよね？

したがって、基本的には、属性/プロパティを追加して、使用usemapする名前に設定する<map>だけです。

Davidの方法を使用するには、次のようにします。

//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...
于 2009-10-08T09:36:11.827 に答える
0

http://www.w3.org/TR/html4/struct/objects.html#h-13.6でHTML構造について説明しています。HTMLではなくDOMで直接その構造を構築する必要があります。

Opera WSCには、DOMの優れた入門書があります。

于 2009-10-08T09:35:26.540 に答える