0
私はJadeとNodeJSの新機能です。私はdivタグでjpegを読み込むシンプルなWebページを持っています。私は、次のhtmlとJSで応答可能なイメージマップを持つことができるようにしたいが、それを動作させることはできない。jadeテンプレート言語で動作するwindow.onload関数の入手方法
<div style="width:100%;">
<img id="img_ID" src="http://pindragon.social/images/landing.jpeg" usemap="#map" border="0" width="100%" alt="" />
window.onload = function() {
var ImageMap = function (map, img) {
var n,
areas = map.getElementsByTagName('area'),
len = areas.length,
coords = [],
previousWidth = 128;
for (n = 0; n < len; n++) {
coords[n] = areas[n].coords.split(',');
}
this.resize = function() {
var n, m, clen,
x = img.offsetWidth/previousWidth;
for (n = 0; n < len; n++) {
clen = coords[n].length;
for (m = 0; m < clen; m++) {
coords[n][m] *= x;
}
areas[n].coords = coords[n].join(',');
}
previousWidth = document.body.clientWidth;
return true;
};
window.onresize = this.resize;
},
imageMap = new ImageMap(document.getElementById('map_ID'), document.getElementById('img_ID'));
imageMap.resize();
return;
}
もう少し詳細を教えてください。 Pug関連の質問では、私は通常、少なくともいくつかのPugコードを期待しています。テンプレートの2番目のスニペットにリストするスクリプトをどのように含めるのですか？たぶん、あなたがPugをまったく使っている理由を動かすかもしれません - 私がここで見ることができるものから、Pugを直接必要とするものはありません。最後に、スクリプトが呼び出されていないことを期待している通り、正確には動作しません。それとも、呼び出されていますが、予期しない動作をしていますか？ – gandreadis
それは私が誰かが適切にそれを含める方法の例を与えることを求めていることです。翡翠の新しいユーザーとして、私はそれがPug evenとも呼ばれているとは考えていませんでした。それはどこに 'head'の下のlayout.jadeに含まれていますか？新しいユーザーとしては、拡張子がまだ '.jade'なので、信じられないほど悪い名前の 'Pug'のように思えます。上記のコードをhttp://jsfiddle.net/で読み込んで動作させることはできますが、それを得ることはできませんPugを使って作業する！スペースやタブの要件が非常に脆弱であると私は付け加えます。 – bhartsb
「スクリプト」という要件。先行スペースがない場合は、新しいユーザーを引き上げるのにも最適です。 – bhartsb