JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT

昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;

[indication]

昔はmapを頑張ったっけ

[gn_spawn]

これ骨でやりたい

[tarchan]

＞html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。

[trashtoy]

ラスタ画像にareaを組み合わせるパターンと比べると、表示がスケーラブルなのも良いよね。様々な画面サイズで適切な表示が可能（もしも閲覧端末がSVGに対応していればの話だけど）

[efcl]

SVGの図形をそのままクリッカブルに

[poppun1940]

2013-10-09 JavaScriptで変な形のクリック領域を作るとき、svgが便利 JavaScript プログラミング 昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかっ

[otchy210]

最近、Raphaël.js 使ってグラフ書いたときに、こんな感じのことをやった。そろそろ SVG 全面採用もありな時代なので、色々活用したいとか思っている。

[bleu-bleut]

どうやって県の形のデータをSVGで作ってる？

[kasumani]

JavaScriptで変な形のクリック領域を作るとき、svgが便利 昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 Tags: feedly

[ogatatsu]

Hit a Hintが効かないなぁと難癖付けてみる。

[ooiooiooi0313]

JavaScriptで変な形のクリック領域を作るとき、svgが便利 昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 Tags: via Po

[kunipon]

JavaScriptで変な形のクリック領域を作るとき、svgが便利 昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 Tags: feedly

[hidex7777]

mapで手作業で頑張ってたときの自分に教えてあげたい

[sometk]

おお、これはスゴい。コーエーさん、三国志や信長はこっちの方がしっくりくると思いますよ、採用してみては？！

[masapon49]

φ(｀д´)ﾒﾓﾒﾓ...

[nffsjj]

覚えておこう。

[norip44]

おととい、一瞬調べたやつ。HTML5って、いいよね。

[kijtra]

IE8以下の対応が悩ましい。

[yuta84q]

新潟市って政令指定都市だったんだ・・・。

[m_yanagisawa]

主題と関係ないが刈羽村って飛地なのか！検索して察した＞中通村

[sisidovski]

まなどっと

[indigoblau]

こんなことできるんか

[iku-sawa11]

え、あれって画像に埋め込まれてたの？

[kihan]

ふむ

[tmatsuu]

おー

[atotto]

これやろう

[pirosikick]

ほうほう

[blue_ebi]

ほうほう

[asuka0801]

mapで領域指定するのは時代遅れかぁ