ロールオーバー (マウスが当たると画像が入れ替わる) JavaScript
戻 る


プログラムの特徴
・ リンクを貼った画像にマウスを当てると画像が変わります。
・ 変わる画像を指定出来ます。
・ リンク先を指定出来ます。 リンクしない場合も使えます。
・ 画像のレイアウトは、タグやスタイルシートで指定して下さい。
設定方法
・ ソースファイル冒頭部分の下記の部分の数値で設定します。
// *********************** 入力1:画像の種類 ***********************
var prim  = " ../parts/wico1.gif  ";    // マウスが離れたときの画像
var secon = " ../parts/wico1d.gif ";    // マウスが上に来たときの画像
var adrs  = " # ";  // リンク先のアドレス、リンクしないときは「'#'」
// *****************************************************************
更新履歴
・03/04/13 ver 0.20 利用しやすくする為、内部構成を修正。
・03/03/25 ver 0.10 プレロードさせる。
・03/03/18 ver 0.00 初 公 開
使用画像
・ 画像は、sozai wing さんから借りました。
ソースファイル
・ 下記の部分をコピーアンドペーストして<body>〜</body> の間に置く。
・ この部分をタグやスタイルシートで挟み、お好みにレイアウトします。
<script type="text/javascript">
<!-- // roll_01 ver0.21  (ぱーぷりんの溜まり場)
// *********************** 入力1:画像の種類 ***********************
var prim  = " ../parts/wico1.gif  ";    // マウスが離れたときの画像
var secon = " ../parts/wico1d.gif ";    // マウスが上に来たときの画像
var adrs  = " # ";  // リンク先のアドレス、リンクしないときは「'#'」
// ******************************************************************

 on_img=new Image(); on_img.src=prim;
 of_img=new Image(); of_img.src=secon;

 document.write("<a href='"+adrs+"' onmouseout='document.irekae.src=prim;' "+
  "onmouseover='document.irekae.src=secon;'><img src='"+prim+"' border=0 name='irekae'></a>");
//-->
</script>