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:
Step 1: Setting up the imageI 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 layoutI 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 divisionsFrom 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-upWith 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 HTMLI 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.
Hidden DIVs for interactive content
5 May, 2008 - 05:31 AM
| 