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 = imageMouseOver（priceArray [i]）;'的内容。到我的getImage函数，然后在函数内部显示鼠标悬停时显示图像名称（理想情况下在图像上）的内容。我希望也能应用不透明的颜色，因此图像名称可能更清晰。

任何帮助将不胜感激！

Answer 1

我建议为每张照片创建一个容器div，并在每个容器中添加你喜欢的另一个包含价格的div。首先用display：none或者东西设置隐藏的价格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 / out事件，如果显示价格div混乱，即在具有最高z指数而不是容器的层上调用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();

如何在鼠标悬停时显示图像名称？

2 个答案: