Page 1 of 1

Hidden DIVs for interactive content Rate Topic: -----

#1 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 6167
  • View blog
  • Posts: 10,655
  • Joined: 28-September 07

Post icon  Posted 05 May 2008 - 05:31 AM

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:

Posted 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.

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.

#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>
<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.

#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:

#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):

<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.

Is This A Good Question/Topic? 0
  • +

Replies To: Hidden DIVs for interactive content

#2 macosxnerd101  Icon User is offline

  • Self-Trained Economist
  • member icon




Reputation: 10646
  • View blog
  • Posts: 39,539
  • Joined: 27-December 08

Posted 01 December 2009 - 06:27 PM

Awesome tutorial! I'm sure I'll be able to put what I learn here into action. It is a great alternative to JS or some other scripting language.

View PostBenignDesign, on 5 May, 2008 - 08:31 AM, said:

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:

Posted 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.

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.

#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>
<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.

#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:

#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):

<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.

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1