Archive for the ‘HTML’ Category
How and why you should use anchor tags
This is one of those HTML things I rarely use. So I always have to go hunt to figure out how to use when I need them. Anchor links bring you to a section of a document. Let’s say you have this huge list of links. You don’t want to dump someone at the top of a long list that is sorted by subject when you can send them straight to that subject area. Or if you have written the Great American Novel all on one page, you could provide anchor links to individual chapters.
In the long page you create anchors:
<a name=”chapterone”>Chapter One</a>
To send someone straight to Chapter One create this link:
<a href=”http://greatamericannovel.com/index.html#chapterone”> Great American Novel: Chapter One</a>
I use them on the category links to your left. Click on a category link and it will take you to the anchor link for that category on the very large archives page.
How to animate a link on mouse over
This effect is much cooler if you use small gifs. I used large images in the Animate link on mouse over example just to make it easier for you to see what I am doing.
When the mouse hovers over the link, you see the animation. When the mouse is not over the link you see a still image. The best examples of this I have seen use small still image as a background, and a copy of that that has sparkles that appear and disappear when the mouse hovers.
You need two gifs; one a still image, and one animated version of that still image:
You can just drag these two images I used to your desktop to play with.
Here is the HTML/CSS for this example:
<html>
<head>
<title>Animated link mouse over example</title>
<style type=”text/css”>
#link {
position: absolute;
top: 100px;
left: 100px;
}
a {
background: url(animate-link-still.gif) no-repeat center;
height: 256px;
width: 256px;
padding: 125px;
}
a:hover{
background: url(animate-link-rotate.gif) no-repeat center;
}
</style>
</head>
<body>
<div id=”link”>
* Note: make the height and width of the link the same as your image size.
