マウスオーバーで写真やテキストが入れかわる

getElementByIdメソッドを使用してマウスオーバーで写真やテキストを入れかえています。
表示させる画像以外はcssのdisplay:none;で消しています。

  • 2007年8月4日　花火の写真が撮りたくて淀川花火大会に行ってみたがいやはや花火は難しい。まず場所取りで早くも失敗２時間前では遅すぎとのこと。 写真を撮る人は午後１時頃から場所取りをしているらしい。 僕が行った頃にはもはや座る場所なし。
    ネットが邪魔で、地味に近いし･･･見るぶんには良かったけど、写真撮るには厳しい場所でした。でもせっかく撮ったし、見れそうなのだけ少しアップします。
  • 2007年8月4日　花火の写真が撮りたくて淀川花火大会に行ってみたがいやはや花火は難しい。まず場所取りで早くも失敗２時間前では遅すぎとのこと。 写真を撮る人は午後１時頃から場所取りをしているらしい。 僕が行った頃にはもはや座る場所なし。
    ネットが邪魔で、地味に近いし･･･見るぶんには良かったけど、写真撮るには厳しい場所でした。でもせっかく撮ったし、見れそうなのだけ少しアップします。
  • 近所を散歩してみました。意外にいろんな種類の花が咲いてるもんですね～。
    近所以外にも旅先でたまたま見つけた花や野菜もアップしています。
  • 姫路にある書写山に登り下山後、姫路城に行きました。
    姫路が庭だとかたる後輩に案内してもらいました。
  • うちのネコはリュックと申します。名前の由来はヒミツです。
  • 空の写真を集めました。
  • 映画・ラストサムライのロケ地になった書写山はものすごく壮大ででした。
  • 2008年8月16日　母方の実家、和田山に久しぶりに行きました。
    うちの田舎はずっと山奥にあるので、コンビニもスーパーもなければ、携帯電話の電波もありません。
    しかしここには沢山の自然がのこっており、空気も良いし苦手な虫がいっぱいいるけど、写真を撮るには最高の場所です。
JavaScript ▼
            function ImgBtn(_n) {
              document.getElementById("img").innerHTML = 
              document.getElementById("img" + _n).innerHTML;
              document.getElementById("text").innerHTML = 
              document.getElementById("text" + _n).innerHTML;
            }
HTML ▼
            <div id="mokujiBox">
              <ul class="mokujiImg">
                <li id="img"><a href="#"><img src="img_1.jpg" /></a></li>
                <li id="img0"><a href="#"><img src="img_1.jpg" /></a></li>
                <li id="img1"><a href="#"><img src="img_2.jpg" /></a></li>
              </ul>
              <ul id="mokuji">
                <li><img src="thumb_1.jpg" onmouseover="ImgBtn('0')"/></li>
                <li><img src="thumb_1.jpg" onmouseover="ImgBtn('1')"/></li>
                <li><img src="thumb_2.jpg" onmouseover="ImgBtn('2')"/><</li>
              </ul>
              <ul id="mokujiText">
                <li id="text">テキスト</li>
                <li id="text0">テキスト</li>
                <li id="text1">テキスト</li>
              </ul>
            </div>