図と表を同時にハイライトする

rails
  • 12/18, AM11:17 図もクリックできるように追記．

タグはrailsだけど，単にjavasctipt(prototype)+htmlの話．
表にある"term2"をクリックしたら，下の様に図と表をハイライトさせるようにする(term1, term3も同様に機能する)．

  • 図の準備．

角丸3つが書かれた図を用意します．以下をそれぞれ，baseimage.png，highlight.pngとして，$RAILS_DIR/public/images/ 以下に置きます．

(Railsの場合) Viewとして以下のrhtmlを用意します．上から3行目のjavascriptのロードとlink_to_functionがrailsに依存しているだけで，他の部分はrailsに依存していません．prototype.jsを適切に設定して，link_to_functionをonclickで動作するようにすれば動くはずです．

動作原理は，"selected_term"の所で予め画像のハイライト（緑の枠）を作っておいて，かつ，見えないようにdisplayをnoneにしておき，表の"term 2"をクリックしたら(link_to_function)，javascriptのtoggleHighlightに飛んで，displayの状態を入れ替える(Element.toggle)と，ハイライトされていなければ，表の背景を白に，ハイライトされていれば黄色にするようにして(if文)います．
図の方は，クリッカブルマップになっていて，図をクリックしたらハイライトの枠をtoggleしています．表をクリックした時と，図をクリックしたときに呼ばれる関数は同じものです．

  • 中抜きの枠の作成

中抜きの枠は，色々作り方があるかとは思いますが，ぶるじょあにillustrator の「複合パス」を利用して作成しました．
大きな四角を中に色を塗って作成し，同様に小さな枠を作って，重ねます．
両方を選択して，「複合パス」を選ぶと中抜きになります．

<html>
  <head>
    <%= javascript_include_tag :defaults %>
    <script language="javascript">
      <!--
        function toggleHighlight(imgid,rowid){
	  Element.toggle(imgid)
	  if($(imgid).style.display == 'none') {
            $(rowid).style.backgroundColor='white';
  	  } else {
            $(rowid).style.backgroundColor='yellow';
	  }
        }
      //-->
    </script>
  </head>
  <body>
    <div id="clickablemap" style="position: relative;">
      <img src="/images/baseimage.png" usemap="baseimagemap" border=0>
        <map name="baseimagemap">
	  <area shape="rect" coords="0,0,72,72" onclick="toggleHighlight('highlight_term1','content1'); return false;" href="#" alt="term1"/>
	  <area shape="rect" coords="95,65,167,160" onclick="toggleHighlight('highlight_term2','content2'); return false;" href="#" alt="term1"/>
	  <area shape="rect" coords="190,0,262,72" onclick="toggleHighlight('highlight_term3','content3'); return false;" href="#" alt="term1"/>
	</map>
      </img>
      <div id="selected_term">
        <div id="highlight_term1" style="position: absolute; left:-7px; top: -6px; width:72px; display:none; ">
	  <img src="/images/highlight.png" usemap="highlightmap1" border=0>
            <map name="highlightmap1">
  	      <area shape="rect" coords="0,0,72,72" onclick="toggleHighlight('highlight_term1','content1'); return false;" href="#" alt="term1"/>
	    </map>
	  </img>
        </div>
        <div id="highlight_term2" style="position: absolute; left:89px; top: 62px; width:72px; display:none; ">
	  <img src="/images/highlight.png" usemap="highlightmap2" border=0>
            <map name="highlightmap2">
  	      <area shape="rect" coords="0,0,72,72" onclick="toggleHighlight('highlight_term2','content2'); return false;" href="#" alt="term2"/>
	    </map>
	  </img>
        </div>
        <div id="highlight_term3" style="position: absolute; left:181px; top: -6px; width:72px; display:none; ">
	  <img src="/images/highlight.png" usemap="highlightmap3" border=0>
            <map name="highlightmap3">
  	      <area shape="rect" coords="0,0,72,72" onclick="toggleHighlight('highlight_term3','content3'); return false;" href="#" alt="term3"/>
	    </map>
	  </img>
        </div>
      </div>
    </div>
    <div id="termtable">
      <table border=1>
        <tr id="header">
          <td>id</td><td>name</td>
        </tr>
        <tr id="content1">
          <td>1</td><td><%= link_to_function "term 1", "toggleHighlight('highlight_term1','content1')"%></td>
        </tr>
        <tr id="content2">
          <td>2</td><td><%= link_to_function "term 2", "toggleHighlight('highlight_term2','content2')"%></td>
        </tr>
        <tr id="content3">
          <td>3</td><td><%= link_to_function "term 3", "toggleHighlight('highlight_term3','content3')"%></td>
        </tr>
      </table>
    </div>
  </body>
</html>