如何为这些图像添加标题标签

How do I add a title tag to these images?

本文关键字：添加 标题 标签 图像      更新时间：2023-09-26

我有一个包含图像的表格，我正在尝试使用jQuery UI为每个图像制作单独的工具提示。目前，我想使用 JavaScript 来显示图像，但坚持为每个图像实现标题标签。如果有人能告诉我或告诉我如何做到这一点，将不胜感激。谢谢你的帮助。

链接到网站： www.thetotempole.ca/javascriptproject2.html

.HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Arrays</title>
<style>
#tbl img {
    -webkit-transition: -webkit-transform 0.5s ease;
          transition: transform 0.5s ease;
}
#tbl td:hover img {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}
td {text-align: center;}
</style>
</head>
<body>
  <center><table id="tbl" border="1">
         <tr>
            <th>Product Name</th>
            <th>Product Description</th>
            <th>Product Images</th>
         </tr>
  </table>
<script>
var products = [
  {
    name: "Apple",
    description: "It might be fruit, or it might be an iPhone",
    imageUrl: "images/apple.jpg"
  }, {
    name: "Dell",
    description: "Buy this one online at dell.com",
    imageUrl: "images/dell.jpg"
  }, {
    name: "IBM",
    description: "If you want a mainframe they still have some",
    imageUrl: "images/ibm.jpg"
  }, {
    name: "Toshiba",
    description: "Get a discount through SAIT (maybe)",
    imageUrl: "images/toshiba.jpg"
  }, {
    name: "Atari",
    description: "Try a classic gaming machine",
    imageUrl: "images/atari.jpg"
  }, {
    name: "Commodore",
    description: "64k should be enough for anyone",
    imageUrl: "images/commodore.jpg"
  }
];
var table = document.getElementById("tbl");
products.forEach(function(product) {
  var row = document.createElement("tr");
  row.appendChild(createCell(product.name));
  row.appendChild(createCell(product.description));
  row.appendChild(createImageCell(product.imageUrl));
  table.appendChild(row);
});
function createCell(text) {
  var cell = document.createElement("td");
  cell.innerText = text;
  return cell;
}
function createImageCell(url) {
  var image = document.createElement("img");
  image.setAttribute("src", url);
  var cell = document.createElement("td");  
  cell.appendChild(image);
  return cell;
}
</script>
</center>
</body>
</html>

在每个 json 数组中添加标题

{ 
  name: "Apple", 
   description: "It might be fruit, or it might be an iPhone",
  imageUrl: "images/apple.jpg",
  title: "title1"
}, { ........}

编辑此行 

row.appendChild(createImageCell(product.imageUrl));

自

row.appendChild(createImageCell(product.imageUrl, product.title));

编辑此函数

 function createImageCell(url)

自

function createImageCell(url,title){
...

为图像添加标题属性：

image.setAttribute("title",title);

尝试

在 createImageCell 函数中传递标题，并将标题属性添加到该图像

将函数更改为

products.forEach(function(product) {
  ....
  row.appendChild(createImageCell(product.imageUrl, product.name));
});

function createImageCell(url, product_name) {
  var image = document.createElement("img");
  image.setAttribute("src", url);
  image.setAttribute("title", product_name);
相关文章：