Page Navigation Experiments.

Text blocks as a link: Probably the easiest and most basic navigation method employed is to simply use a block of text as a link. This can be controlled by style sheets as in the examples used on this page or simply left to their default settings. The links can be employed to point to another web page, a picture or any form of media such as downloadable documents or programs. It is usual to have some indication to show what text is a link and what links have been visited usually by an underline, text colour change or colour highlight around the text just to indicate that the text block has a function.	Text As A Link To Steve'sZone. Text As A Link To A Picture. Text As A Link To A Download.
Button links: There are HTML codes that tell browsers to display a button and again employing the use of them is fairly simple once you know the code layout an example of which looks as follows... <input name= "steveszone" type= "button" class= "style1" onclick= "window.location= 'http:/www. steveszone.co.uk'" value= "Button Link To Steve'sZone." /> This will generate the first button in the examples opposite. <input name=""/> refers to the button. <type=""/> tells the browser to generate a button. <class=""/> refers to a text style or style sheet. <onclick=""/> activates the link destination. <value=""/> is the text that appears on the button.
Pictures as a link: Another simple method to navigate to different areas within a site is to use pictures as links. This is easily achieved by HTML code refering to a specific file or location using <a href=> tags, the three pictures opposite give the same sort of destination link examples as the previous text block and button link examples the link code is as follows... <a href= "navigation_page_pictures/picture_link_example_2.jpg"><img src= "navigation _page _pictures/picture_lizard_tn.png" alt= "Link To A Picture." width= "181" height= "25" /></a> The <a href=""/> refers to the destination image and file of the link. The <img=""/> <src=""/> <alt=""/> <width=""/> and <height=""/> tags refer to the attributes of the image and file source being linked from, (the picture on the page).	Link to Steve's Zone. Link to a picture. Link to a Download.
Slideshow Picture links: Using Images as the link medium again only this time the images roll round as a slideshow. When the desired imaged is passed over with the mouse pointer it pauses on that picture indicating the link destination and when clicked upon it will launch to said destination. The three images in the slideshow opposite do the same functions as the previous examples, (Page, Picture & Download). The slideshow itself is controlled by some Javascript code obtained from Dynamic Drive which was then adjusted to suit certain link conditions. To see the code used and more other excellent examples visit the Dynamic Drive web site and follow the tutorials for your desired effect.	Slideshow images link to a specific destination.
Switch Menu: The design of this navigation method is one of the many examples I found on the Dynamic Drive site. I was going to use it on the main Index page of my site but it made it look to messy when included with the navigation buttons that I already use so I decided against it but I kept the idea in mind for possible future use elsewhere. The idea is to click on the title bar to reveal various links in the form of a dropdown menu, to make it more interesting I have tweaked it a bit to use the three styles of link that I have used previously, (Text, Button & Picture links) which perform the same function as previous examples. Also included is a fourth bar, "Cool Links" which links to some of my favourite web pages. Once again this method required the use of Cascading style sheets and Javascript code to make it run, I modified the CSS to suit my own needs but the Javascript code was left as the designer originally constructed it.	Text Links: Steve'sZone Link. Picture Link. Download Link. Button Links: Picture Links: Cool Links: Gamestone. Flickr. Dynamic Drive. Cool Text. Google. When clicked each row expands to reveal specific links from dropdown selections.

Hosted on

All trademarks and copyrighted material are property of their respective owners