Javascript 如何创建一个简单的图库，在悬停和单击文本时显示图像？

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

我希望使用与示例1相同的布局，示例1有3列，左侧2列包含文本链接，右侧1列在单击后显示图像的位置

• 示例1：
  *这个网站目前使用我不想要的iFrame标签

我还希望它在悬停时显示图像（请参见示例2.floatRight示例）

• 示例2：
  *问题是它使用了我不想要的span标记。 此外，当您单击较低的链接-链接项目8，然后将鼠标悬停在上面的链接上时，上面的链接不可见（看起来像是堆叠问题或其他问题）

如果这是可行的html/css这将是伟大的！如果不是，我相信一点javascript/jquery不会伤害我

---

我整个星期都在寻找解决方案，因此，如果有任何帮助或正确方向的建议，我将不胜感激。

好的，那么您可以用html来展示您的专栏和链接。然后使用jQuery进行图像交换。对于悬停可能不是一个好主意，尤其是如果您的布局与示例1中的布局相同，除非您使用悬停意图。但你会这样做的

你需要有

这将需要在脚本进行图像交换之前加载

链接和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> 

$（文档）.ready（函数（）{
$（'.imgLink'）。单击（函数（）{
var imgPath=$（this.attr（'href'）；
$（'theImage'）.attr（'src'，imgPath）；
返回false；
}
});

我认为单击和悬停会发生冲突。如果图像已经存在，因为您将鼠标悬停在上面，那么单击有什么意义呢？我将在示例2之后使用“悬停并单击”选项。在该示例中，当您将鼠标悬停在链接上时，图像会出现，但当您将鼠标移到示例框外时，图像会消失。如何操作曾经，当你点击一个链接并将鼠标移到框外时，图像会保持不变。我想我希望当鼠标移到框外时图像会保持不变。我不确定jQuery如何处理这个问题？这很好！非常感谢@realseanp…只是最后一个结束标记的第二个出现了一个轻微的语法错误。我在下面对它进行了修正w、

$（document）.ready（function（）{$（'.imgLink'）。单击（function（）{var imgPath=$（this）.attr（'href'）；$（'#theImage'）.attr（'src'，imgPath）；返回false；}）；