swap изображение при наведении указателя мыши на его контейнер div

Question

Я ударил кирпичную стену, пытаясь поменять изображение, когда он зависает над его содержащим div.

Я могу сделать это с помощью css, но у меня есть 6 div с 6 изображениями, содержащимися в них. если бы я сделал это в css, мне понадобилось бы 6 наборов событий наведения для изменения фонового изображения. Я хочу сделать это с помощью самого простого кода.

в данный момент изображения не установлены в качестве фонового изображения, но как <img src>

все парить изображения использовать то же имя, но with'over добавили в имя файла.

ie. shop.png shopover.png их прочь добавить имя файла img src для добавления части «over» при зависании над его контейнером div?

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:

#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; 
} 

на данный момент я переключить H2 от синего до серого, я хочу сделать то же самое для изображения. любые идеи о наилучшем способе этого?

Answer 1

Простейший способ заключается в использовании двух изображений:

<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> 

Затем с помощью CSS:

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

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

Answer 2

Вы можете изменить просто, с помощью JavaScript, как указано ниже:

кода Изображения html

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

изменение

Изображение на JavaScript

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

Теперь, когда Mouseover на изображении, то Javascript вызвать эту функцию и установить изображение там, если вы хотите, чтобы при наведении курсора мыши не на изображение , то возврат изображения на предыдущий так использует тот же скрипт для наоборот.

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>