SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Rollover Buttons

    As a hobby i have created my first website...

    www.northumberland-coast.co.uk

    Can any of the group give advice on the following...

    The left side site navigation menu consists of 36 image buttons.

    To speed up loading time, how can i change the navigation buttons
    from the 36 i now use to only 2 [off and over] buttons.
    Wishing to add the text on top of the blank buttons, doing this will allow
    much more flexibility with font style etc.

    I have had this 2 button set-up working, however i get a JavaScript
    error when executing the navigation.

    Many thanks if you are able to help out___Neil.

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by neil665
    To speed up loading time, how can i change the navigation buttons from the 36 i now use to only 2
    I've got it down to one. How's that? DEMO
    Code:
    <html>
    <head>
    	<title>MouseOver Buttons</title>
    	<style type="text/css">
    	<!--
    	 body{
    		background: #FFCC66;
    	 }
    	 #signPostTop{
    		background-color: #FFFFCC;
    		border-left: solid 1px black;
    		border-right: solid 1px black;
    		border-top: solid 1px black;
    		border-bottom: 0px;
    		font-size: 0px;
    		width: 9px;
    		height: 10px;
    	 }
    	 .signPost{
    		background-color: #FFFFCC;
    		border-left: solid 1px black;
    		border-right: solid 1px #FFFFCC;
    		border-top: 0px;
    		border-bottom: 0px;
    		width: 8px;
    		height: 21px;
    		}
    	 #signPostBottom{
    		background-color: #FFFFCC;
    		border-left: solid 1px black;
    		border-right: solid 1px black;
    		border-top: 0px;
    		border-bottom: solid 1px black;
    		font-size: 0px;
    		width: 9px;
    		height: 10px;
    	 }
    	 #TheSign a{
    		background-color: #FFFF00;
    		background-image: url('buttonClearBack.gif');
    		width: 108px;
    		height: 21px;
    		text-indent: 3px;
    		border-left: solid 2px black;
    		text-decoration: none;
    		font-weight: bold;
    		color: green;
    		}
    	 #TheSign a:active{
    		background-color: #FFFFCC;
    		border-left: solid 2px #FFFFCC;
    		color: blue;
    		}
    	 #TheSign a:hover{
    		background-color: #FFFFCC;
    		border-left: solid 2px #FFFFCC;
    		color: blue;
    		}
    	-->
    	</style>
    </head>
    <body>
    	<div id="TheSign"><!-- Class="AceOfBass" ;) //-->
    	 <div id="signPostTop"></div>
    	 <span class="signPost"></span><a href="#">Introduction</a><br>
    	 <span class="signPost"></span><a href="#">Berwick</a><br>
    	 <span class="signPost"></span><a href="#">Holy Island</a><br>
    	 <span class="signPost"></span><a href="#">Bamburgh</a><br>
    	 <span class="signPost"></span><a href="#">Seahouses</a><br>
    	 <span class="signPost"></span><a href="#">Farne Islands</a><br>
    	 <span class="signPost"></span><a href="#">Beadnell</a><br>
    	 <span class="signPost"></span><a href="#">Low Newton</a><br>
    	 <span class="signPost"></span><a href="#">Embleton</a><br>
    	 <span class="signPost"></span><a href="#">Craster</a><br>
    	 <span class="signPost"></span><a href="#">Boulmer</a><br>
    	 <span class="signPost"></span><a href="#">Alnmouth</a><br>
    	 <span class="signPost"></span><a href="#">Warkworth</a><br>
    	 <span class="signPost"></span><a href="#">Amble</a><br>
    	 <span class="signPost"></span><a href="#">Newbiggin</a><br>
    	 <span class="signPost"></span><a href="#">Blyth</a><br>
    	 <span class="signPost"></span><a href="#">Whitley Bay</a><br>
    	 <span class="signPost"></span><a href="#">Tynemouth</a><br>
    	 <div id="signPostBottom"></div>
    	</div>
    </body>
    </html>
    Unfortunately it can still be a bit flaky when the font is changed (I was hoping that someone could point out why). Also, it's only been tested in IE6 so anything could happen to the borders in NS


    Andy
    From the English nation to a US location.


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
  •