SitePoint Sponsor

User Tag List

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

    Hiding list menu for accessibility

    Even though it is an accessibility problem, I think it can be solved with css, am just not sure how.

    I have a roll over image map, that I am wanting to navigate with tab. Is their a way to 'hide' this behind the map, without it interfering?

    This is what I have done so far. http://loveleecreations.com/testsite/region12/
    I thought I could do it the same way the h1 is hidden behind the header, but obviously there are some large gaps in my understanding, as that didn't work.

    The corresponding html code :
    HTML Code:
    <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>
         <ul id="access">Toastmasters Australia Regions
        <li> <a href="http://www.toastmastersd69.org" target="_blank" class="hidden"><span>Distric 69 - District 69 | Queensland, Northern Territory, Papua New Guinea</span></a></li>
        <li><a href="http://www.d73.toastmasters.org.au/" target="_blank" class="hidden">District 73 | Western Australia, South Australia, Victoria, Tasmania</a></li>
        <li><a href="http://www.toastmasters.org.nz/" target="_blank" class="hidden">District 72 | New Zealand</a></li>
        <li><a href="http://www.d70toastmasters.org/" target="_blank" class="hidden">District 70 | New South Wales, Australia Capital Territory</a></li>
        </ul>
       
    </div>
    The corresponding CSS
    Code CSS:
    #nav-map {
    float:right;
    width:400px;
    padding:5px;
    }
     
     
    ul, ul span {
    				height: 250px;
    				width: 300px;
    			}
    				ul span {
    					display: block;
    				/*	margin-bottom: -160px;*/
    					position: relative;
    					z-index: 1;
    				}
     
    				#nav-map ul {
    	position: absolute;
    	top: 300px;
    	margin-left: 0px;
    				}

    Thanks for reading!

    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
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You COULD give the tab a negative z-index to have it slide under yes?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •