WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
HTML5 / Canvas

HTML5 canvas Image Mapper

— アドオンWorldWideScripts.netへ

@ja1wws日付まで滞在するために私達のフィードを購読する!

新しい!あなたがそれを望むように私たちに従ってください!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

これは、Web 開発者のために設計されたHTMLのイメージマップです。

このツールは、HTML5のキャンバスを使用して開発されてきたので、その使用はキャンバスをサポートするブラウザに限定されているだけでなく、ファイルのAPI:

IE10 +、FF3.6 +、FF14-、FF18 +(FF15は、FF18に解決されるいくつかのキャンバス機能、バグ787623、との問題を抱えている)、Chrome6 +、Safari6 +、Opera11.1 +

これは開発者のためのツールですので、私は、ウェブ開発者が適切なブラウザを選択しても問題がないことを仮定しているため、私は、これは大きな制限はないと思われます。

私は、ツールを開発するためにFF14を使用しているので、これは最高の一品ですが、このツールは、Chrome22とOpera12でもテストされています


ライブプレビュー のリンクで見ることができるツールのバージョンは、ツールの機能限定版です。 このバージョンであなただけのホームページに記載されている画像の特定のセットを、ロードすることができます。 画像をロードした後、あなたは、すべての図形を描画することができますが、最初の6の形状は、HTMLコードに生成されます。 この制限は、ツールのすべての機能をテストすることを妨げるものではありません。


イメージマップとは何ですか?

イメージマップは、画像のユーザがクリック可能な異なる領域を作るHTMLコードです。 HTMLコードを使用すると、長方形、多角形と円形形状の領域を定義することを可能にするエリアタグと関連して、 マップの HTMLタグで構成されています。
あなたのHTMLページにimage1.pngイメージを持っている場合の例として、次のようなコードを記述することができます。

 <img src="image1.png" width="145" height="126" alt="map example" usemap="#image1map" /> <map name="image1map"> <area shape="rect" coords="0,0,82,126" href="area1.html" alt="area1"> <area shape="poly" coords="108, 145, 174, 71, 205, 139, 153, 192" href="area2.html" alt="area2"> <area shape="circle" coords="124,58,8" href="area3.html" alt="area3"> <area shape="default" href="http://default.html" alt = "the whole image"/> </map> 

あなたが見ることができるようにマップタグの name属性の値と同じ値を持つことになりますimgタグUSEMAP属性を設定する必要があります。 あなたが望むように、< マップ>と</地図>の間には、関連する画像上のユーザーのクリック可能な領域を表すそれぞれをなど、多くの<地域>タグを定義することができます。 RECT、ポリ円 :各領域は3つの値のいずれかを持つことができる形状属性を持っている必要があります。 矩形形状が完全に2点によって定義される、ポリ形状は、点列によって定義され、円形の形状は、中心を表す点、および半径によって定義されます。 すべてのポイントは座標のカップルによって定義され、画像の左上隅に親戚が、ピクセル単位で表します。 形状属性は、以前の形状のいずれかとマッピングされていない画像の部分を指す「デフォルト」の値を持つことができます。 「デフォルト」のため、あなたはマップの最初の形状として「デフォルト」の形状を定義した場合、それ以降のすべての図形を上書きします:形状がマップに定義された順序が非常に重要であることを、代わりに、考慮してください形状は画像全体を意味します。 あなたはより大きな形状に少し形状を定義することができますが、最初に少し形状、次に大きい方を定義する必要があります。これは、互いに重なり合う形状でも同様です。 2形状は画像の一部を共有する場合は、最初に定義された形状は、勝ちます。

手動でイメージマップを設定したい場合は、異なる形状を定義するために必要なすべての点の座標を知っている必要があります。 おそらくこれは円形または矩形領域を持っている場合は特に、あなたがマップするいくつかの領域を持っている場合は大きな問題ではありません。 しかし、あなたが多角形で、いくつかの領域を持っている場合は、それらを手動で設定することは簡単な作業ではありません。

画像マッパーツールを使用すると、イメージ・ユーザー・クリック可能な領域を作る対応するHTMLコードに自動的に変換されますように選択した画像上の矩形ポリなどの図形を描画することができます。

与えられた画像の上に図形を描画した後、あなたは、単にボタンをクリックし、コードをテキストエリアにdisplayiedされるHTMLコードを生成することができます。 あなたは、HTMLコードをコピーして、HTMLページ(複数可)で使用することができます。 また、逆のプロセスを実行することができます。テキストエリアのHTMLコードを貼り付け、あなたが単にボタンをクリックし、このコードをロードすることができます。 これは、画像上の図形に変換され、あなたは、それらを変更、新しい図形を追加し、HTMLコードを再生成することができます。 この反転機構では、部分的なマッピング処理を保存し、後で画像をマッピングするために継続することを可能にするのに便利です。 テキストエリア内のコードを生成した後、あなたはその場でテキストエリアの座標を変更することができますし、それを再ロードします。それは、「手動」形状設計/ポジショニング絞り込むことも有用です。

主な特長:

  • あなたは、ローカルまたはリモートの画像を選択することができます
  • あなたは、対象画像のサイズを設定することができます。これらの画像は、あなたのHTMLページにありますサイズです
  • あなたは、任意の瞬間の画像にズームイン、ズームアウトすることができ、これは画像のみのターゲットサイズに依存する、生成される実際の座標とは干渉しません。 ズーム機能は、図形を描画するためにあなたを助けるためにのみ有用です。
  • あなたは、このような「HREF」属性、「ALT」属性、「ID」と「クラス」属性、最後に「ターゲット」属性と各形状のためのいくつかのパラメータを設定することができます。 シェイプを選択する必要があり、パラメータを設定するには:あなたは、ツールバーの左上の矢印を選択し、形状をクリックする必要があり図形を選択します。
  • マップ「名前」、デフォルトのURLとターゲット:あなたはマップのいくつかのパラメータを設定することができます。
  • あなたは、ツールバーの形状を選択図形を描くことができます。
  • 図形を描画するには、ツールバーからを選択した後、あなたは単にあなたが形状を開始したい画像上のマウスでクリックすることができます。
  • 形状が円である場合は、firts点が中心である:(クリックまたは解放)マウスを動かし、カーソルをたどる円を見ることができます。 再びマウスをクリックすると、円を描く停止します。
  • 形状が矩形である場合。 最初のポイントは、コーナーの一つです。 (クリックまたは解放)は、マウスを移動すると、矩形を描画します。 再びマウスをクリックすると、描画を停止します。
  • 形状は、プロセスが少し異なっているポリの場合:マウスをクリックするたびにポイントを設定します。 現在のポイントは常に常にポリ閉じた形状を作り、モミ1に接続されています。 ポリを描画するために停止するために、マウスをダブルクリックする必要があります(最後のポイントを設定します)。
  • すべての形状のために、あなたはまた、彼らは「停止」ボタン(ツールバーの左上の矢印)をクリックして描画するために停止することができます。
  • あなたは、画像の上に移動すると、マウス座標を見ることができます。
  • あなたが境界線を使用することができますので、それは、画像の一部であったように、画像のエッジ座標を決定するために、画像の周りにグレーの破線の境界線を使用することができますので、シェイプの描画中に境界線をクリックすることができ、ジュースをそれとして画像の一部でした。 たとえば、境界線の左上隅をクリックすると、あなたはポイントを設定します(0、0)座標。 あなたは左の境界線をクリックすると、任意の時点で、あなたは(0、y)の座標などでポイントを設定します
  • あなたは既に描かれた図形を選択し、変更/サイズ変更/削除することができます。 ツールバーに「ゴム」を使用する必要があり、それを削除するには、それは断った鉛筆は、形状のみを選択すると表示されます。
  • あなたは(これは、設計ツールではありませんので、私は色の数が限られているし、また、各形状ごとに異なる​​色を選択することはできません)5色のセットから形状の輪郭の色を選択することができます。
  • 、あなたは画像に描かれたいくつかの形状を有している場合は、テキストエリアにHTMLコードが表示されます:あなたは、ツールバーの「停止」ボタンを選択して、何の形状が選択されていない場合にのみ、それが表示され、「マップ」ボタンをクリックすることができますあなたはまだあなたが空のテキストエリアが表示された形状を描画されていないが、次のことができ、過去、その中にいくつかのHTMLコードを、それをロードする場合。
  • (あなただけの「マップ」ボタンをクリックした後に見ることができる)「ロード」ボタンをクリックし、テキストエリア内のHTMLコード存在は、画像上の図形に変換されます。

:あなたは、次のリンクツールの完全なマニュアルを参照してくださいすることができますオンラインマニュアル

ご質問があれば、単にコメントを残したり、私にメールをドロップ!


ダウンロードしてください
このカテゴリー内の他のコンポーネントこの著者のすべてのコンポーネント
コメントよくある質問と回答を求めた

プロパティ

作成:
10月10日12

最終更新:
N / A

高解像度:
ノー

推奨ブラウザ:
Firefoxの、オペラ、クローム

含まれるファイル:
JavaScriptのJS、HTML、CSS

ソフトウェアバージョン:
HTML5

キーワード

eコマース, eコマース, 全商品, アプリ, エリア, キャンバス, サークル, 座標, HTML5, 画像, マップ, マッパー, ポリ, RECT, 形状, ターゲット, ツール, ズーム