The JavaScript Source: Miscellaneous : Content Display

Internet.commerce

Internet.com

IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

Great Sites

DocJavaScript.com
dhtml.com
The Freebie Directory
TheFreeSite.com

Browse Doc JS's Tips!

Promotions

Free Announcements

General

Display a block of text, a graphic, or combination of both, by clicking on a link or a graphic. This script can be used in different circumstances, such as for informational purposes, or displaying pictures with captions. Very easy to use.

Apache | Linux | PHP

[ click on a link above for further information ]

The Apache Software Foundation provides support for the Apache community of open-source software projects.

Want to learn Linux? Have questions? Just Linux will get you started in the right direction to a superior operating system.

PHP is a widely-used general-purpose scripting language that is especially suited for Web development and can be embedded into HTML.

[ click on an image above for further information ]

The Apache Software Foundation provides support for the Apache community of open-source software projects.

Want to learn Linux? Have questions? Just Linux will get you started in the right direction to a superior operating system.

PHP is a widely-used general-purpose scripting language that is especially suited for Web development and can be embedded into HTML.

[ click on an image to see the big picture ]

Trying to move some dirt

Finally got the house built

A nice family shot

Notes

Created by: thamba
Web Site: http://www.thamba.com/
Posted: June 15, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: contentDisplay.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: thamba | http://www.thamba.com/
Adapted by Lee Underwood */

function hideall(){
  for (count=1; count<4; count+=1) // set "count" to one more than the total images/links
  document.getElementById('box'+count).style.display='none';
}

function showbox(box){
  document.getElementById(box).style.display='block';
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#Main {
  margin-left: 20%;
}

#Content1 {
  width: 300px;
  height: 100px;
  margin-left: 10%;
  border: none;
  font-weight: bold;
}

#box1, #box2, #box3 {
  display: none;
}

a {
  outline: none;
}

img {
  border: none;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="contentDisplay.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div id="Main">

<a href="#" onclick="hideall();showbox('box1')"><img src="apache.gif" width="126" height="44"></a>
<a href="#" onclick="hideall();showbox('box2')"><img src="justlinux.gif" width="150" height="19"></a>
<a href="#" onclick="hideall();showbox('box3')"><img src="php.gif" width="126" height="44"></a>
<p style="font-size: 11px; margin-top: -2px;">[ <em>click on an image above for further information</em> ]</p>
<p>
<div id="Content1">
<div id="box1">The <a href="http://www.apache.org/"><em>Apache Software Foundation</em></a> provides support for the Apache community of open-source software projects.</div>
<div id="box2">Want to learn Linux? Have questions? <a href="http://www.justlinux.com/"><em>Just Linux</em></a> will get you started in the right direction to a superior operating system.</div>
<div id="box3"><a href="http://www.php.net/">PHP</a> is a widely-used general-purpose scripting language that is especially suited for Web development and can be embedded into HTML.</div>
</div>

</div>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

3. From: sharon
jumping page
04/08/2009 18:38:55

1. From: Ian
Page moves problem
02/24/2008 07:30:46

2. From: Lee (Admin)
06/26/2008 11:20:38

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

3. From: sharonjumping page04/08/2009 18:38:55

1. From: IanPage moves problem02/24/2008 07:30:46

2. From: Lee (Admin)06/26/2008 11:20:38

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

3. From: sharon
jumping page
04/08/2009 18:38:55

1. From: Ian
Page moves problem
02/24/2008 07:30:46

2. From: Lee (Admin)
06/26/2008 11:20:38