ホーム > タグ > rollover

rollover

[JS]サムネイルにマウスオーバーしたら画像を切り替える

大きい画像１箇所とサムネイルいくつか配置して、サムネイルにマウスオーバーしたら大きい画像をサムネイルのやつに変更するスクリプト。
派手なことはしてないのでカスタマイズはお好みで。


rollover sample

PLAIN TEXT
HTML:
  1. <div id="rollover">
  2.    <p><img src="rollover/01.jpg" id="rollover_view" alt="image1" width="415" height="295"></a></p>
  3.    <ul id="thumb">
  4.    <li><a href="#"><img src="rollover/01_thumb.jpg" alt="thumb1" width="150" height="45"></li>
  5.     <li><a href="#"><img src="rollover/02_thumb.jpg" alt="thumb2" width="150" height="45"></a></li>
  6.     <li><a href="#"><img src="rollover/03_thumb.jpg" alt="thumb3" width="150" height="45"></a></li>
  7.     <li><a href="#"><img src="rollover/04_thumb.jpg" alt="thumb4" width="150" height="45"></a></li>
  8.     <li><a href="#"><img src="rollover/05_thumb.jpg" alt="thumb5" width="150" height="45"></a></li>
  9.     <li><a href="#"><img src="rollover/06_thumb.jpg" alt="thumb6" width="150" height="45"></a></li>
  10.     </ul>
  11. </div>

thumbsというIDにあるimgタグを自動収集して、srcから_thumbを抜いたものを
viewに入ってるimgのsrcへ置換します。

PLAIN TEXT
JavaScript:
  1. /**
  2. * Simple Rollover[single]
  3. * @author Tenderfeel(tenderfeel@gmail.com)
  4. * @ver 1.0
  5. * @HOME http://tenderfeel.xsrv.jp/javascript/271/
  6. * @license The MIT License
  7. */
  8. window.onload =function(){
  9.     var myImg = document.getElementById("thumb").getElementsByTagName("img");
  10.     var regrep = "_thumb";
  11.     var newimg = new Array();
  12.     for (var i = 0; i <myImg.length; i++) {
  13.         newimg[i] = new Image();
  14.         newimg[i].src = myImg[i].src;
  15.         myImg[i].onmouseover =function() {
  16.             var href = this.src.replace(regrep,"");
  17.                 document.getElementById('rollover_view').src=href;
  18.         }
  19.     }
  20. }

Continue reading

[js]ロールオーバー＋見てるページのメニュー画像変更

メニュー画像をロールオーバーさせつつカレントページはon状態にするスクリプト。

見てるページのメニュースタイルを変更すると
ロールオーバースクリプト（画像名のOn/Offで判別）を足したソースです。
プリロードはついてません。

Continue reading

[JS]ロールオーバースクリプト（画像名のOn/Offで判別）

前の記事はオーバーの画像だけonを追加するものだったが、
この記事ではオーバーの画像にON、アウトの画像にOFFをつけて、ONとOFFの部分だけで判別する。

ページ内の画像でoffが付いてるもの全てロールオーバーさせる、ということも可能。

Continue reading

[JS]ロールオーバースクリプト（ソース変更なし）

ＨＴＭＬ側の変更なしで、メニュー内の画像を全部ロールオーバーさせるスクリプトを作ってみた。
relにしろclassにしろイベントハンドラにしろ、ロールオーバーさせるためだけに追加するのは嫌、という時に良いかも。

Continue reading

 Page 2 of 2 « 1  2 

Home > Tags > rollover

Scripts
カテゴリー
Recent Reactions
最近の投稿
最近の修正
  • そしてこのSQLはわれながらよく書いたと思う 2010-11-15
  • CSVの列っていう方がいいのかな…118項目だった 2010-11-15
  • 楽天のCSVの項目が116個もあった衝撃 2010-11-15
  • オフィスで香水臭振りまくのは迷惑だと知れ 2010-11-15
  • ぐあー　フレグランステロやー 2010-11-15
  • More updates...

Powered by Twitter Tools

Tag Cloud
おすすめサーバー・他

メタ情報

Return to page top