javascript: 2009年7月まとめ

• 参考
  getElementsByNameの罠 - メモス?(^o^)／
• CSS/HTML/JavaScript

案外簡単に取得できる。１行スクリプト。

サンプル

トグルスイッチ。スイッチですね。入れたり切ったり。onとoff。

• 参考
  トグルスイッチ（０と１、trueとfalseを切り替え）条件分岐

サンプル

行末の全角 or　半角のスペースを削除

今日一日はまった。。

関数を呼び出す形の場合、ie系（ie6、7、8）だとOnMouseOutとかOnClickが動かない。。よって関数を呼び出さない、下記の方法へ変更。

• imgタグには↓のようにnameを指定する。
  <img src="/img/menu00.jpg" usemap="#MC" name="MapChange" border="0" /></
  nameを指定しないとsafariなど一部ブラウザで動作しません。

↓この画像4つを今回は使用する。

実行サンプル

<script type="text/javascript">

function MapLoad() {
  Img01 = new Image();
  Img01.src = "/img/menu01.jpg";

  Img02 = new Image();
  Img02.src = "/img/menu02.jpg";

  Img03 = new Image();
  Img03.src = "/img/menu03.jpg";
//↑↑↑画像を事前に読み込む
}

</script>
<div onload="MapLoad()"><img src="/img/menu00.jpg" usemap="#MC" name="MapChange" border="0" /></div>
<map name="MC">
  <area onmouseover="MapChange.src='/img/menu01.jpg'" onmouseout="MapChange.src='/img/menu00.jpg'" shape="rect" coords="0,0,120,40" href="http://www.google.co.jp/" />
  <area onmouseover="MapChange.src='/img/menu02.jpg'" onmouseout="MapChange.src='/img/menu00.jpg'" shape="rect" coords="121,0,240,40" href="http://www.google.co.jp/" />
  <area onmouseover="MapChange.src='/img/menu03.jpg'" onmouseout="MapChange.src='/img/menu00.jpg'" shape="rect" coords="241,0,360,40" href="http://www.google.co.jp/" />
</map>

• 参考
  areamapとロールオーバー

ウィンドウとbodyタグの高さを取得するサンプル。ブラウザの大きさの変化に対応できるようにするためにメモ。

• innerHeight
  innerHeight - MDC

[javascript]bookmark 表示領域 サイズ取得

• ブラウザの表示領域のサイズを取得する方法。