Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: link & image

  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    link & image

    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,
    Larry

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,662
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    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?

  • #3
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    better give me an example please of the code. I'm not that well versed in this.
    Thanks again,
    larry

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,662
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •