コンテナdivの上を移動すると画像がスワップ

Question

私は、レンガの壁に当たって、画像を入れ替えようとしました。

私はCSSでそれを行うことができますが、6個のdivと6個の画像が含まれています。私はCSSでそれをした場合、私は6セットのホバーイベントの背景画像を変更する必要があります。私は可能な限り簡単なコードでこれをやりたい。

瞬間に画像が全てホバー画像が同じ名前を使用するが、「ファイル名に追加with'over背景画像としてではなく<img src>

として設定されていません。

ie。 shop.png shopover.pngはimg srcファイル名を追加してコンテナdivの上にホバリングするときに 'over'部分を追加しますか？

HTML：

<div class="row"> 

     <a href="index.php?page=exhibitorlist&id=1"> <div class="c2 center"><img src="images/eliquid.png"><h2 class="center">Juice Brands</h2></div></a> 
      <a href="index.php?page=exhibitorlist&id=2"> <div class="c2 center"><img src="images/mod.png"><h2 class="center">Hardware</h2></div></a>    
      <a href="index.php?page=exhibitorlist&id=3"><div class="c2 center"><img src="images/dist.png"><h2 class="center">Distributors</h2></div></a> 
      <a href="index.php?page=exhibitorlist&id=4"><div class="c2 center on"><img src="images/shop.png"/><h2 class="center">Retailers</h2></div></a>    
      <a href="index.php?page=exhibitorlist&id=5"><div class="c2 center"><img src="images/robot.png"><h2 class="center">Machinary/Packaging</h2></div></a> 
      <a href="index.php?page=exhibitorlist&id=6"><div class="c2 center"><img src="images/other.png"><h2 class="center">Other</h2></div></a>  
</div> 

CSS：私は青色から灰色にH2を切り替える瞬間に

#exhibitorcontainer { 
background-color:rgba(0, 0, 0, 0.7); 
background:url(../images/bg2.png) repeat; 
width:100%; 
height:100%; 
} 
#exhibitorcontainer .c2 { 
margin: 0 5px; 
width: 15.8%; 
background-color:rgba(0, 0, 0, 0.5); 
} 
#exhibitorcontainer h2 { 
font-size:16px; 
color: #1b9bff; 
} 
#exhibitorcontainer .c2:hover h2 { 
color:#666; 
} 

が、私はイメージのために同じことをやりたいです。これを行う最善の方法に関するアイデア？あなたは下記のようJavaScriptを使用して、簡単に変更することができます

.hover-image, .c2:hover .normal-image { 
    display: none; 
} 

.c2:hover .hover-image { 
    display: inline; 
} 

Answer 1

最も単純な方法は、2枚の画像を使用することですhtml

<img src="images/click.png" onmouseover="ic()" id="myImage"/>

ジャバスクリプトによって

画像変化

function ic(){ 
 
    document.getElementById('myImage').src='images/yes.png'; 
 
}

あなたの画像上のマウスオーバーが続いJavaScriptを有効にして関数を呼び出して、あなたがしたい場合は、そこに自分の画像を設定今

そのときの画像上のマウスオーバーではありません前回の画像が返ってくるので、同じスクリプトをviceversaに使用してください。

Answer 2

：の

画像コードをCSSを使用すると

<div class="c2 center"> 
    <img src="images/dist.png" class="normal-image"> 
    <img src="images/dist-over.png" class="hover-image"> 
    <h2 class="center">Distributors</h2> 
</div> 

：

Answer 3

ここにはjavascriptを使用したソリューションがあります。コメントの説明を読む。

var cells = document.getElementsByClassName("c2"); 
 
for (i=0; i<cells.length; i++) { 
 
cells[i].addEventListener("mouseover", function(){ 
 
    var im = this.getElementsByTagName('img')[0]; /* get img element */ 
 
    var arr = im.src.split("/");     /* split image src path into array */ 
 
    var im_fname = arr[arr.length-1]; /* get last element of array - this is fullname of image [name].[extension]*/ 
 
    var image = im_fname.split(".");    /* separate fullname to name and extension */ 
 
    var new_img_fname = image[0]+"over"+"."+image[1]; /* append "over" to the name */ 
 
    var fname = ""; 
 
    for (j=0; j<arr.length-1; j++) fname = fname + arr[j]+"/"; /* gather full path to image*/ 
 
    im.src = fname + new_img_fname;   /* assign new fullname */ 
 
}); 
 

 
cells[i].addEventListener("mouseout", function(){ 
 
    var im = this.getElementsByTagName('img')[0]; 
 
    var arr = im.src.split("/"); 
 
    var im_fname = arr[arr.length-1]; 
 
    var image = im_fname.split("over."); /* split fullname to array of <name> and <extension>*/ 
 
    var fname = ""; 
 
    for (j=0; j<arr.length-1; j++) fname = fname + arr[j]+"/"; /* gather full path to image*/ 
 
    im.src = fname + image[0]+"."+image[1];   /* assign new fullname */ 
 
}); 
 

 
}

<div class="container"> 
 
<div class="row"> 
 

 
     <a href="index.php?page=exhibitorlist&amp;id=1"> <div class="c2 center"><img src="images/eliquid.png"><h2 class="center">Juice Brands</h2></div></a> 
 
      <a href="index.php?page=exhibitorlist&amp;id=2"> <div class="c2 center"><img src="images/mod.png"><h2 class="center">Hardware</h2></div></a>    
 
      <a href="index.php?page=exhibitorlist&amp;id=3"><div class="c2 center"><img src="images/dist.png"><h2 class="center">Distributors</h2></div></a> 
 
      <a href="index.php?page=exhibitorlist&amp;id=4"><div class="c2 center on"><img src="images/shop.png"><h2 class="center">Retailers</h2></div></a>    
 
      <a href="index.php?page=exhibitorlist&amp;id=5"><div class="c2 center"><img src="images/robot.png"><h2 class="center">Machinary/Packaging</h2></div></a> 
 
      <a href="index.php?page=exhibitorlist&amp;id=6"><div class="c2 center"><img src="images/other.png"><h2 class="center">Other</h2></div></a>  
 
</div> 
 
</div>