Develop Reference

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

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

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>

how to prevent css div popup from jumping back to the top of the page

I'm by no means well versed in JS, but I'm trying to put together a simple portfolio site for school with a black transparent div to act as a lightbox. I'm using CSS and JS to toggle this div, but on a long scrolling page, it jumps to the top when turned on. Here's my CSS:
<style type="text/css">
div.transbox{
width:100%;
height:100%;
margin:0px 0px;
position:fixed;
background-color:#000000;
background:rgba(0,0,0,0.75);
z-index:99;
}
p.ptransbox{
width:400px;
padding:5px;
position:relative;
background:rgba(255,255,255,0.5);
color:#000;
border-radius:5px;
}
img.itransbox{
padding:10px;
position:relative;
background:rgba(255,255,255,0.5);
border-radius:5px;
}
Here is the JS:
var toggle2 = function() {
var mydiv = document.getElementById('02');
if (mydiv.style.display === 'none' || mydiv.style.display === '')
mydiv.style.display = 'block';
else
mydiv.style.display = 'none'
}
This is the code that is immediately viewable as the link to open the div (toggle on):
<td style="float:left; width: 33%" class="school">
<a title="Girl in Chair, 2012" class="tooltip" href="#" onclick="toggle2();" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/thumbs/chairO.png',1)">
<img src="images/thumbs/chair.png" id="Image2" /></a>
And this is the code that brings the "lightbox" up, with the option to toggle it off:
<a href="#" onclick="toggle2();">
<div align="center" id="02" class="transbox" style="display: none;">
<p><img class="itransbox" src="images/anti-thumbs/chair.jpg" /></p>
<p class="ptransbox"><strong>Wörner Hall</strong>, 2010</p></div></a>
Please disregard all the Titles, Alts, or anything that is just specific to the content. You can see my portfolio in action here: http://www.student.nvcc.edu/home/majeffers3/ and if you notice, when you scroll to the bottom and click on an item, it jumps you to the top. I've been a long time lurker, first time I've ever posted a question because I can't seem to find the solution. Thank you so much for all your help!

You need to prevent the default action from taking place when the link is clicked. The simplest way to do this is to return false from the onclick handler:
<a title="Girl in Chair, 2012" class="tooltip" href="#" onclick="toggle2(); return false;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/thumbs/chairO.png',1)">

Please change from href="#" to href="javascript:;". It simply go to "#" link when you click.

Make sure you return false from your onclick handlers. If you don't, the default action for hyperlinks kicks in, which means you'll navigate to #, which means the top of the current page.

using tabs to do a flash swap

So I have browsed all over, including these posts:
Jquery change image on click
JQuery - how can I change an image src on click of a link
http://www.kirupa.com/forum/showthread.php?301972-Swap-image-on-click-Anyone
and other links as well and I guess I don't understand how it works and can't get it to work.
Here is what I have so far:
HTML:
<div style="width:475px; height:230px; background-color:#c1bfbf;">
<div style="width:450px; height:220px; position:relative; overflow:hidden; float:left;">
<ul style="width:450px; height:220px; list-style:none; padding:0px; border:0px; margin:0px; position:relative; float:left;">
<li id="first" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph2.png" /></li>
<li id="second" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph1.png" /></li>
</ul>
</div>
<div style="width:25px; height:110px; position:relative; float:left;">
<img src="images/2nd.png" />
</div>
<div style="width:25px; height:110px; position:relative; float:left;">
<img src="images/1st.png" />
</div>
</div>
This code works using anchor tags, but the problem is it pulls the page down to the anchor which I don't want. So I moved on to jQuery and image swaps. I've implementing other peoples codes to see if they work and I can't get them to work. I've used this jQuery code:
$(function () {
$('.menulink').click(function () {
$("#bg").attr('src', "images/imagegraph1.png");
return false;
});
});
Matched up with this HTML:
switch me
<img src="images/imagegraph2.png" id="bg" />
And all that happens is the showing of imagegraph2.png and not the switching of imagegraph1.png. Usually when you do and then hit the "=" sign, a list of possible links comes up for your image. When its in Javascript, it doesn't do that, you just put what folder/name of file. So I'm sure I'll get some negative votes here, but I have exhausted all avenue's to get this to work.

Try e.preventDefault();
$(function () {
$('.menulink').click(function (e) {
e.preventDefault();
$("#bg").attr('src', "images/imagegraph1.png");
});
});

Scroll horizontally across image thumbnails and have images pop up on mouse hover

I have written some code in html and css to scroll horizontally across image thumbnails and have them pop up on mouse hover. The problem is that when I can scroll horizontally, then the popped up (enlarged) image on mouse hover is only visible within the div that it is contained in. I would like for it to be visible on top of everything else on the page. But since I created the scroll bar by making the property of the div overflow-x:scroll,you would have to scroll to see the enlarged image if it is larger than the div. When I don't see the overflow-x property to scroll, I can view the enlarged image on top of everything else like I want to but all the other thumbnails are also visible. Here is a code snippet to show what I've done.
HTML
<div id="example1">
<h1>This is an example</h1>
<h2>Car 1</h2>
<div class="scroll">
<div id="example1_car1">
<a class="thumb" href="#"><img src="car1.jpg" alt="car1" height="200" width="251"><span> <img src="car1.jpg" alt="car1"></span></a>
<a class="thumb" href="#"><img src="car2.jpg" alt="car2" height="200" width="251"><span><img src="car2.jpg" alt="car2"></span></a>
<a class="thumb" href="#"><img src="car3.jpg" alt="car3" height="200" width="251"><span><img src="car3.jpg" alt="car3"></span></a>
</div><!--example1_car1-->
</div><!--example1_scroll-->
<h2>Car 2</h2>
<div class="scroll">
<div id="example1_car2">
<a class="thumb" href="#"><img src="car1.jpg" alt="car1" height="200" width="251"><span><img src="car1.jpg" alt="car1"></span></a>
<a class="thumb" href="#"><img src="car2.jpg" alt="car2" height="200" width="251"><span><img src="car2.jpg" alt="car2"></span></a>
<a class="thumb" href="#"><img src="car3.jpg" alt="car3" height="200" width="251"><span> <img src="car3.jpg" alt="car3"></span></a>
</div><!--example1_car2-->
</div><!--example2_scroll-->
</div><!--example1-->
CSS
#example1_car1,#example1_car2,.scroll{
position:relative;
}
#example1_car1, #example1_car2
{
width:2400px;
height:200px;
z-index:0
}
.scroll
{
width:800px;
height:210px;
overflow-x:scroll;
z-index:0;
}
.thumb img {
border:1px solid #000;
margin:3px;
float:left;
zindex:-1;
}
.thumb span {
position: relative;/*absolute;*/
display:none;
}
.thumb:hover, .thumb:hover span {
display:inline;
top:0; left: 0px;
/*z-index:1;*/
z-index:10;
}
Any help would be much appreciated.

To make the enlarged image appear on top of/outside of the scrollable region, it will have to actually be outside of it.
To make the enlarged image appear outside, when hovering over a thumbnail that is inside of the scrollable region, you will need to use JavaScript on top of your HTML and CSS.
Here's an example on jsfiddle, in which I haven't changed your HTML structure. Instead I used jQuery to clone the enlarged image outside of the scrollable region and append it to the #example1 div, when you hover over a thumbnail.
JavaScript portion:
$('.thumb').hover(
function(){
var thumb = $(this).children('img');
var large = $(this).find('span>img').clone();
$('#example1').append(large);
large.addClass('enlargedImg');
large.css({
'top': thumb.offset().top,
'left': thumb.offset().left
});
},
function(){
$('.enlargedImg').remove();
}
);
I used the thumb image's offset() values to position the enlarged image directly on top of it. You'll probably want to move it a bit but hopefully this is enough to get you started.

Centering Problem (Horizontal)

I want to center this material horizontally:
<a href='/big.jpg' class = 'cloud-zoom' id='zoom1'
rel="">
<img src="/small.jpg" alt='' title="Optional title display" />
</a>

Add text-align:center to your anchor. I assume your zoom1 has display:block style and its width is larger than image's width.
<a href='/big.jpg' class = 'cloud-zoom' id='zoom1' rel="" style="display:block; width:400px; border:1px solid red; text-align:center">
<img src="/small.jpg" alt='' title="Optional title display" />
</a>

altough the question is not clear on what needs to be center aligned, here is the link you can check out -
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/HorizontalAlignment.html