[mootools] ロールオーバープラグイン

ロールオーバースクリプト(画像名のOn/Offで判別)マウスオーバーでリンク画像の透明度とか変更を足してクラスにしてみた。

指定エリア以下のaタグ拾ってマウスイベントでロールオーバーする。
画像名に指定した文字列があれば置換、なければ透過処理。
ロールオーバーさせない指定はclass名の有無(imgタグ内)で判断する。

“[mootools] ロールオーバープラグイン” の続きを読む

[js]ColorMeShop!Pro商品詳細用 ロールオーバースクリプト

ColorMeShop!Proの商品詳細ページの拡大画像表示について。
この記事はサムネイルにマウスオーバーしたら画像を切り替える方法を使用したメモです。
前にLightboxを使う方法を書いてますがどちらにするかはお好みで。
元エントリーのスクリプトを若干変えただけですが、XHMTL・CSS・Javascriptをまとめて貼っておきます



“ColorMeShop!Pro商品詳細用 ロールオーバースクリプト” の続きを読む

[jQuery]サムネイルクリックで画像変更(+effect)

前にmootools1.2で作ったのと似たものをjQueryでも書いたので晒します。
このスクリプトは画像切り替えだけです。

動作にはjQuery1.2.6が必要です。

“[jQuery]サムネイルクリックで画像変更(+effect)” の続きを読む

[JS]マウスオーバーでリンク画像の透明度とか変更

マウスオーバーの画像作るのメンドクセーと思ったときに、画像1枚でごまかせるから便利。
普通のロールオーバーよりも凝ったことも出来るので手抜きに見えない所が良いですw
難点はjavascriptオフで効果がなくなることですが、
javascriptを意識的にオフしてる人というのは限られてるので大丈夫だと思います。

prototype&script.aculo.us、jQuery、mootoolsでそれぞれ書いてみた。

“[JS]マウスオーバーでリンク画像の透明度とか変更” の続きを読む

[mootools]サムネイルクリックで画像とコメントを変更する

前に書いたサムネイルにマウスオーバーしたら画像を切り替える を、
mootools1.2使ってフェードインとかつけたサンプル。

注意※ソースはmootools1.2用なので1.1では多分動きません。

“[mootools]サムネイルクリックで画像とコメントを変更する” の続きを読む

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

大きい画像1箇所とサムネイルいくつか配置して、サムネイルにマウスオーバーしたら大きい画像をサムネイルのやつに変更するスクリプト。
テーブル版、複数設置版、クロスフェード版の他、jQuery版とMooTools版も書きました。

シンプル版


イベントリスナーを使用したもの

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

“[JS]サムネイルにマウスオーバーしたら画像を切り替える” の続きを読む

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

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

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


“ロールオーバー+見てるページのメニュー画像変更” の続きを読む

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

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

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

“[JS]ロールオーバースクリプト(画像名のOn/Offで判別)” の続きを読む

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

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

“[JS]ロールオーバースクリプト(ソース変更なし)” の続きを読む