Green Finch
Image Hovers
This will teach you how to make your links have image hovers. Don't know what I'm talking about? Check out the navigation on my Alakazam div. That's what this tutorial will teach you how to do. Some decent HTML knowledge is essential; you're going to need to know the basics.1. First, we need to make the image for the link. Just open a blank image on whatever program you use. Put what you want the image to always look like at the top, and put what you want the image to look like on the hover on the bottom. Don't put it directly on the bottom though. Here's an example:
Make sure that everything is lined up correctly or else your link will be all jumpy and weird. Zooming in to the image can help you with that.
2. Next, put this code somewhere between your style tags of your stylesheet.
3. The part under navigation deals with ALL the links in your navigation. Just estimate what the size of all your links together might be, and put that for the width and the height. Then just do the positioning.
4. I've titled the next section link, but you might want to change that to the actual name of your link, especially if you're going to have more than one link. Upload your image and put the link where it says URLHERE.
5. Change the width to the actual width of your link image, but change the height to HALF of the actual height. You may need to play with that number after you have the link set up. Don't mess with anything else in this section of the code.
6. Place this code in your I'd Like To Meet section if you're working with myspace, or after your head for websites.
7. Put in your link where it says LINK HERE and change the class to whatever you named the section in the coding earlier.
8. And there you have it. If the link doesn't come out correctly, you may need to work with the height and the width of certain things. You may even have to go back and alter your image a bit. If you want to add more links, duplicate the everything in the first part of the code EXCEPT for the navigation part and change the name of the sections. In the second part of the code, just copy the link part of it and paste it within the div tags. Don't forget to change the class to whatever you named the new link in the first section. :]
Other
|
|
