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;
複雑なヨーロッパの文化や国民性の違いをシンプルに説明してくれる地図
ラテン系の南ヨーロッパ、先進的な国の多い西ヨーロッパ、旧共産圏の東ヨーロッパなど一言でヨーロッパと言っても多種多様な文化があります。そんな複雑に入り込んだヨーロッパの文化や習性、国民性などをとてもわかりやすくまとめたヨーロッパの地図です。 1：幸福、 憂うつ、辛気臭い 2：クラシック、モダン 3：革命的、伝統的 4：晴れ、くもり 5：トマト、ポテト 6：ワイン、ビール、ウオッカ 7：オリーブオイル、バター 8：お茶、コーヒー 9：性的抑圧、感情的抑圧：フランスはともかくイタリアは意外と厳しいのです。 10：カトリック、プロテスタント、正教会 11：金持ち、貧乏 12：怠惰、勤勉 13：料理がうまい、料理がまずい 14：騒音レベル、うるさい、物静か 15：同性愛に寛容、同性愛嫌い 16：オールド・ヨーロッパ、ニュー・ヨーロッパ 17：一年間に21日働く、一年間で21日だけ人生を謳歌している
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
