HTML anchor tags are so much more useful than just linking to another page!
Check out these three demos for awesome and simple things you can do using HTML anchors, iframes and targets:
Restaurant Menus (Or any new content you want to load without leaving the page)
The HTML Set-up
For the first two demos, you will use four HTML elements together: a, iframe, name and target.
Say you want a restaurant website to have a “Menu” page. Within the menu page, you want the user to be able to switch between the breakfast, lunch and dinner menus without leaving the page. Example:
Here’s how you do it:
1. Create your menu page like any other page on the restaurant’s site, but leave space for the content you want to change. You will put an iframe in that space.
2. Create small html files with the variable content, such has breakfast.html which would just have a simple unsorted list or table with your breakfast menu items.
3. On your regular page, you will need links which the user will click when they want to see new content. In the restaurant example, you could have a navigation at the top of the screen with links to “Breakfast Menu”, “Lunch Menu” and “Dinner Menu”
4. Now you just need to get all of these elements to work together.
Here is the structure:
<div id="my_links"><a href="breakfast.html" target="my_target_area">Breakfast Menu</a> <a href="lunch.html" target="my_target_area">Lunch Menu</a> <a href="dinner.html" target="my_target_area">Dinner Menu</a></div>
Reloadable Content Area:
<iframe name="my_target_area" src="breakfast.html" width="320" height="240"></iframe>
That’s it! You just specify a target area in your anchor links. When a user clicks that link, the browser will look for the selector with the same name as the target, and instead of loading a new page, it will load the content in the specified area. The important thing here is that the anchor “target” matches the iframe “name.”
HTML Only Image Gallery
This works exactly as above, except in your link section, insert a small image instead of the link text:
<a href="breakfast.html" target="my_target_area">Breakfast Menu</a>
<a href="breakfast.html" target="my_target_area"><img src="scrambled_eggs.jpg" alt="" /></a>
Your html file (breakfast.html) will only have an image on it.