Alright, so here' an example:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function swap(pic) {
document.getElementById("screen").src = "images/" + pic + ".gif";
}
</script>
<style type="text/css">
div {
width: 315px;
height: 200px;
border: 1px solid red;
background: url(path_to/image.gif) top left no-repeat;
}
</style>
</head>
<body>
<ul>
<li><a href="#" onclick="swap('image1_name'); return false;">link 1</a></li>
<li><a href="#" onclick="swap('image2_name'); return false;">link 2</a></li>
<li><a href="#" onclick="swap('image3_name'); return false;">link 3</a></li>
</ul>
<div><img id="screen" src="http://www.codingforums.com/img/logo.gif" alt="" /></div>
</body>
</html>
So you have some links and a div (colored blue here). In the div you put the tv screen as background image via CSS (colored in green above - you should specify a width and height but you can remove the border if you like). And
within this div needs to be a default image (can be a transparent gif) because the JavaScript (colored in dark red) needs some image that it can swap.
Where it says this in the JavaScript
:
Code:
... = "images/" + pic + ".gif"
you put the path to your images that you want to swap, the "pic" (don't change that) will be the image name, and the ".gif" is the extension (you can change it to ".jpg" or ".png" if you need).
And in the links where you read 'image_name' you put the name of the image to swap (without extension, we already set that in the javascript).
And then it should work and hopefully do what you intended.
Before you post, read our: 
