マウスオーバー

クラス名img_dlを付与されていないimgタグの画像は、jQueryで右クリック及びドラッグ&ドロップを無効化します。クラス名img_dlを付与されたimgタグの画像のみ右クリック及びドラッグ&ドロップができます。

マウスオーバーでフェードして画像の透過度を50%にします。マウスアウトでフェードして元に戻します。CSSのみの記述とjQueryのみの記述、どちらでも同じ動きが実装できます。

ブロック要素にランダムで画像を表示、マウスオーバーで画像の表示領域を拡大します。また、ブロック要素には表示画像ごとにリンクを設定します。

ブロック要素をクリックでリンクの動作になります。htmlの構造上、aタグはテキストリンクでのみ使用し、aタグでブロック要素を囲むことはしていません。マウスオーバー時の動作はCSS、クリック時のリンクの動作はjQueryで実装します。

simplelib.jsは様々なプラグインを動的に読み込んで実行できます。そのプラグインの中で、マウスオーバーで画像をスクロール表示するtrimmedScrollのサンプルです。

マウスオーバーで画像内にキャプションを表示し、マウスアウトでキャプションを非表示する動作のサンプルです。jQueryのhoverメソッドを利用しています。キャプションの表示位置は自動計算のため、複数行のキャプションにも対応しています。