イメージを交換することをSwap Imageといいます。

今回はテキストにマウスが乗ったら画像を差し替えるスクリプトを書いてみました。

サンプル

• スクリーンショット01
• スクリーンショット02
• スクリーンショット03
• スクリーンショット04
• スクリーンショット05
• スクリーンショット06
• スクリーンショット07
• スクリーンショット08
• スクリーンショット09
• スクリーンショット10

当ホームページに記載されている会社名・製品名・システム名などは、各社の登録商標、もしくは商標です。
Copyright (C) 2002-2008 SQUARE ENIX CO., LTD. All Rights Reserved.

HTML構造

javascript:void(0);はリンクを無効にするためのものです。

<img id="swapimage" src="image/swapimage/ss08m.jpg" alt="swapimage" width="300" height="224" />
<ul id="swaplist">
  <li><a href="javascript:void(0);" onmouseover="mouseover('swapimage','image/swapimage/ss01m.jpg')">スクリーンショット01</a></li>
  <li><a href="javascript:void(0);" onmouseover="mouseover('swapimage','image/swapimage/ss02m.jpg')">スクリーンショット02</a></li>
  <li><a href="javascript:void(0);" onmouseover="mouseover('swapimage','image/swapimage/ss03m.jpg')">スクリーンショット03</a></li>
  <li><a href="javascript:void(0);" onmouseover="mouseover('swapimage','image/swapimage/ss04m.jpg')">スクリーンショット04</a></li>
  <li><a href="javascript:void(0);" onmouseover="mouseover('swapimage','image/swapimage/ss05m.jpg')">スクリーンショット05</a></li>
  <li><a href="javascript:void(0);" onmouseover="mouseover('swapimage','image/swapimage/ss06m.jpg')">スクリーンショット06</a></li>
  <li><a href="javascript:void(0);" onmouseover="mouseover('swapimage','image/swapimage/ss07m.jpg')">スクリーンショット07</a></li>
  <li><a href="javascript:void(0);" onmouseover="mouseover('swapimage','image/swapimage/ss08m.jpg')">スクリーンショット08</a></li>
  <li><a href="javascript:void(0);" onmouseover="mouseover('swapimage','image/swapimage/ss09m.jpg')">スクリーンショット09</a></li>
  <li><a href="javascript:void(0);" onmouseover="mouseover('swapimage','image/swapimage/ss10m.jpg')">スクリーンショット10</a></li>
</ul>

CSS

img#swapimage {
  float: left;
  margin: 0 10px 10px 0;
}
ul#swaplist {
  list-style: none;
  list-style-position: outside;
  margin: 0;
  padding: 0;
}
ul#swaplist li {
  margin: 0 0 0 310px;
  padding: 0;
  cursor: pointer;
}
ul#swaplist li a {
  display: block;
  height: 20px;
  line-height: 20px;
  margin: 0;
  padding: 0 0 0 12px;
  border-top: 1px solid #eee;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  border-left: 1px solid #eee;
  color: #222;
  text-decoration: none;
}
ul#swaplist li a:hover {
  background-color: #eee;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

Javascript

最初swapimageという関数名にしたのですが、swapimageという名前だとなぜかsafariだけ反応しませんでした。
名前を変えただけで動作するようになったので予約語にでもなっているのかもしれません。

function mouseover(id, src) {
  var target = document.getElementById(id);
  target.src = src;
}