[
板情報
|
カテゴリランキング
]
したらばTOP
■掲示板に戻る■
全部
1-100
最新50
|
メール
|
1-
101-
201-
301-
401-
501-
601-
701-
801-
901-
1001-
1101-
1201-
1301-
1401-
1501-
1601-
1701-
1801-
この機能を使うにはJavaScriptを有効にしてください
|
ADSL
1772
:
とはずがたり
:2020/09/11(金) 10:51:15
何度やってもおぼわらん
CSSは必要なし! onmouse属性を使った簡単なロールオーバーの作り方
https://html-coding.co.jp/knowhow/tips/000302/
2011年05月20日
使い方
例えば、リンクバナーをロールオーバーした際に画像を変化させるには、
1
<a href="./link.html">
2
<img src="img/banner.jpg" onmouseover="this.src='img/banner_over.jpg'" onmouseout="this.src='img/banner.jpg'" />
3
</a>
上記のように記述します。
onmouseover、onmouseoutがそれぞれ、ロールオーバーしたとき、画像からポインタを離したときの動作を意味します。thisとは、「このイベントが発生した場所」を意味します。つまり、「onmouseover=”this.src=’img/banner_over.jpg'”」という記述なら、「ロールオーバーした際に、この場所の画像をbanner_over.jpgに置き換える」という意味となります。
このonmouse属性を使ったロールオーバーが他の方法と違う点は、inputタグなど、通常ではロールオーバーが難しいタグに対してもロールオーバーが適用できるという点です。
例えば、タイプが画像のinputタグをロールオーバーさせる場合は、
1
<input type="image" name="test" src="./img/banner.jpg" onmouseover="this.src='img/banner_over.jpg'" onmouseout="this.src='img/banner.jpg'" />
上記のように記述します。
新着レスの表示
名前:
E-mail
(省略可)
:
※書き込む際の注意事項は
こちら
※画像アップローダーは
こちら
(画像を表示できるのは「画像リンクのサムネイル表示」がオンの掲示板に限ります)
スマートフォン版
掲示板管理者へ連絡
無料レンタル掲示板