Как отображать имя изображения при наведении курсора мыши?

Question

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

HTML

 <section id=main> 
 
      <!--populate with images from array--> 
 
      <p id="photos" class="product_display"> 
 
      <script>getImage();</script> 
 
     </section>

JS

//image array for products 
 
var imageArray = new Array(); 
 
imageArray[0]="images/coffee_prod_1.png"; 
 
imageArray[1]="images/coffee_prod_2.png"; 
 
imageArray[2]="images/coffee_prod_3.png"; 
 
imageArray[3]="images/coffee_prod_4.png"; 
 
imageArray[4]="images/coffee_prod_5.png"; 
 
imageArray[5]="images/coffee_prod_6.png"; 
 
imageArray[6]="images/coffee_prod_7.png"; 
 

 
//price array for products 
 
var priceArray = ["€11.90", "€12.90", "€13.90", "€14.90", "€15.90", "€16.90", "€17.90"]; 
 

 
function getImage(){ 
 
        
 
        var container = document.getElementById("photos"); 
 

 
        for (var i=0; i < imageArray.length; ++i) { 
 
        var img = new Image(); 
 
        img.src = imageArray[i]; 
 
        img.className = "product_details"; 
 
        img.name = priceArray[i]; 
 
        container.appendChild(img);      
 
        } 
 

 
}

Я думал, что я мог бы добавить что-то вроде «img.onmouseover = емк eMouseOver (priceArray [I]);» к моей функции getImage, а затем что-то внутри функции, которая будет отображать имя изображения (в идеале над изображением) при наведении курсора мыши. Я надеялся применить непрозрачный цвет, чтобы изображение было более четким.

Любая помощь будет оценена!

Answer 1

Я бы предложил создать контейнер-контейнер для каждой фотографии, а в каждом контейнере добавить свой и как другой div, который содержит цену. Установите цену диву скрытую на первом с дисплеем: нет или что-то, а затем в вашем JavaScript добавить некоторые слушателей, чтобы показать и скрыть:

for (var i=0; i < imageArray.length; ++i) { 
    var img = new Image(); 
    img.src = imageArray[i]; 
    img.className = "product_details"; 
    var container = document.createElement("div"); 
    var price = document.createElement("div"); 
    price.innerHTML = priceArray[i]; 
    //Style your price and image elements so they fit in the container and the price is displayed over the image etc 
    container.appendChild(price); 
    container.appendChild(img); 

    container.onmouseover = function() { 
     container.getElementByClass("price").style.display = "block"; 
    }; 
    container.onmouseout = function() { 
     container.getElementByClass("price").style.display = "none"; 
    };     
} 

Вам может понадобиться возиться с OnMouseOver/из событий немного, если показывая цена ДИВ портит его то OnMouseOver называется на слое с самым высоким индексом г вместо контейнера, я не пробовал, но это должно дать вам общее представление

Answer 2

Рабочий пример здесь: http://jsfiddle.net/0vts5291/

HTML

<section id=main> 
    <!--populate with images from array--> 
    <p id="photos" class="product_display"> 
</section> 

JS

var imageArray = new Array(); 
imageArray[0]="images/coffee_prod_1.png"; 
imageArray[1]="images/coffee_prod_2.png"; 
imageArray[2]="images/coffee_prod_3.png"; 
imageArray[3]="images/coffee_prod_4.png"; 
imageArray[4]="images/coffee_prod_5.png"; 
imageArray[5]="images/coffee_prod_6.png"; 
imageArray[6]="images/coffee_prod_7.png"; 

//price array for products 
var priceArray = ["€11.90", "€12.90", "€13.90", "€14.90", "€15.90", "€16.90", "€17.90"]; 

function getImage() { 
    var container = document.getElementById("photos"); 

    for (var i = 0; i < imageArray.length; ++i) { 
     var img = new Image(); 
     img.src = imageArray[i]; 
     img.className = "product_details"; 
     img.name = priceArray[i]; 
     img.title = priceArray[i]; 
     container.appendChild(img); 
    } 
} 

getImage();