3

ここに私のコードがあります：

function addAlbum(){
    var attr;
    var parent;
    var newelement;

    /*image*/
    newelement = document.createElement("img");
    newelement.src = "criar_album.png";

    attr = document.createAttribute("id");
    attr.value = "addalbum";
    newelement.setAttributeNode(attr);

    attr = document.createAttribute("usemap");
    attr.value = "#addalbum_map";
    newelement.setAttributeNode(attr);

    parent = document.getElementById("content");
    parent.appendChild(newelement);
    /*-----------------------------------------*/

    /*map*/
    newelement = document.createElement("map");

    attr = document.createAttribute("id");
    attr.value = "album_map";
    newelement.setAttributeNode(attr);

    attr = document.createAttribute("style"); /*this part is failing I guess*/
    attr.value = "cursor:pointer";
    newelement.setAttributeNode(attr);

    attr = document.createAttribute("name");
    attr.value = "addalbum_map";
    newelement.setAttributeNode(attr);

    parent = document.getElementById("addalbum");
    parent.appendChild(newelement);
    /*-----------------------------------------*/

    /*area*/
    newelement = document.createElement("area");

    attr = document.createAttribute("shape");
    attr.value = "rect";
    newelement.setAttributeNode(attr);

    attr = document.createAttribute("coords");
    attr.value = "73, 238, 115, 264";
    newelement.setAttributeNode(attr);

    attr = document.createAttribute("onclick");
    attr.value = "createAlbum()";
    newelement.setAttributeNode(attr);

    attr = document.createAttribute("onmouseover");
    attr.value = "highlightOn(470,320,511,346,2)";
    newelement.setAttributeNode(attr);

    parent = document.getElementById("album_map");
    parent.appendChild(newelement);
    /*-----------------------------------------*/
}

エリア要素にカーソルを渡すたびにカーソルの一部が変化することを除いて、すべてが正常に機能しているようです。私はhtmlで定義された静的画像で同様のことをしましたが、それが機能するので、動的に作成されたマップでなぜ機能しないのか混乱していますか?

PS: すでに CSS で「addalbum」ID のスタイルを定義していますが、役に立ちませんでした。ところで、href を定義するようなトリッキーな方法でそれを行う方法があることは知っていますが、ここでの本当の問題は何かを知りたいです。

4

1 に答える 1

1

chrome または Safari を使用している場合は、この回答を参照してください。Usemap/area の場合、カーソルがポインタに変わらない

あなたのコードは複雑すぎると付け加えておきます。style、idなどshapeを属性として追加する必要はありません (attr.value = "cursor:pointer";おそらくまったく機能しません)。以下のコードは正常に動作し、カーソルをポインターとして持つ素敵な 1,1,100,100 マップになります。ただし、Opera や Firefox などのブラウザーでのみ機能し、Chrome や Safari (WebKit) では機能しません。

var body=document.getElementsByTagName('body')[0];

var img = document.createElement("IMG");
img.src='1.gif';
img.useMap='#album_map';

var map = document.createElement("MAP");
map.id="album_map";
map.style.cursor="pointer"; //the right way

var area  = document.createElement("AREA");
area.shape='rect';
area.coords="1, 1, 100, 100";

map.appendChild(area);
body.appendChild(map);
body.appendChild(img);

標準イベントの追加:

定義済み関数のバインド:

function imgClick() {
    alert('click');
}

body=document.getElementsByTagName('body')[0];
var img = document.createElement("IMG");
img.src='image.gif';
img.onclick=imgClick;
body.appendChild(img);

またはいわゆる無名関数によって：

img.onclick=function() {
    alert('click');
}
于 2012-11-08T14:07:01.650 に答える