View Full Version : link & image

05-04-2006, 10:38 PM
I am working on a webpage and I have several links that when you click on them it would show an small image of the webpage. What I can't figure out is I want to be able to click on link and have the image show up inside or on top of a image of a TV screen. I am open to any and all suggestions. Thank You in advance for any help you can give. Note: This page is a css page if thats any help. Thanks Again,

05-04-2006, 11:38 PM
I'd say you have a div with the (empty) tv screen as background image and an image inside the div (maybe a transparent gif) and you switch the image with JavaScript onclick event.

Do you need a code example or you know how to do?

05-05-2006, 12:30 AM
better give me an example please of the code. I'm not that well versed in this.
Thanks again,

05-05-2006, 11:12 AM
Alright, so here' an example:

<!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">
<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";
<style type="text/css">
div {
width: 315px;
height: 200px;
border: 1px solid red;
background: url(path_to/image.gif) top left no-repeat;

<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>
<div><img id="screen" src="http://www.codingforums.com/img/logo.gif" alt="" /></div>

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:

... = "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. :)