2011-07-20 13 views
0

添付画像を考慮して、各「セル」(言い換えれば)にDOM要素を重ねてクリックしたり、背景を設定したり。画像の上に多くの要素を配置してインタラクティブ性を持たせる最も良い方法

テーブルを作って少し調整してみましたが、Firefox用にしました。私は他のブラウザを開き、Firefoxの細かいチューニングはそれらには適用されませんでした。

どうすればよいですか?可能な限り位置付けに誤差がほとんどないように、画像内のセルに重ねてクリック可能でなければならない465個のセルがあります。

EDIT:
はここJSFiddleです:http://jsfiddle.net/Francisc/PUPHz/embedded/result/

は、これは、テーブルには、さまざまなブラウザでどのように見えるかです:
http://89.45.196.35/~francisc/chrome.jpg
http://89.45.196.35/~francisc/firefox.jpg
http://89.45.196.35/~francisc/ie.jpg

ありがとうございました。 enter image description here

+0

を役に立てば幸い - –

+0

調整を使用して作られています...多分あなたのコードに簡単なクロスブラウザの調整がある:n番目の子TRにと子供のために少し高さを微調整する。 – Francisc

+0

@Francisc、どうかやってみてください。何が間違っているのか分かりません。 –

答えて

0

これは私がやることですが、これは面倒ですが、うまくいく可能性があります。左上に1つのdivをフィットさせ、最高の幅と高さを見つけてください(あなたが試したテーブルからそれを知っていると推測します)

イメージをdivsの下に置く必要があります。オーバーレイ(overlay)属性などを与えます(それは何を呼び出すことができないか)。そのことを念頭に置いて、各divの幅をwidth:XXpx height:XXpx float:leftとする必要があります。そこから:hoverクラスを使って背景を変更し、必要に応じて選択したクラスを作ることができます。

は何をFirefoxで行われた調整を示すためにjsfiddleを作ってください、それは