Javascript 悬停并单击图像以显示内容（显示初始内容）

我正试图找出如何使以下各项发挥作用：

• 初始加载时，将显示初始图像右侧的内容（并且应为彩色）
• 将鼠标悬停在图像上方时，图像将变为彩色，并且该图像的内容将显示在右侧
• 单击后，内容将保留在右侧，图像将保持彩色，因为它是选定的内容

我知道您可以使用CSS使图像具有滚动功能，以便彩色图像显示，但是我不知道如何使图像在单击时保持彩色，以及如何使右侧内容显示，我认为使用Jquery或Javascript可以做到这一点

它看起来像什么：

如果你能帮忙的话，我将不胜感激

---

谢谢

即使NewToJS是绝对正确的，有时一些免费的源代码可能会帮助您开始：

var contentValues=[“幻灯片1内容”、“幻灯片2内容”、“幻灯片3内容”]；
var contentColors=[“333333”、“777777”、“000000”]；
$（函数（）{
$（“#公司img”）。在（“鼠标悬停”，函数（）
{
console.log（$（this.data（“幻灯片”））；
$（“#testcont”）.html（contentValues[$（this.data）（“幻灯片”））；
$（“#testcont”）.css（“背景色”，contentColors[$（this.data）（“幻灯片”））；
});
$（“#公司img”）。在（“单击”，函数（）
{
console.log（$（this.data（“幻灯片”））；
$（“#公司img”）.css（“背景色”、“透明”）
$（this.css（“背景色”，contentColors[$（this.data（“幻灯片”）]）；
});
});




此处的内容
到目前为止，您尝试了什么？请显示您执行此操作的尝试。我在css或javascript事件/函数中没有看到任何悬停状态，因此不清楚问题出在哪里。如果你期望人们只是让你的愿望清单成真，那么你就错了。堆栈溢出是供开发人员调试源代码、发现问题、解释问题并提供解决方案（如果可能）的，而不是供人们发布请求和期望免费源代码的网站。非常感谢，我不是故意粗鲁，只是希望代码能为我提供，更像是一个指向正确方向的指针！我忘了提到这一点，因为很简单，我根本不知道任何Javascript，而且在大约6年的时间里几乎没有做过任何编码。我已经尝试了你的建议，但是我似乎不明白为什么我的文档中没有这样做——但是它在提供的代码片段中，当我使用JSFIDLE集成我的代码时。没问题，伙计！有时候，一点代码就可以开始移动了。您是否包括jquery？这也应该包装在$（function（）{}）中；查看我刚才的编辑我编辑了我的评论，在我编辑时你已经发表了评论，所以不确定你是否已经阅读了我的其余信息，从而有可能为我提供更多帮助在JSFIDLE上，它工作得很好，但是当我把它放到html文档中时，它就不工作了？在图像上悬停或单击时，不会发生任何更改。
<ul id="testb">
    <li id="companies">
        <img src="images/linkedin.gif" width="120" height="95" alt="" />
        <img src="images/specsavers.gif" width="100" height="95" alt="" />
        <img src="images/avc.gif" width="110" height="95" alt="" />
    </li>
    <li id="testcont">content here</li></ul>

#testb{
width:950px;
margin:0 auto;
list-style:none;
padding:0;
}
#companies{
    width:440px;
    float:left;
    list-style:none;
    padding:85px 0 45px 0;
    margin:0;
    height:130px;
    display:block;
}
#testcont{
    float:left;
    width:395px;
    height:170px;
    padding:45px 0 45px 70px;
    margin:0;
    background: url(images/testglow.gif) no-repeat;
}