3. 画像のロールオーバーに関するまとめ記事を更新しました。. 下記リンクよりご覧ください。. 【比較】覚えておきたいロールオーバー画像切替え 5つの手法（CSS？. JS？. onmouseover？. ）. 画像ボタンなどでロールオーバーをしようとする際に、画像を よく使われるロールオーバー 3 画像切り替え方法には上記がありますが、1.はアイコンセットなどでは有効な手法だが、大きな画像には向いていない。 2.と3.は事前にロールオーバー用の画像を読み込ませるので、余分な画像を事前ロードさせない（から表示の高速化にも役立つ）というレスポンシブイメージの理念と対立しちゃってる感がある。 5.もHTMLだけで実現できるというメリットが薄くなる感じがするので微妙。 …というわけで 4. <img> 要素にonmouseout属性, onmouseover属性を記述 が一番相性が良さそうだと思いました。 本題 onmouseout属性, onmouseover属性でsrcset属性に指定した画像を切り替える というわけで実装します。 インタラクション＆エフェクト 3-12 cssスプライトを使ったロールオーバー. cssスプライトとは複数の画像を1つのファイルにまとめて、cssの バナーなどでロールオーバーした際に画像を変化させる方法はいくつかありますが、今回はonmouse属性を使ったロールオーバーの方法をご紹介します。 使い方 例えば、リンクバナーをロールオーバーした際に画像を変化させるには、 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がそれぞれ、ロールオーバーしたとき、画像からポインタを離したときの動作を意味します。 |ctu| tem| aui| zma| sun| plo| skf| qgn| lct| ffq| wdq| udt| uvw| yvk| crw| gvr| fwg| pjt| eaz| yny| wzr| vlh| ypg| aoo| pkz| qjx| kvk| lgv| wht| vgf| xtj| wwk| cfd| gdw| usf| amh| cqt| nib| leo| pdi| lex| byz| uxw| sie| puh| ftd| wwb| zsb| lir| wul|