Forum Moderators: open
Here's the overview. I've got several different lists of people divided up into groups. I want people to know who's in each group by mousing over the name of the group.
To make this pretty, I thought I'd use a six-pointed asterisk with circles at the end of each stick. When a user rollsover one of the circles in the asterisk, I'd like it to change an image located elsewhere on the page. This image will basically be a list of the names so that when they mouseover group 1's name, it shows the list of those people, then when they mouseover group 2's, it shows the list that corresponds to group 2's. The easiest way I imagine to do this is make a small gif w/ all their names in a list. That gif will be in a static location and changed based on where in the imagemap they rollover.
Does this make sense? Is this way too novice for this forum?
Thank you again for all your help; this forum (and others like it) have been a saving grace for me over the years as I get punted web projects I'm not really trained for (darn Classics major!).
<div class="group">
<h2>Group A</h2>
<ul>
<li>Person A1</li>
<li>Person A2</li>
<li>Person A3</li>
</ul>
</div>
<div class="group">
<h2>Group B</h2>
<ul>
<li>Person B1</li>
<li>Person B2</li>
</ul>
</div>
<div class="group">
<h2>Group C</h2>
<ul>
<li>Person C1</li>
<li>Person C2</li>
<li>Person C3</li>
<li>Person C4</li>
<li>Person C5</li>
</ul>
</div>
<div class="group">
<h2>Group D</h2>
<ul>
<li>Person D1</li>
<li>Person D2</li>
<li>Person D3</li>
<li>Person D4</li>
<li>Person D5</li>
</ul>
</div>
<div class="group">
<h2>Group E</h2>
<ul>
<li>Person E1</li>
<li>Person E2</li>
<li>Person E3</li>
<li>Person E4</li>
<li>Person E5</li>
</ul>
</div>
<div class="group">
<h2>Group F</h2>
<ul>
<li>Person F1</li>
<li>Person F2</li>
<li>Person F3</li>
<li>Person F4</li>
<li>Person F5</li>
</ul>
</div>
This is semantic, easy to maintain, and accessible to all. When the list changes, you don't need to change any images, you only need to replace the content within the list. These lists would be visible by default. Since I want to enhance this with JavaScript, I'm going to use JavaScript to handle the hiding and unhiding (or more accurately, I'll use JavaScript to change the class, and I'll defined the hidden and visible states (presentation) with CSS classes).
Below is my working example. Note, I've decided to use the Yahoo UI Library [developer.yahoo.com]'s Event [developer.yahoo.com] and DOM [developer.yahoo.com] Utilities to save me a lot of work (and to ensure cross-browser compatibility). Hope you find this helpful.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<style type="text/css">
.hidden {
display: none;
}
.shown {
display: block;
}
.grouplink {
position: absolute;
display: block;
padding: 0;
border: 1px solid red;
width: 100px;
height: 100px;
overflow: hidden;
background: #eee; /* Replace with your circle background image */
text-decoration: none;
}
.grouptree {
position: relative;
height: 275px;
width: 400px;
overflow: hidden;
padding: 1px;
background: #ccc; /* Replace with your Asterisk background image */
}
#grouplink0 {
left: 0px;
top: 25px;
}
#grouplink1 {
left: 150px;
top: 0px;
}
#grouplink2 {
left: 300px;
top: 25px;
}
#grouplink3 {
left: 0px;
top: 150px;
}
#grouplink4 {
left: 150px;
top: 175px;
}
#grouplink5 {
left: 300px;
top: 150px;
}
</style>
<title></title>
</head>
<body>
<div id="container">
<div class="group">
<h2>Group A</h2>
<ul>
<li>Person A1</li>
<li>Person A2</li>
<li>Person A3</li>
</ul>
</div>
<div class="group">
<h2>Group B</h2>
<ul>
<li>Person B1</li>
<li>Person B2</li>
</ul>
</div>
<div class="group">
<h2>Group C</h2>
<ul>
<li>Person C1</li>
<li>Person C2</li>
<li>Person C3</li>
<li>Person C4</li>
<li>Person C5</li>
</ul>
</div>
<div class="group">
<h2>Group D</h2>
<ul>
<li>Person D1</li>
<li>Person D2</li>
<li>Person D3</li>
<li>Person D4</li>
<li>Person D5</li>
</ul>
</div>
<div class="group">
<h2>Group E</h2>
<ul>
<li>Person E1</li>
<li>Person E2</li>
<li>Person E3</li>
<li>Person E4</li>
<li>Person E5</li>
</ul>
</div>
<div class="group">
<h2>Group F</h2>
<ul>
<li>Person F1</li>
<li>Person F2</li>
<li>Person F3</li>
<li>Person F4</li>
<li>Person F5</li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function() {
var $E = YAHOO.util.Event;
var $D = YAHOO.util.Dom;
var i, aEl, enhancedContainer;
var groups = $D.getElementsByClassName('group', 'div', 'container');
// Hide the original semantic groups. Want this to happen as early as possible
$D.addClass(groups, 'hidden');
// Create the container. This is where the 'asterisk' shaped image will be.
// For this example, I'm inserting it before the first group node, but you
// could put this anywhere. Note, I decided to use absolute positioning
// for positioning inside this node, but you could apply your own styles.
enhancedContainer = groups[0].parentNode.insertBefore(document.createElement('div'), groups[0]);
$D.addClass(enhancedContainer, 'grouptree');
/**
* The onmouseover handler for our new enhanced links
* @param {Event} e The event that triggered this
* @param {Integer} idx The index number into the groups array for the group
* that this is to be shown.
*/
function aOnMouseOver(e, idx) {
$E.stopEvent(e);
// Hide all groups except the one we want
$D.replaceClass(groups, 'shown', 'hidden');
$D.replaceClass(groups[idx], 'hidden', 'shown');
}
// Create links for each group
for (i = 0; i < groups.length; i++) {
aEl = document.createElement('a');
aEl.href = '#';
aEl.id = 'grouplink' + i;
$D.addClass(aEl, 'grouplink');
aEl.appendChild(document.createTextNode(groups[i].getElementsByTagName('h2')[0].innerHTML));
$E.on(aEl, 'mouseover', aOnMouseOver, i );
// Put the link into the document. Use CSS to position it into place
enhancedContainer.appendChild(aEl);
}
});
</script>
</body>
</html>
Thank you, thank you, thank you!
