javascript - 使用 javascript 将 <img title""> (或类似的)调用到 div 中以显示插图和描述？-6ren

javascript - 使用 javascript 将 (或类似的)调用到 div 中以显示插图和描述？

转载作者：行者123 更新时间：2023-11-28 02:39:04

首先快速免责声明:我是 javascript 新手，没有编码背景，但目前正在阅读书籍、教程并经常访问这个网站来自己解决问题。不过，我非常感谢有关具有 javascript 函数的图像库的一些帮助。

我需要的解决方案是使用 javascript 将缩略图链接到同一页面上的较大图像，并在其下方显示相关文本描述。由于该网站是艺术家的作品集，因此目标是在同一页面上显示艺术品，并在下方显示标题、尺寸和价格。

当前站点http://www.barrymckayart.co.uk/animals.html这样做，尽管没有任何脚本，并且代价是为每个图像链接创建一个单独的页面(纯粹是由于我的经验不足)。

我当前正在尝试的脚本是:

<script type="text/javascript">
  function showImage(imgName) {
    var curImage = document.getElementById('currentImg');
    var thePath = 'images/animals/';
    var theSource = thePath + imgName;

    curImage.src = theSource;
    curImage.alt = imgName;
    curImage.title = imgName;

从视觉上看，这与现有网站相同，并且运行完美。但是，我不知道如何为每个图像引入特定的文本。我尝试调用 img title="" 并为每个缩略图创建一个 div 以包含 p 标签。不实用!我还尝试创建一个 figcaption 但所做的只是显示在缩略图下并导致所有内容不对齐。

与我想要实现的目标类似的画廊位于 http://www.thekitchen.org/auction2010/#artwork 。除了写这篇文章之外，我还尝试破译代码，因为我渴望学习 JavaScript，但解决这个问题的时间有限。

如果有人能提供任何指示、解决方案或建议，我将不胜感激。

谢谢。

<小时/>

我已经使用了这两种代码，现在正在考虑哪一种代码适合该网站。感谢大家的及时答复并花时间提供一些出色的支持。我想对这两个答案都投一票，但由于我是新手，我必须等到我的声望达到 16 级。尽管如此，我还是非常感谢你们。

最佳答案

您需要为每个图像提供一个 id，然后您想使用 getAttribute("title") 来检索该属性。所以对于

<img src="../images/animals/thumbs/gorilla.jpg" id="gorilla" title="Gorilla (coloured pencils)" alt="Gorilla (coloured pencils)">

获取该图像的标题你会这样做

g = document.getElementById("gorilla")
g.getAttribute("title"); // do what you need with the attribute

但是，最好将额外的数据存储在索引到 html 中的 ids 的对象中，有点像这样:(这里有一个 jsfiddle

<html>
    <head></head>
    <body>

        <a href="#" onclick ="showPicture('leopard');return false;"><img src="http://www.barrymckayart.co.uk/images/animals/thumbs/leopard.jpg" title="Lone Leopard (
        watercolour)" alt="Lone Leopard (watercolour)" /></a>

        <a href="#" onclick ="showPicture('rhino'); return false;"><img src="http://www.barrymckayart.co.uk/images/animals/thumbs/rhino.jpg" id="rhino" title="Rhino (coloured pencils)" alt="Rhino (coloured pencils)" /></a>
        <div><img src="http://www.barrymckayart.co.uk/images/animals/leopard.jpg" id="full_picture">
        </div>
        <h1 id="main_title">Leopard</h1>
        <div id="description">
            Lone Leopard
        </div>
        <div id="price">
            $3,340
        </div>

        <script>
            var data = {
                "rhino" : {
                    "title" : "Lone Rhino",
                    "desc" : "watercolor",
                    "price" : "$3,340",
                    "full" : "http://www.barrymckayart.co.uk/images/animals/rhino.jpg"
                },
                "leopard" : {
                    "title" : "Lone Leopard",
                    "desc" : "watercolor",
                    "price" : "$3,000",
                    "full" : "http://www.barrymckayart.co.uk/images/animals/leopard.jpg"
                }

            };

            function showPicture(id) {
                var main_image = document.getElementById("full_picture");
                var price = document.getElementById("price");
                var main_title = document.getElementById("main_title");
                var description = document.getElementById("description");

                main_image.src = data[id].full;
                price.innerHTML = data[id].price;
                main_title.innerHTML = data[id].title;
                description.innerHTML = data[id].desc;

            }
        </script>

    </body>

</html>