SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Tasmania
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a:active question

    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
    Code HTML4Strict:
    <!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
    Code 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
    "The greatest good you can do
    for another is not just share
    your riches, but to reveal to
    him, his own." -Benjamin Disraeli

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,597
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    The active state is set for the duration of the time you hold down the mouse button or if the element has the focus for the duration of holding down the enter key.

    To be able to change the appearance based on which was last clicked on or tabbed to use a:focus instead.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Tasmania
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    The active state is set for the duration of the time you hold down the mouse button or if the element has the focus for the duration of holding down the enter key.

    To be able to change the appearance based on which was last clicked on or tabbed to use a:focus instead.
    Thanks! All better now.
    I just have to sort out all my javascript issues.
    "The greatest good you can do
    for another is not just share
    your riches, but to reveal to
    him, his own." -Benjamin Disraeli


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •