Javascript Patchworker - 画像が変化

このスクリプトについて
　「ロールオーバー」とは一般的にこの動作のことをさします。変更後に色違いの画像を用意しておくことで、a:hoverと似たような効果を与えられます。
　サンプルは用意しませんでしたが、このサイトでも上部のメニューにロールオーバーが使われています。

関連

対応ブラウザ
WIN IE 4.0～ NN 6.0～　MAC IE 4.0～ NN 6.0～

サンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>画像が変化</title>
<script type="text/javascript">
<!--
//ユーザが設定する変数----------------------------------
  //元来の画像配列
  orign_array = new Array();
  orign_array[0] = new Image(); orign_array[0].src = "icon1.gif";
  orign_array[1] = new Image(); orign_array[1].src = "icon2.gif";

//変更後の画像配列
  image_array = new Array();
  image_array[0] = new Image(); image_array[0].src = "icon2.gif";
  image_array[1] = new Image(); image_array[1].src = "icon1.gif";
//------------------------------------------------------

flag = new Array();
for (i=0; i<image_array.length; i++) { flag[i] = 0; }

ユーザ設定
　「元来の画像配列」には例にならって添え字（[　]内の数字）をひとつずつ増やしながら変更したい画像のURLをリストアップしてください。
　「変更後の画像配列」には、「元来の画像配列」に指定した画像に対応する画像を、同じ添え字の位置に指定してください。
　従って、これらの配列の個数が違う場合にはエラーとなってスクリプトは実行されません。
　image_change関数を呼び出す場合には、最初にその画像のIDを、その次に配列で指定したときの添え字を引数として渡してください。（例を参照）

JavaScriptのTOPに戻る　　

TOPに戻る