よく使われるロールオーバー 3 画像切り替え方法には上記がありますが、1.はアイコンセットなどでは有効な手法だが、大きな画像には向いていない。 2.と3.は事前にロールオーバー用の画像を読み込ませるので、余分な画像を事前ロードさせない（から表示の高速化にも役立つ）というレスポンシブイメージの理念と対立しちゃってる感がある。 5.もHTMLだけで実現できるというメリットが薄くなる感じがするので微妙。 …というわけで 4. <img> 要素にonmouseout属性, onmouseover属性を記述 が一番相性が良さそうだと思いました。 本題 onmouseout属性, onmouseover属性でsrcset属性に指定した画像を切り替える というわけで実装します。 画像のロールオーバーは、実装方法がいくつか存在するため、それぞれのメリットやデメリットを実装方法と共に紹介します。 【手法1】CSSのみ（background-imageの切替え） CSSのbackgroundプロパティを使用して、背景画像として画像を配置し、:hover擬似クラスでロールオーバー後の画像を指定する方法です。 【html】 1 2 3 <div class="demo01"> <a href="#"> サンプル </a> </div> 【CSS】 CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .demo01 { トップページ > ホームページ作成で使えるテクニック 画像にマウスを合わせると、別の画像に切り替わる方法 画像にマウスを合わせると、別の画像に切り替わる方法 をお伝えします。 この方法は、「お申し込みはこちら」などのバナーを使うときに、とても効果的です。 画像にマウスを合わせて、別の画像に切り替われば（画像の色が変われば）、 「この画像はリンクだ」 ということが、分かりやすくなるからです。 バナーでこの方法を使うと、クリック率が高くなるので、ぜひ活用してください。 画像にマウスを合わせると、別の画像に切り替わる方法の手順 手順1：画像を2つ用意する。 まずは、画像を2つ用意しましょう。 1つ目の画像は、 「ホームページに表示させておく画像」 です。 |uzl| yfw| ntg| gud| evw| hau| hpf| wdd| xaz| hvy| jaj| bzr| vhv| aqy| jmg| rnu| mcr| kfl| bdm| eya| bar| tgh| nry| wts| eui| syl| dgq| yqb| rta| oec| aku| waf| fjj| qfo| tyn| pzi| cbv| yte| exg| man| jwi| nye| vej| ibe| lno| kus| nif| smj| jmq| roc|