CSS Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 300,401 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,590 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Hidden DIVs for interactive content

Hidden DIVs for interactive content

Options

BenignDesign
Group Icon

5 May, 2008 - 04:31 AM

Post #1

The premise of this tutorial is to show you how to create the interactive content seen here.

This project originally started using a map of the United States in an attempt to create an interactive study guide for my daughter using state names and capitals.

However, I opted to start on a smaller scale (ie, less than 50 options) for my initial design. I found an image of 8 US Presidents via Google image search, seen below:

IPB Image

Step 1: Setting up the image

I set the image as the body background, though it could be set as background for a particular division if needed.

CODE

body {
background-color:#ffffff;
color:#000000;
background-image:url(img/presidents.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:top center;
}

Step 2: Setting up the basic page layout

I then set up a wrapper and an inner division called "details" to hold a simple instruction line and set both divisions to the same width as the image.

CODE

#wrapper {
margin:0 auto;
width:497px;
}

#details {
position:absolute;
width:497px;
height:25px;
margin-top:50px;
}

I'm using an external stylesheet, so thus far, the HTML looks like this:

HTML

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="details">
<h3>Roll over a President in the image above.</h3>
<h5>Image from Stamp-Search.com</h5>
</div>
</div>
</body>
</html>

Step 3: Setting up transparent divisions

From here, I set up divisions around the individual images of the Presidents. For the initial setup, I used a border around each division until I had them positioned where I wanted them, then removed the border. The transparent background allows you to have hoverable divisions without obstructing the image behind them.

CODE

#truman {width:75px;height:115px;background:transparent;margin-left:101px;margin-top:72px;}
#eisenhower {width:75px;height:115px;background:transparent;margin-left:194px;margin-top:-117px;}
#kennedy {width:75px;height:115px;background:transparent;margin-left:287px;margin-top:-117px;}
#johnson {width:75px;height:115px;background:transparent;margin-left:381px;margin-top:-117px;}
#nixon {width:75px;height:115px;background:transparent;margin-left:101px;margin-top:21px;}
#ford {width:75px;height:115px;background:transparent;margin-left:194px;margin-top:-117px;}
#carter {width:75px;height:115px;background:transparent;margin-left:287px;margin-top:-117px;}
#reagan {width:75px;height:115px;background:transparent;margin-left:381px;margin-top:-117px;}

Step 4: Setting up hover pop-up

With these divisions in place, I set out to add a pop-up information box to the right side of each row. Using the visibility:hidden attribute for the span and the visibility:visible attribute for the hover, I was able to ensure the information within each span would remain unseen until the correct division was hovered over.

To accomplish this, I set up the following division specifics, adjusting the left margin until the pop-ups appeared in the same general area for each hover section:

CODE

#truman span {visibility:hidden;display:inline;}
#truman:hover span {visibility:visible;display:block;position:absolute;padding:5px;font-weight:bold;border:3px solid red;background:navy;color:#ffffff;z-index:500;float:right;margin-left:400px;}

#eisenhower span {visibility:hidden;display:inline;}
#eisenhower:hover span {visibility:visible;display:block;position:absolute;padding:5px;font-weight:bold;border:3px solid red;background:navy;color:#ffffff;z-index:500;float:right;margin-left:307px;}

#kennedy span {visibility:hidden;display:inline;}
#kennedy:hover span {visibility:visible;display:block;position:absolute;padding:5px;font-weight:bold;border:3px solid red;background:navy;color:#ffffff;z-index:500;float:right;margin-left:214px;}

#johnson span {visibility:hidden;display:inline;}
#johnson:hover span {visibility:visible;display:block;position:absolute;padding:5px;font-weight:bold;border:3px solid red;background:navy;color:#ffffff;z-index:500;float:right;margin-left:121px;}

#nixon span {visibility:hidden;display:inline;}
#nixon:hover span {visibility:visible;display:block;position:absolute;padding:5px;font-weight:bold;border:3px solid red;background:navy;color:#ffffff;z-index:500;float:right;margin-left:400px;}

#ford span {visibility:hidden;display:inline;}
#ford:hover span {visibility:visible;display:block;position:absolute;padding:5px;font-weight:bold;border:3px solid red;background:navy;color:#ffffff;z-index:500;float:right;margin-left:307px;}

#carter span {visibility:hidden;display:inline;}
#carter:hover span {visibility:visible;display:block;position:absolute;padding:5px;font-weight:bold;border:3px solid red;background:navy;color:#ffffff;z-index:500;float:right;margin-left:214px;}

#reagan span {visibility:hidden;display:inline;}
#reagan:hover span {visibility:visible;display:block;position:absolute;padding:5px;font-weight:bold;border:3px solid red;background:navy;color:#ffffff;z-index:500;float:right;margin-left:121px;}

Step 5: Completing the HTML

I then added the following HTML containing the desired information about each President (inside the wrapper, above the details):

HTML

<div id="truman"><span>Harry S. Truman<br />33rd President of the USA<br />Democrat<br />b. 05/08/1884 - d. 12/26/1972</span></div>
<div id="eisenhower"><span>Dwight D. Eisenhower<br />34th President of the USA<br />Republican<br />b. 10/14/1890 - d. 03/28/1969</span></div>
<div id="kennedy"><span>John F. Kennedy<br />35th President of the USA<br />Democrat<br />b. 05/29/1917 - d. 11/22/1963</span></div>
<div id="johnson"><span>Lyndon B. Johnson<br />36th President of the USA<br />Democrat<br />b. 08/27/1908 - d. 01/22/1973</span></div>
<div id="nixon"><span>Richard M. Nixon<br />37th President of the USA<br />Republican<br />b. 01/09/1913 - d. 04/22/1994</span></div>
<div id="ford"><span>Gerald R. Ford<br />38th President of the USA<br />Republican<br />b. 07/14/1913 - d. 12/26/2006</span></div>
<div id="carter"><span>Jimmy Carter<br />39th President of the USA<br />Democrat<br />b. 10/01/1924 - d. N/A</span></div>
<div id="reagan"><span>Ronald Reagan<br />40th President of the USA<br />Republican<br />b. 02/06/1911 - d. 06/05/2004</span></div>

And simple as that - with no scripting - you've created your own study guide to eight former US Presidents. It could be modified for use as an image gallery, a company directory, or any number of other uses.