javascript - 如何创建一个简单的画廊，在悬停和单击文本时显示图像？

Question

我目前正在更新一个网站，我正在寻找一种相对简单的方法来创建产品展示。

我想要与示例 1 相同的布局，它有 3 列 - 左侧 2 列包含文本链接，右侧 1 列在单击后显示图像。

• 示例 1:http://imagethrow.com/design-studio-all-throws.html

  *此站点当前使用我不想要的 iFrame 标记。

我还希望它在悬停时显示图像(参见示例 2 .floatRight 示例)

• 示例 2:http://alt-web.com/DEMOS/CSS-Disjointed-Rollover-3.shtml#

  *这个问题是它使用了我不想要的 span 标签。 此外，当您点击下方链接时——例如 link item 8，然后将鼠标悬停在上面的链接上时，上面的链接不可见(看起来像堆叠问题之类的)。

如果这对于 html/css 是可行的，那就太好了!如果没有，我相信一点点 javascript/jquery 不会伤害我。

我整个星期都在寻找解决方案，因此非常感谢任何帮助或指向正确方向的观点。

Answer 1

好的，所以您在 html 中布置了您的列和链接。然后使用 jQuery 进行图像交换。悬停可能不是一个好主意，特别是如果您的布局与示例一中的布局相同，除非您使用悬停意图。但这就是您要做的。

1. 你需要有 jQuery
2. 这需要在您的图像交换脚本之前加载

用于放置图像的链接和 img 标记的 HTML

 <a class="imgLink" href="path-to-the-image.jpg">Image name</a>
 <img src="" id="theImage">

脚本:

<script>
    $(document).ready(function(){
        $('.imgLink').click(function(){
            var imgPath = $(this).attr('href');
            $('#theImage').attr('src',imgPath);
            return false;
        }
    });
</script>