1

次のような円柱を Web ページに配置する必要があります。

http://imageshack.us/photo/my-images/33/cylinderl.png/

重なり合って表面に曲線を描く小さな画像で構成されています。それらのすべては、独自の href を持つアンカーに囲まれた異なる img タグを持つページ上の場所です。img の z-index プロパティは、それらを正しい方法でオーバーラップさせるために使用されます。シリンダーは動的に作成されるため、構成する必要があります。画像からわかるように、その面はさまざまな色を持つことができます。

私がする必要があるのは、すべての顔をクリック可能にし、それぞれが異なる URL を指すようにすることです。

もちろん、私の問題は、シリンダーにカーブがあることです。特に曲線の近くでは、クリックが正しい URL を指していることを確認する必要があります。ピクセル レベルで正確である必要はありませんが、少なくとも許容範囲内です。

シリンダーを構成する画像ごとに単一の領域を持つマップを使用しようとしましたが、仕様から見たように、もちろん機能しませんでした。そのような場合、DOM で最初に宣言されたマップのみが機能します.

これをJavascriptで解決しようと考えているのですが、簡単にはいかないと思うので、どなたかアドバイスいただけると嬉しいです。

ああ、これを解決するために HTML5 機能を使用することはできません。

4

3 に答える 3

1

やりがいのあるパズルを解くための古い技術の巧妙な適用。

私はあなたのために2つの方法を考えることができます。shape="poly"1 つは、円柱の上に透明な (長方形の) イメージを配置し、属性を使用して HTML イメージ マップを作成する方法です。mapリソースについては、HTML 要素とareaリファレンス (特にshape属性) を検索してください。多くの優れたチュートリアルがオンラインにあるはずです。現在ではあまり使われていませんが、90 年代後半には非常に人気がありました。

もう 1 つの方法は、JavaScript でイベント委任を使用して、イベント リスナーをプライマリ コンテナーにアタッチすることです。画像の「ピクセル」ごとに、それが含まれるシリンダーの適切な部分に CSS クラスを適用します。イベント ハンドラーでは、クリックされた画像のクラスに応じて異なる処理を実行できます。個々の「ピクセル」ごとにイベントを添付するための膨大なオーバーヘッド。JQuery では、これは次のようになります。

$("#cylinder").on("click", ".green", function() { location.href = "green_url"; }
$("#cylinder").on("click", ".red", function() { location.href = "red url"; }

class="green"緑のピクセルと赤のピクセルを配置するとclass="red"します。(これは象限法またはその他の手法で行うことができます。色は一例です)。

于 2013-01-29T17:39:00.887 に答える
0

あなたの幸運のSVG！https://developer.mozilla.org/en-US/docs/SVG/Tutorial
html dom 要素でこれを行うことはほとんど不可能です。CSS 互換のすべてのブラウザーで曲げる必要があります。
キャンバスもありますが、クリックを処理するのに苦労します.
SVG の唯一の問題は、IE8 未満ではサポートされておらず、IE8 ではほとんどサポートされていないことです。しかし、IE9 より前では、DOM 要素を曲げることもできません。

編集：
HTML5を使用できないことがわかったので、たとえばGD2で画像全体を生成し、ポイントをマッピングしようとすることが唯一のチャンスです。しかし、HTML5 を使用できない理由は何ですか?

于 2013-01-29T16:26:12.897 に答える
0

関数を介して javascript / canvas を使用して実行することもできgetImageData()ます。このキャンバス関数は、指定されたポイントの rgba 値になります。アルファ値を使用すると、マウスが正しい領域上にあるかどうか、または透明な領域で何も起こらないかどうかを確認できます。

また、この目的のために jquery プラグインも作成しました。多分それは役立つかもしれません。http://www.cw-internetdienste.de/pixelselection/

于 2013-02-02T16:13:16.303 に答える