web-dev-qa-db-ja.com

CSS / HTMLを使ったホバーでの画像の変更

マウスを置いたときに別の画像を表示するように画像を設定した場合、この問題が発生しますが、最初の画像は表示されたまま新しい画像は高さと幅を変えずに他の画像と重なります。私はまだHTML/CSSにかなり慣れていないので、私は簡単なことを逃したかもしれません。これがコードです：

<img src="LibraryTransparent.png" id="Library">

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}
htmlcssimagehover
72
user2704743

1つの解決策は、このように背景画像として最初の画像も使用することです。

<div id="Library"></div>

#Library {
   background-image: url('LibraryTransparent.png');
   height: 70px;
   width: 120px;
}

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}

オーバーイメージのサイズが異なる場合は、次のように設定する必要があります。

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
   width: [IMAGE_WIDTH_IN_PIXELS]px;
   height: [IMAGE_HEIGHT_IN_PIXELS]px;
}
81
Aurelio De Rosa

もう1つの選択肢はJSを使用することです。

<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />
94
kurdtpage

私が普段行うことは、両方の状態を持つ二重画像を作成し、元の要素の背景として使用するような2フレームのフィルムのように振る舞うことです。画像の半分だけです。それからホバー状態が定義するものは基本的に「他のフレームを示すためにフィルムを動かす」ことです。

たとえば、イメージをグレーのTuxにする必要があるとします。ホバーするとカラフルなTuxに変更する必要があります。そして、「ホスティング」要素は、ID「tuxie」を持つスパンです。

  1. カラーとグレーの2つのTuxで50 x 25の画像を作成します。
  2. 次に、25 x 25のスパンの背景として画像を割り当てます。
  3. そして最後に、背景を25pxだけ左に移動するようにホバーを設定します。

最小のコード

<style>
    #tuxie {
        width: 25px; height: 25px;
        background: url('images/tuxie.png') no-repeat left top;
    }
    #tuxie:hover { background-position: -25px 0px }
</style>

<div id="tuxie" />

そしてイメージ：

Two-frame Tuxie "film"

利点は次のとおりです。

  • 両方のフレームを1つのファイルに入れることで、それらが一度に読み込まれるようになります。他のフレームがすぐにロードされない場合、これは遅い接続での醜いグリッチを回避するので、最初のホバーは正しく動作しません。

  • 「ペア」フレームは混同されないので、この方法で画像を管理する方が簡単かもしれません。

  • JavascriptまたはCSSセレクタを賢く使用すれば、これを拡張して1つのファイルにさらに多くのフレームを含めることができます。

    理論的には、複数のボタンを1つのファイルにまとめて座標で表示を制御することもできますが、そのような方法では手に負えない可能性があります。

これはbackgroundCSSプロパティを使用して構築されているため、<img />sと共に使用する必要がある場合は、背景と重なるのでsrcname__プロパティをnot設定する必要があります。 （ここでの透明度の賢い使用は面白い結果をもたらすかもしれないと思うようになるが、おそらくエンジンの品質と同様に画像の品質に非常に依存する。）.

50
Alois Mahdal

contentを使う：

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    content: url('http://www.furrytalk.com/wp-content/uploads/2010/05/2.jpg');
    height: 70px;
    width: 120px;
}

JSFiddle

32
Vucko

これまでのすべての答えの問題点は、ホバー画像がページにロードされていないため、ブラウザから呼び出すとロードに時間がかかり、全体的に見栄えがよくないことです。

元の画像とホバー画像を1つの要素に入れて、最初にホバー画像を非表示にすることです。次に、ホバーイン時にホバー画像を表示して古い画像を非表示にし、ホバーアウト時にはその逆を行います。

HTML：

<span id="bellLogo" onmouseover="hvr(this, 'in')" onmouseleave="hvr(this, 'out')">
  <img src="stylesheets/images/bell.png" class=bell col="g">
  <img src="stylesheets/images/bell_hover.png" class=bell style="display:none" col="b">
</span>

JavaScript/jQuery：

function hvr(dom, action)
{
    if (action == 'in')
    {
        $(dom).find("[col=g]").css("display", "none");
        $(dom).find("[col=b]").css("display", "inline-block");
    }

    else
    {
        $(dom).find("[col=b]").css("display", "none");
        $(dom).find("[col=g]").css("display", "inline-block");
    }
}

これが私にとって最も簡単で効率的な方法です。

5
Y2H
.hover_image:hover {text-decoration: none} /* Optional (avoid undesired underscore if a is used as wrapper) */
.hide {display:none}
/* Do the shift: */
.hover_image:hover img:first-child{display:none}
.hover_image:hover img:last-child{display:inline-block}
<body> 
    <a class="hover_image" href="#">
        <!-- path/to/first/visible/image: -->
        <img src="http://farmacias.dariopm.com/cc2/_cc3/images/f1_silverstone_2016.jpg" />
        <!-- path/to/hover/visible/image: -->
        <img src="http://farmacias.dariopm.com/cc2/_cc3/images/f1_malasia_2016.jpg" class="hide" />
    </a>
</body>

このRashidの良い答えを改善することを試みるために私はいくつかのコメントを加えています：

交換する画像のラッパー（今回は 'a'タグですが、別のもの）をトリックするので、 'hover_image'クラスがそこに配置されています。

利点：

  • 両方の画像を同じ場所にまとめておくと、変更が必要になった場合に役立ちます。

  • 古いナビゲーターでも動作するようです（CSS 2規格）。

  • 一目瞭然です。

  • ホバーイメージがプリロードされています（ホバー後の遅延なし）。

4
Darío Pm

背景画像をコンテナーdivに変更することなく、HTML IMGの画像を置き換えることができます。

これはCSSプロパティbox-sizing: border-box;を使用して取得されます（これはある種のホバー効果を<IMG>に非常に効率的に適用する可能性を与えます）。

これを行うには、画像に次のようなクラスを適用します。

.image-replacement {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://akamaicovers.oreilly.com/images/9780596517748/cat.gif) no-repeat;/* this image will be shown over the image iSRC */
  width: 180px;
  height: 236px;
  padding-left: 180px;
}

サンプルコード： http://codepen.io/chriscoyier/pen/cJEjs

元の記事： http://css-tricks.com/replace-the-image-in-an-img-with-css/

これが、「ホバー」効果を持つ画像を取得するためにdivを入れたくないというあなたたちの何人かに役立つことを願っています。

ここにサンプルコードを投稿する：

HTML：

<img id="myImage" src="images/photo1.png" class="ClassBeforeImage-replacement">

jQuery：

$("#myImage").mouseover(function () {
    $(this).attr("class", "image-replacement");
});
$("#myImage").mouseout(function () {
    $(this).attr("class", "ClassBeforeImage-replacement");
});
4
Nishanth Shaan

CSSを使用して画像のSRC属性を変更することはできません（ブラウザでサポートされていない限り）。あなたはホバーイベントとjQueryを使用することができます。

$("#Library ").hover(
    function () {
         $(this).attr("src","isHover.jpg");
    },
    function () {
        $(this).attr("src","notHover.jpg");
    }
);
3
Asaf

imgタグをdivに変更し、CSSの背景にします。

1
Jacques ジャック
.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}
<body> 
    <a class="foo" href="#">
        <img src="http://lojanak.com/image/9/280/280/1/0" />
        <img src="http://lojanak.com/image/0/280/280/1/0" />
    </a>
</body>
1
Rashid

これをチェック フィドル

私はあなたの場合イメージパスが間違っているかもしれないと思います

構文は正しく見えます

background-image:url('http://www.bluecowcreative.ca/wp-content/uploads/2013/08/hi.jpg');
1
Vignesh Subramanian

私のjqueryソリューション.

function changeOverImage(element) {
        var url = $(element).prop('src'),
            url_over = $(element).data('change-over')
        ;

        $(element)
            .prop('src', url_over)
            .data('change-over', url)
        ;
    }
    $(document).delegate('img[data-change-over]', 'mouseover', function () {
        changeOverImage(this);
    });
    $(document).delegate('img[data-change-over]', 'mouseout', function () {
        changeOverImage(this);
    });

とHTML

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20original%20/%3E&w=342&h=300" data-change-over="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20over%20/%3E&w=342&h=300" />

デモ： JSFiddleデモ

よろしく

1
iBet7o

それらの1つを試してください

<img src='images/icons/proceed_button.png' width='120' height='70' onmouseover="this.src='images/icons/proceed_button2.png';" onmouseout="this.src='images/icons/proceed_button.png';" />

またはフォームのボタンとして画像を使用している場合

<input type="image" id="proceed" src="images/icons/proceed_button.png" alt"Go to Facebook page" onMouseOver="fnover();"onMouseOut="fnout();" onclick="fnclick()">
function fnover()
        {
            var myimg2 = document.getElementById("proceed");
            myimg2.src = "images/icons/proceed_button2.png";
        }

        function fnout()
        {
            var myimg2 = document.getElementById("proceed");
            myimg2.src = "images/icons/proceed_button.png";
        }
1
Adiii

私がお勧めするのは可能ならCSSだけを使うことです。私の解決策は次のようになります。

HTML：

<img id="img" class="" src="" />

CSS：

img#img{
    background: url("pictureNumberOne.png");
    background-size: 100px 100px;
    /* Optional transition: */
    transition: background 0.25s ease-in-out;
}
img#img:hover{
    background: url("pictureNumberTwo.png");
    background-size: 100px 100px;
}

これは（src属性を定義していない）透明な画像（あるいは透明な部分を持つ画像）が正しく表示されることを保証します最初の写真の一部）。

background-size 属性は、background-imageの高さと幅を設定するために使用されます。

何らかの理由で画像のbg-imageを変更したくない場合は、次のようにdiv-containerに画像を配置することもできます。

HTML：

<div id="imgContainer" class="">
    <img id="" class="" src="" />
</div>

... 等々。

0
T.Meyer

すべての人がbackground-imageオプションを使用して回答すると、1つの属性が欠けています。高さと幅は画像のコンテナサイズを設定しますが、画像自体のサイズは変更しません。 background-sizeは、このコンテナに合うように画像を圧縮または伸張するために必要です。私は「ベストアンサー」の例を使いました

<div id="Library"></div>
#Library {
   background-image: url('LibraryTransparent.png');
   background-size: 120px;
   height: 70px;
   width: 120px;
}

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}
0
Fi Horan

Photoshopを使用して、同じ画像を2つ作成します。1番目の画像は外観をどのように見せたいか、2番目の画像はホバーしたときの外観をどのようにしたいかです。私は<a>タグで画像をラップしています。それがあなたが望むものだと私が思っているからです。この例では、彩度の低いFacebookのアイコンを作成していますが、マウスオーバーするとFacebookの青色が表示されます。

<a href="www.facebook.com"><img src="place of 1st image" onmouseover="this.src='place of 2nd image'" onmouseout="this.src='place of 1st image'"></a>
0
Phong Ly

問題は最初の画像を 'src'属性で設定し、ホバーすると画像にbackground-imageが追加されることです。これを試して：

hTMLで使用する：

<img id="Library">

その後、CSSで：

#Library {
    height: 70px;
    width: 120px;
    background-image: url('LibraryTransparent.png');
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
}
0
Tomzan

これが簡単なトリックです。コピーして貼り付けるだけです。

<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Change Image on Hover in CSS</title>
    <style type="text/css">
        .card {
            width: 130px;
            height: 195px;
            background: url("../images/card-back.jpg") no-repeat;
            margin: 50px;
        }
        .card:hover {
            background: url("../images/card-front.jpg") no-repeat;
        }
    </style>
    </head>
    <body>
        <div class="card"></div>
    </body>
    </html>
0
Lokesh Thakur

ライブ例： JSFiddle

承認された回答には問題があります。画像のサイズは変更されていません。画像のサイズ変更にはbackground-sizeプロパティを使用してください。

HTML：

<div id="image"></div>

CSS：

#image {
   background-image: url('image1');
   background-size: 300px 390px;
   width: 300px;
   height:390px;
}

#image:hover{
  background: url("image2");
  background-size: 300px 390px;
}
0
Md. Rafee

あなたが物事をやっているように、それは起こりません。元の画像によってブロックされている画像の背景画像を変更しています。高さと幅を変更することも起こりません。画像のsrc属性を変更するには、JavascriptまたはjQueryなどのJavascriptライブラリが必要です。ただし、divボックス自体が空になっていても、イメージを単純なdiv（テキスト）ボックスに変更し、ホバー時に背景イメージが変わるようにすることもできます。これはどうですか。

<div id="emptydiv"></div>

#emptydiv {

background-image: url("LibraryHover.png");
height: 70px;
width: 120px;

}

#emptydiv:hover {

background-image: url("LibraryHoverTrans.png");
height: 700px;
width: 1200px;

}

私はこれがあなたが求めているものであることを願っています:)

0
Daniel Schwarz