「光の三原色」みたいな「三つの集合のベン図」を、作図し、クリッカブルマップにしたいのですが

三つの集合の重なり合いを表す、いわゆる「ベン図」
これをＷＥＢ上に作図する方法を、
さらには、
それを、クリッカブルマップにする方法を、
御存じの方、いらっしゃいませんでしょうか？

例として「光の三原色」の解説図を挙げます。これは、赤色、緑色、青色、イエロー(黄)色、シアン色、マゼンタ色、白色、という、７つの領域に分かれますが、それぞれの領域が、クリックで各々別の場所へリンクするような、クリッカブルマップです。

出来る方法が有れば、何でもお知らせ願いたいのですが、
もしも複数の方法が考えられたらば、
なるべく単純な（なるべく、特殊なソフトやアプリや開発環境を使わない）方法が希望です。
ＨＴＭＬ５＋ＣＳＳ３だけで出来れば最高なのですが・・・。
もっと色々な手段を駆使せねばダメでしょうかね・・・。
よろしくご教授お願い申し上げます。

www,web,html,css,html5,css3,javascript,プログラミング,図形,画像,開発

質問者からの補足コメント

• 質問者です。
  うっかり、「クリッカブルに対応させる」事の方ばかりに夢中になってました。
  
  そもそも
  この「ベン図」を「作図」する方の手段って、
  どうやればよいのでしょう？
  
  HTML5+CSS3で
  CANVASを用いて、円を三つ描くことまでは、簡単だと思いますが、
  円と円が重なった部分を、新たな領域と認識させて、そこだけ別の色を塗ったり
  する方法が思いつかないのですが………。

  No.2の回答に寄せられた補足コメントです。 補足日時：2015/06/09 10:24

No.3 ベストアンサー 回答者： ORUKA1951 回答日時： 2015/06/09 20:05

SVGを使うのが一般的でしょう。

ドロー系のソフトで、円を重ねて切り取っていけば良いです。
CANVASではなくて、SVG( https://ja.wikipedia.org/wiki/Scalable_Vector_Gr … )を使うほうが楽です。
　基本的なことなので、御存知だと思いますが二次元CG(コンピューターグラフィックス)には、大きく二つの種類があります。CADやIllustratorに代表されるドロー系(ベクター)と、ペイントやphotoshopで代表されるビットマップ系(ラスター)です。
　前者は、DXFとかこのSVG、後者はGIF,PING,JPEG。CANVASもjavascriptで作成されるビットマップです。
・ベクターイメージ( https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%AF … )
・ラスターイメージ( https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%B9 … )

このようなベン図を作成するドロー系の基本操作は次のようになります。
1) 任意の楕円なり曲線で囲まれた図を3つ作ります。
2) ずらしたり拡大･縮小して重ね合わせます。
3) そのすべてをいったんコピーしておきます。
4) 一番下の図形をその上の図形で切断します。
　多くのドロー系は、上の図形は消える
5) 分割された一方をさらにその上の図形で切断します。
6) コピーした図形を重ねあわして、同様な操作を繰り返します。
　ベクター/ドロー系のソフトを使い慣れているととても簡単な操作です。

例)
　⇒ゲームミュージックと生存確認をかねた画期的な: html5の埋込みsvgを使って自由な形のリンクを作る( http://defghi1977-onblog.blogspot.jp/2012/03/htm … )

wikimedia commonsにあるベン図とSVGのサンプル
File:Venn1110.svg - Wikimedia Commons( http://commons.wikimedia.org/wiki/File:Venn1110. … )

　この程度のベン図でしたら手でも書けますが、フリーソフトのInkscape( https://ja.wikipedia.org/wiki/Inkscape )を使うほうが楽でしょう。Incscapeはファイルの保存事態がSVGですから、そのままHTMLに貼り付ければよい。データ量はビットマップに比較して格段に小さくなるし、javascriptに依存しないし、どんなに拡大や縮小しても図はきれいなままです。

この回答へのお礼

おお！これはスゴそうですね！。
ご回答どうも有り難うございます。
なるほどSVGですか、
勉強してみる価値が有りそうですね。
ちょっと取り組んでみましょう。

お礼日時：2015/06/10 00:59

No.4 回答者： ORUKA1951 回答日時： 2015/06/10 08:45

No.3です。

Wikiに書かれている内容を抜粋すると
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
特徴
　XML で記述する為、ブラウザ上で閲覧でき、テキストエディタ等で編集することができる。また、ハイパーリンクを画像中に埋め込んだり、JavaScript 等と連携させることもできる。ベクターイメージであるため、ベクターデータによる画面表示では拡大や縮小をしても描写の劣化が起きない。
編集
　・・・【中略】・・・
　SVG ではそれ自身に回転・拡大・移動などの表現を定義しているため、単体で多様な表現をすることが可能である。
　従来のウェブサイトでは、いわゆるインタラクティブな双方性のある画面変化を伴う表示を JavaScript や FLASH を用いてきた。HTML/XHTML に SVG を組み合わせることにより、JavaScript や FLASH を導入せずとも同様の効果が発揮されることが期待される。
　XML なので、原理的には専用のアプリケーションを用いることなく通常の文章として作製・編集できる。
　・・・【中略】・・・拡大するとジャギーと呼ばれる文字外延部のギザギザが生じて見にくくなる点が解決されている。
・・・【中略】・・・
　更に、ベクターデータのみで表現した塗りつぶしでは色の重ね合わせが可能であり、塗りつぶしの透過度の指定により集合論で用いるベン図のような形を必要最低限度の色数で表現できる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Scalable Vector Graphics - Wikipedia( https://ja.wikipedia.org/wiki/Scalable_Vector_Gr … )］より

　ま、そう言うわけですから、
＞勉強してみる価値が有りそうですね。
　で良いでしょう。
　SVGのテキストは一見冗長ですが、そんなに難しくはありませんので、・・

この回答へのお礼

ご丁寧に解説いただき、感謝です。
基本的にテキストエディタでも編集可能
というところに
魅力というか、面白味を感じました。

お礼日時：2015/06/10 12:36

No.2 回答者： fujillin 回答日時： 2015/06/08 15:32

イメージマップを利用するなら、ご推察の通り、円だけではうまくいかないので、ポリラインで指定するしか方法がないように思います。

重なる対象が簡単な図形であれば、javascriptで位置を判定することで比較的容易に特定は可能です。
（ご質問の場合は、円内にあるかどうかを3回調べれば済むと思います）
ただし、スクリプトを利用すると、OFFにしているなどのユーザの場合は動作しないという欠点があります。（そう多くはないと思いますが…）

この回答へのお礼

ご回答、どうも有り難うございます。

やはり、ポリラインでの、”無理やり”な対応手段
になりますか。
強引な感じのする手段ですが、それが最適なのかもですね。

お礼日時：2015/06/09 10:16

No.1 回答者： keronjin 回答日時： 2015/06/05 23:13

FLASHで作ってActionScriptで部分的にリンクを貼ればどうでしょう。

イメージマップで検索するといろいろ作り方が出てきますよ。
ＨＴＭＬ系であればこれとか。
　＞　http://honttoni.blog74.fc2.com/blog-entry-173.html

この回答へのお礼

迅速な回答を、
有難うございます！。
実は、
HTML系でお知らせいただいたそのサイトは、
私も見ておりました。
ですが、
円と円が重なってできた弓状の円弧で囲まれた図形（うまい表現が無いのですが、イエロー、シアン、マゼンタ、ホワイト相当部分の図形）をどうしてよいか分からなかったのです。無理矢理な方法ですが、areaとしてpoly(polygon)多角形で近似的な図形領域を作って、当て嵌めるしかないかな~。FLASHとActionScriptの素養は今のところ有りませんので、こちらは要勉強ですね！。
どうもです。

お礼日時：2015/06/05 23:35