2012-03-17 1 views
2

基本的に、色分けされたマップには5つの異なる領域があります。それらはすべて長方形で、不連続で、永遠にイメージマップを作成するのにかかるでしょう。ばかばかしいイメージマップを作成するのではなく、色をクリックできるようにする方法があるのだろうかと思います。色を別々の画像に分割するなどのトリッキーは、解決策につながる場合は問題にはなりません。Javascript:イメージの色をリンクにしますか?

また、私は、画像をアップロードすると思いますが、それは2.1メガバイト

+0

私の唯一の提案は、あなたがsvg形式でイメージを取得し、いくつかのキャンバス/ svgトリッキーを使用できるかどうかを確認することです。 – jondavidjohn

+0

ちょうどjondavidjohnが言ったように。非常に良いSVGライブラリhttp://raphaeljs.com/を試すこともできます。あなたがやろうとしていることはまったく簡単ではないことに気付かせてください。 – freakish

+0

とにかく、私はJavaScript(または何か)が各ピクセルの色を得ることができますか?私は、JSやPHPの形を理解し、私のためのイメージマップを作ることができます... SVGの外観は、更新されたイメージマップのようです。 –

答えて

1

<canvas>に画像をレンダリングしてみます。キャンバスにクリックハンドラを追加し、クリックしたピクセルのカラー値を読み込みます。どの色がどの論理領域に対応しているかを知っていれば、あなた自身で解決策を得ることができます。

画像に純粋な単色がない場合は、クリックしたピクセルの周囲の小さな領域で平均値を取得する必要があります。

+1

私の知る限り、このソリューションはIE(Canvasからデータを取得することは実装されていません)では動作しません。代わりに、AJAX経由でマウス座標を送信し、サーバーがこれを処理できるようにすることもできます。 – freakish

+0

キャンバスは良いアイデアかもしれません。マウスの座標を使用する場合は、イメージマップを作成することもできます。私は上司によってこれを実行し、最善の行動が何であるかを見なければならないでしょう。 –

関連する問題