Hi,
On a site I am working on, I have set the active state for these links and it only seems to change states while I am clicking the link.
I am wanting a link to change state when it has been clicked, then change back to it’s original state when another link has been clicked.
Is this what a:active does? Do I need to do this with javascript instead?
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toastmasters International | Australia, New Zealan and Papua New Guinea Site</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/videobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/videobox.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="MM_preloadImages('images/map-region-72.jpg','images/map-region-73.jpg','images/map-region-70.jpg','images/map-region-69.jpg')">
<div id="wrap">
<div id="header">
</div>
<div id="content">
<div id="info">
<div id="menu">
<div onclick="reveal('first');"><a class="button" href="" ><span>TOASTMASTERS AT A GLANCE</span></a></div>
<div onclick="reveal('second');"><a class="button" href="" ><span>BECOME A BETTER SPEAKER</span></a></div>
<div onclick="reveal('third');"><a class="button" href="" ><span>BECOME A BETTER LEADER</span></a></div>
<div onclick="reveal('fourth');"><a class="button" href="" ><span>NURTURING ENVIRONMENT</span></a></div>
<div onclick="reveal('fifth');"><a class="button" href="" ><span>VISIT A CLUB</span></a></div>
<div onclick="reveal('sixth');"><a class="button" href="" ><span>JOINING A CLUB</span></a></div>
</div>
<div class="textBox" id="zero">
<p>There are over 800 clubs with over 17,000 members throughout Australia, New Zealand and Papua New Guinea.</p><p>Toastmasters International is a not for profit training organisation that focuses on communication and leadership development.<br />
</p>
</div>
<div class="textBox" id="first">
<p>There are over 800 clubs with over 17,000 members throughout Australia, New Zealand and Papua New Guinea.</p><p>Toastmasters International is a not for profit training organisation that focuses on communication and leadership development.</p><br />
</div>
<div class="textBox" id="second">
<p>Toastmasters will give you the skills and confidence you need to effectively express yourself in any situation. By learning to effectively formulate and convey your ideas, you open a world of possibilities. You will be more persuasive and confident whether speaking with your colleagues, your community or your family.<br />
</p>
</div>
<div class="textBox" id="third">
<p>Leadership is the art of understanding the needs of others and guiding them to achieve common goals. To do so, you need to communicate effectively and inspire people to work as a team. Toastmasters can help you do both. Learn leadership theories and put them into practice with the clubs so that you can, in turn, apply them to everyday situations.<br />
</p>
</div>
<div class="textBox" id="fourth">
<p>The environment at a Toastmasters club is friendly and supportive, and the self paced programme allows you to build confidence with each speaking and leadership assignment.<br />
</p>
</div>
<div class="textBox" id="fifth">Each club has its own unique style. Some clubs may have a particular focus –such as the aged, the young corporate or recipients of the Maguire programme - , or may have entry requirements – employees of sponsoring businesses or level of speaking ability. Most clubs meet every couple of weeks for 1-3 hours. The meetings are run in a structured way so everyone may have an opportunity to speak. You are welcome to visit clubs in your area to see how they work and which one suits you. We recommend you contact them beforehand in case they are having a special event away from the normal venue.</div>
<div class="textBox" id="sixth">
<p>When you join a club, you will receive your New Member Kit and be assigned a mentor to help you to settle in and get through your first speaking roles.</p>
<p>When you apply yourself at a Toastmasters club, you will be amazed at how quickly your communication and leadership skills improve.</p>
</div>
<div id="special">
<p><a class="buttonSpecial"><span>Toastmasters VideoS</span></a><br />
<a class="subLinks" href="http://www.youtube.com/v/gFEkW1jucg0&hl=en_US&fs=1&" rel="vidbox" title="Interview on Summer Money"><br />
Interview on Summer Money</a><br />
<a class="subLinks" href="http://www.youtube.com/v/pTCFIxh2RmA&hl=en_US&fs=1&" rel="vidbox" title="Toastmasters Promo Video">Toastmasters Promo Video</a>
<br />
<br />
</div>
<div id="special">
<a href="http://reports.toastmasters.org/findaclub/default.cfm?Country=Australia" target="_blank" class="buttonSpecial" ><span>find a club</span></a>
</div>
</div>
<div id="nav-map"><img src="images/map-region.jpg" alt="Toastmasters Region 12" width="400" height="340" usemap="#map" id="image-map" title="" onmouseover="MM_swapImage('image-map','','images/map-region-72.jpg',1)" onmouseout="MM_swapImgRestore()" border="0" />
<map name="map">
<area shape="poly" coords="302,332,323,292,336,284,350,266,358,252,352,226,351,209,382,239,396,246,389,278,351,309,325,347,312,340" href="http://www.toastmasters.org.nz/" target="_blank" alt="District 72 | New Zealand" class="72" onmouseover="MM_swapImage('image-map','','images/map-region-72.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="rect" coords="301,68,400,89" href="http://www.d73.toastmasters.org.au/" target="_blank" alt="District 73 | Western Australia, South Australia, Victoria, Tasmania" class="73" onmouseover="MM_swapImage('image-map','','images/map-region-73.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="rect" coords="301,44,400,66" href="http://www.toastmasters.org.nz/" target="_blank" alt="District 72 | New Zealand" class="72" onmouseover="MM_swapImage('image-map','','images/map-region-72.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="rect" coords="301,21,399,42" href="http://www.d70toastmasters.org/" target="_blank" alt="District 70 | New South Wales, Australia Capital Territory" class="70" onmouseover="MM_swapImage('image-map','','images/map-region-70.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="rect" coords="301,-2,400,20" href="http://www.toastmastersd69.org/" target="_blank" alt="District 69 | Queensland, Northern Territory, Papua New Guinea" class="69" onmouseover="MM_swapImage('image-map','','images/map-region-69.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="poly" coords="297,232,297,206,251,210,207,210,205,254,216,260,234,272,258,275,270,289,280,256" href="http://www.d70toastmasters.org/" target="_blank" alt="District 70 | New South Wales, Australia Capital Territory" class="70" onmouseover="MM_swapImage('image-map','','images/map-region-70.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="poly" coords="113,93,112,186,206,187,208,210,276,206,296,205,296,180,248,120,232,84,222,65,228,52,231,37,251,56,280,62,260,26,247,15,209,-2,203,15,205,41,205,49,212,65,202,117,163,93,167,74,151,67,136,68,117,81" href="http://www.toastmastersd69.org/" target="_blank" alt="District 69 | Queensland, Northern Territory, Papua New Guinea" class="69" onmouseover="MM_swapImage('image-map','','images/map-region-69.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="poly" coords="112,97,101,83,86,99,64,116,-4,159,-2,204,11,264,63,263,110,244,136,241,179,267,208,290,236,293,237,315,250,329,269,289,256,275,236,275,206,254,205,203,207,185,114,188,111,98" href="http://www.d73.toastmasters.org.au/" target="_blank" alt="District 73 | Western Australia, South Australia, Victoria, Tasmania" class="73" onmouseover="MM_swapImage('image-map','','images/map-region-73.jpg',1)" onmouseout="MM_swapImgRestore()" />
</map>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
{margin:0;
padding:0;}
body,
html {
color:#333;
background:#fff;
border-style: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
}
#wrap {
width:850px;
background-color: #FFF;
margin-left: 200px;
}
#menu div {
cursor:pointer;
}
#zero {
display:none;
}
#image-map a{
text-decoration: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#header {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
height: 250px;
width: 850px;
}
#info {
float:left;
width:435px;
height:450px;
background: #fff;
}
#menu{
width: 170px;
float: left;
padding-top: 15px;
}
.textBox{
width:200px;
height:280px;
float:left;
background: url('images/textBox.gif') no-repeat #fff;
margin:15px 0px 15px 10px;
padding: 15px 40px 5px 15px;
}
.textBox p {
padding: 0px;
margin: 0px;
font-size:13px;
line-height:18px;
overflow:auto;
}
#nav-map {
float:right;
width:400px;
/*height:340px;*/
padding:5px;
}
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a:link{}
a:visited{}
a:hover{}
a.buttonSpecial {
background: transparent url('images/buttonSpecial_a.gif') no-repeat scroll top right;
color: #fff;
display: block;
float: left;
height: 24px;
width:144px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
text-transform: uppercase;
}
a.buttonSpecial span {
background: transparent url('images/buttonSpecial_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 10px;
}
a.buttonSpecial:visited a.buttonSpecial:hover{
background-position: bottom right;
color: #fff;
outline: none; /* hide dotted outline in Firefox */
}
a.buttonspecial:visited a.buttonSpecial:hover span {
background-position: bottom left;
padding: 6px 0 4px 10px; /* push text down 1px */
}
a.button {
background: transparent url('images/button_a.gif') no-repeat scroll top right;
color: #231F20;
/*display: block;*/
float: left;
height: 24px;
width: 154px;
margin-right: 6px;
padding-right: 10px; /* sliding doors padding */
text-decoration: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
text-transform: uppercase;
margin-top: 10px;
}
a.button span {
background: transparent url('images/button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 10px;
}
a.button:active {
background-position: bottom right;
color: #FFF;
outline: none; /* hide dotted outline in Firefox */
}
a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 10px; /* push text down 1px */
}
#footer {
background:url(images/footer.jpg);
clear:both;
height: 131px;
}
#special{
float:left;
width:350px;
margin-right:50px;
/*display: block;*/
margin-top: -15px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 180px;
}
.subLinks{
font-size: 12px;
color: #333;
text-decoration: underline;
line-height: 18px;
text-indent: 5px;
}
Thanks
Lee
