イラストマップの作り方教えます！
イラストマップってなんだよ！！！
っていう人のために。
これです。
私がよくサービスをまとめるのに使ってる画像です。
これをJavascriptでいい感じのライブラリ見つけたので
リンク貼って移動できるようにしたいな～
と思ってちまちま進めてました。
作り方
ライブラリ
こちらを参考にしております(*´∀｀*)
まぁだいたいは↑に書いてるので
私の方でちょこっと変更加えた部分、かきますね♪
Nodeの追加
1つ1つ説明していくと
ここのsys.addEdgeでNodeを追加＆連結させていきます
sys.addNodeでURLを付与させていきます
↑のだとsys.addEdgeで
monacoin→monaparty
monaparty→monalogin
monaparty→monacardを繋げています
画像の追加
画像の追加
3行目からnode.nameを指定して
img.srcでURLを付与してます(*´∀｀*)
基本的に「他の通貨でイラストマップ作りたいぜ！」っていう人がいたら
上記2つ（画像用意してNode設定するだけ）でいいと思います。
つまり、sys.addNode,sys.addEdge,node.nameなどをポチポチして変えていくだけ。
クリック周り
ざっくり説明すると
oneclicked: function (e) {
でクリック時の挙動を設定してます（クリックでリンクを別タブで表示）
まぁ画像自体じゃなく座標に範囲指定されてるので
当たり判定がアレな所あるんですけど…。。
残りはドラッグ＆ドロップでぬるぬる移動するようになってます…。。
（よくわかってない）
（ほんとざっくり）
重力いじった
重力をいじるのです。。
以下のリファレンスみながらちょいちょいと微調整しただけなんですけどね。。
実際出来たときに中央に寄ってるなぁ～(近すぎてかぶってるとリンク飛びたいとき邪魔)と感じてたので
方方に散るようにいじりました。（あんま変わってないかも）
まぁこんなかんじでできましたよ。。
実際色んな人に手伝ってもらったので自分1人で出来た！！とは言えないんですけど
やってて楽しいですしこれありきでアイデンティティ確立してるとこもあるので続けていきます。。
自分のブログに入れたい！という方はHTMLで↓のを
入れてみてください。
（なんか問題あったら指摘してください…）
