|
|
CSS/HTML Mouseover tutorial
Difficulty: Advanced |
| Category: FPSB > Other/Misc | Author(s): Arez |
This tutorial assumes that you have at least basic knowledge pertaining to HTML as well as CSS.
In this tutorial I am going to teach you how to make an image mouseover effect on your website without using either javascript or flash. More specifically for links. In the conclusion of our tutorial the resulting effect will be: LINK.
To begin, let's create the two images we will be using for the link, I don't recommend doing this with the image size I've chosen, it would be better to use this effect as a button of some sort.
IMAGE 1
IMAGE 2
Generally, you would use code like so:
DO NOT USE!
a.image {
display: block;
width: 200px;
height: 200px;
background-image: url('image.png');
background-repeat: no-repeat;
}
a.image:hover {
display: block;
width: 200px;
height: 200px;
background-image: url('image2.png');
background-repeat: no-repeat;
}
However, HTML will not parse divider tags that use background-image in a href tags(I mean as an a href, not inside the tag itself). So, we need to innovate. Inside of your style.css file put the following code:
div#customlink {
display: block;
width: IMAGE WIDTH FOLLOWED IMMEDIATELY BY px;
height: IMAGE HEIGHT FOLLOWED IMMEDIATELY BY px;
background-image: url('URL OF IMAGE BEFORE MOUSEOVER');
background-repeat: no-repeat;
float:left;
}
div#customlink:visited {
display: block;
width: IMAGE WIDTH FOLLOWED IMMEDIATELY BY px;
height: IMAGE HEIGHT FOLLOWED IMMEDIATELY BY px;
background-image: url('URL OF IMAGE BEFORE MOUSEOVER');
background-repeat: no-repeat;
float:left;
}
div#customlink:hover {
display: block;
width: IMAGE WIDTH FOLLOWED IMMEDIATELY BY px;
height: IMAGE HEIGHT FOLLOWED IMMEDIATELY BY px;
background-image: url('URL OF IMAGE AFTER MOUSEOVER');
background-repeat: no-repeat;
float:left;
}
Now, all you need to do is use the following HTML inside of your index.html(or whatever .html) file.
<a href="http://www.fpsbanana.com/members/190859"><div id="tutex"></div></a>
Once you input that into where ever you want it to go it should work properly. Feel free to leave me a message if it doesn't. I hope you enjoyed this simple little tutorial, if you have any basic HTML or CSS questions feel free to ask those as well, I don't mind answering. You're outcome should be similar to this, depending on which images you used. |
| Added: 3 months ago | Tags: css, mouseover, website |
|
 Add Feedback Provide constructive feedback. What is "constructive"?You cannot post yet!Get involved on FPSB by posting your thoughts. Give authors your feedback to help them develop. To post in this submission register or login. |
 You cannot assess yet!Moderating FPSB is in your hands - when you assess a submission your vote determines its success or failure. To vote on this submission register or login. This Tutorial in a nutshell...  No stamps recordedYou cannot stamp yet!Stamps let you apply characteristics to submissions to help others understand them. To stamp this submission register or login.
 |
+1 Studio of Skill
Gaining XP since 1776 |
| Membership: Invite Only |
| Primary Skills: Graphic Design, Modelling, Texturing |
| Inception: 5 months ago |
Want more? Find related tuts. |
Subscribe
