2011年9月アーカイブ

現在見ているページへのリンク画像を自動的に変更してくれるスクリプトを紹介します。

○○.jpg の場合、○○_cr.jpg に自動的に置換され表示されます。

http://www.kyosuke.jp/yugajs/

基本的にマウスオーバー時に画像を切り替えるためのスクリプトですが、様々な機能がついており、いらない機能を解除するには下記の URL をご参照ください。

http://blog.btmup.com/xhtml/yuga-js-rollover-self-link.html

http://javascript.webcreativepark.net/library/yuga


設定方法は下記の URL を参照してください。

 http://www.futomi.com/lecture/htaccess/htpasswd.html

 http://www.chama.ne.jp/access/

パスワードの暗号化も上記のページで可能です。

基本的には下記のように使います。

元ファイルダウンロード: http://www.chama.ne.jp/access/htaccess.lzh

 1. htaccess.txt の AuthUserFile の値をサーバー上の絶対パスに書き換える
    AuthUserFile フルパス/.htpasswd
    ※ PHP が実行できる環境であれば同フォルダ内の check.php を設置し
    ※ Web サーバーにアクセスすると絶対パスが表示される。

 2. htpasswd.txt にユーザー名とパスワードを記述する
    パスワードは暗号化して記述するため、上記のサイトで暗号化を行う

 3. FTP でファイル名を変更してアップロードする(ローカルで書き換えてから
   アップロードしても良い)
    下記のようにファイル名を変えてアップロードする
    ※ FTP ツールの設定によってはサーバー上のファイルが見えない場合がある
    ※ (.から始まるファイルは通常は表示されない)

    htaccess.txt ⇒ .htaccess
    htpasswd.txt ⇒ .htpasswd

 4. ファイルを設置した場所以下のフォルダにブラウザでアクセスする
    対象ファイル以下は認証が通らないとアクセスできないことを確認する

マウスオーバーで別の場所の画像をスワップさせる方法を 2 種類紹介します。

■ HTML 内に Swap させる画像を記述する方法

-- ヘッダー内 Start --

<SCRIPT language="JavaScript"><!--
function mySwapImgFile(mySwapImgURL){
   document.images["mySwapImgTarget"].src = mySwapImgURL;
}
// --></SCRIPT>

-- ヘッダー内 End--


-- マウスオーバー部分 Start --

    <ul id="nav" class="clearfix">
      <li><a href="#" onMouseOver="mySwapImgFile('top/images/main1.jpg')" onMouseOut="mySwapImgFile('top/images/main.jpg')"><img src="common/images/nav1_rollout.jpg" width="142" height="138" alt="" /></a></li>
      <li><a href="#" onMouseOver="mySwapImgFile('top/images/main2.jpg')" onMouseOut="mySwapImgFile('top/images/main.jpg')"><img src="common/images/nav2_rollout.jpg" width="142" height="149" alt=""/></a></li>
      <li><a href="#" onMouseOver="mySwapImgFile('top/images/main3.jpg')" onMouseOut="mySwapImgFile('top/images/main.jpg')"><img src="common/images/nav3_rollout.jpg" width="142" height="135" alt=""/></a></li>
      <li><a href="#" onMouseOver="mySwapImgFile('top/images/main4.jpg')" onMouseOut="mySwapImgFile('top/images/main.jpg')"><img src="common/images/nav4_rollout.jpg" width="147" height="147" alt=""/></a></li>
    </ul>

-- マウスオーバー部分 End --


-- Swap 部分 Start --

<img src="top/images/main.jpg" width="900" height="333" name="mySwapImgTarget" alt="メインイメージ" />

-- Swap 部分 End --


■ HTML 内に Swap させる画像を記述する方法

-- ヘッダー内 Start --

<script language="JavaScript">
<!--
image = new Array();
nImageLength = 5;
image[ 0 ] = new Image();
image[ 0 ].src = "top/images/main.jpg";
image[ 1 ] = new Image();
image[ 1 ].src = "top/images/main1.jpg";
image[ 2 ] = new Image();
image[ 2 ].src = "top/images/main2.jpg";
image[ 3 ] = new Image();
image[ 3 ].src = "top/images/main3.jpg";
image[ 4 ] = new Image();
image[ 4 ].src = "top/images/main4.jpg";
function Img(n){
  if(document.images){
      document.myImg.src=image[n].src;
  }
}

function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}

//-->
</script>


-- ヘッダー内 End--

-- マウスオーバー部分 Start --

    <ul id="nav" class="clearfix">
      <li><a href="#" onMouseOver="MM_callJS('Img( 1 )');" onMouseOut="MM_callJS('Img( 0 )');"><img src="common/images/nav1_rollout.jpg" width="142" height="138" alt="" /></a></li>
      <li><a href="#" onMouseOver="MM_callJS('Img( 2 )');" onMouseOut="MM_callJS('Img( 0 )');"><img src="common/images/nav2_rollout.jpg" width="142" height="149" alt=""/></a></li>
      <li><a href="#" onMouseOver="MM_callJS('Img( 3 )');" onMouseOut="MM_callJS('Img( 0 )');"><img src="common/images/nav3_rollout.jpg" width="142" height="135" alt=""/></a></li>
      <li><a href="#" onMouseOver="MM_callJS('Img( 4 )');" onMouseOut="MM_callJS('Img( 0 )');"><img src="common/images/nav4_rollout.jpg" width="147" height="147" alt=""/></a></li>
    </ul>

-- マウスオーバー部分 End --


-- Swap 部分 Start --

<img src="top/images/main.jpg" width="900" height="333" name="myImg" alt="メインイメージ" />

-- Swap 部分 End --


スクロールバーの色を指定するスタイルシートを紹介します。



このアーカイブについて

このページには、2011年9月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2011年8月です。

次のアーカイブは2011年10月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。