Javascript 如何在鼠标上方显示图像名称？

我有两个数组，一个图像数组和一个价格数组。 我有图像显示，但我想显示价格，目前我在图像名称中持有的价格，当我将鼠标移到图像上时，是否可能

HTML

getImage（）；

我建议为每张照片创建一个容器div，并在每个容器中添加您的和，就像另一个包含价格的div一样。首先使用display:none或其他设置price divs hidden，然后在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";
    };                 
}

for（变量i=0；i

如果显示price div会弄糟，您可能需要稍微处理onmouseover/out事件，即在z索引最高的层上调用onmouseover，而不是在容器上调用onmouseover，我还没有尝试过，但这应该会给您一个大致的想法

这里的工作示例：

HTML

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”；
//产品价格表
var价格数组=[“11.90欧元”、“12.90欧元”、“13.90欧元”、“14.90欧元”、“15.90欧元”、“16.90欧元”、“17.90欧元]；
函数getImage（）{
var container=document.getElementById（“照片”）；
对于（变量i=0；i

您是否尝试过img.title属性？设置图像标题是否有效？img.title=priceArray[i]还是你想要更别致的东西？是的，你反对将价格存储在图像名称中吗？你应该把它放在一边，然后用正则表达式（或者别的什么）来解析价格。

title

似乎非常适合这份工作！img.title暂时有效！我一直在寻找一些有点花哨的东西，但我现在很高兴，我可以用下面的例子来玩弄，看看我是否能想出一些其他的东西，但同时标题也很完美。感谢您的回答，非常感谢（恐怕目前无法投票，分数不够）

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

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();