Hover and Click image to reveal content (With initial content displayed)

Question

I'm trying to figure out how to get the following to work:

• When initially loaded, content on the right for the initial image is displayed (and should be coloured).
• On hover over the images, the images will change to colour and the content for that image will appear on the right hand side.
• On Click the content will stay in the right hand side and the image will stay coloured as it is the selected content.

I understand you could just make the images simply have a rollover feature using CSS for the coloured images to appear, however I am unaware how to make the image stay coloured when clicked and how to make the content in the right appear, which I assume would be possible to do using Jquery or Javascript.

What it looks like: http://i.stack.imgur.com/73oFL.png

<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;
}

If you could help out it would be really appreciated.

Thanks

Answer 1

Even tho NewToJS is absolutely right , sometimes a little free source code might help you get started:

 var contentValues = ["slide 1 content", "slide 2 content", "slide 3 content"]; var contentColors = ["#333333", "#777777", "#000000"]; $(function() { $("#companies img").on("mouseover", function() { console.log($(this).data("slide")); $("#testcont").html(contentValues[$(this).data("slide")]); $("#testcont").css("background-color",contentColors[$(this).data("slide")]); }); $("#companies img").on("click", function() { console.log($(this).data("slide")); $("#companies img").css("background-color", "transparent") $(this).css("background-color", contentColors[$(this).data("slide")]); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="testb"> <li id="companies"> <img data-slide="0" src="images/linkedin.gif" width="120" height="95" alt="" /> <img data-slide="1" src="images/specsavers.gif" width="100" height="95" alt="" /> <img data-slide="2" src="images/avc.gif" width="110" height="95" alt="" /> </li> <li id="testcont">content here</li> </ul>