Beautiful web template is what everyone expects to have in their site. Moreover making it is much more challenging. Previously websites were designed in tabled form. Later the tabled forms were replaced by Cascading Style Sheets (CSS).
CSS is the versatile method to design website, while HTML as the platform. Today, for interactive websites, mostly flash based movie files are used. However Flash is not based on any HTML program. Plus, it needs additional plug-in and applets in browser to view the flash based website. This is the main backward feature of flash based websites.
However with the release of new HTML 5 and CSS, it is now possible to achieve interactive websites more versatile than Flash based interactive websites.
Today, in this post, we’ll discuss about few methods that we can apply in HTML and CSS only to achieve highly dynamic and interactive web templates.
Using pseudo classes
CSS pseudo-classes are used to add special effects to some selectors. For example, some popular and widely used pseudo classes are:
:link, :visited, :hover, :active.
Following example demonstrates the use of pseudo class in <a > tags.
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
It can also be applied to lists and divisions to add more hover effects to the web page.
For example, the following images shows how it can be applied to divisions to add content highlight effect.
We’ used hover to one of the class for division.
Here is the basic CSS code:
<style>.home {Background:#333;}.home:hover {background:#0C6;}</style>
And for the HTML part:
<div>Every contents located here will have mouse highlighting effect.</div>
Method to add image link hover effect
Bascially, we apply background image to a:link and another background image to a:hover to have background image hover effect in CSS. It is ok with all of the browsers as most of them supports it.
But incase you are using large size image then you’ll have a problem here. What exactly the above method does is that, whenever the link is in normal state (i.e. mouse is not over the link) the browser will in default load the background image specified in a:link CSS class, but when mouse is hovered over the link, it will load background image from a:hover class. If the image is larger in size then it will take time to load.
Let us discuss alternative method which will load both of the images at the of page load.
Look at the HTML code below:
< a href="link.html"><img alt="image" src="images/image.png" class="nohover" /><img alt="imagehover" src="images/image.png" class="hover" /></a>
We have two images inside <a> tag each of the image have specific class defined.
We can hide one of the image when hovering with the help of CSS.
img.nohover {border:0}img.hover {border:0;display:none}a:hover img.hover {display:inline}a:hover img.nohover {display:none}
In above four different CSS functions, at first when no mouse is hovered over the link image, the image defined with class “nohover” will take in action, resulting only one image to be viewed. In other words, one image is set to hidden while other one is set to visible. We do this by the help of display:none;
Now when a link image is hovered, we’ll apply display:none; to the image that must be hidden when hovered. And for the one that must be visible, we’ll apply display:inline;
Copy and try the above codes. Play with it, you’ll learn more when you research it yourself.
This works in all the version of browsers, so you won’t have cross browser compatibility problem.
The rise of CSS3 have made more thing possible, the above tutorial is classified under CSS 2.1 version.
In this way you can utilize the pseudo class hover to make your web page much more user friendly and interactive.
No comments:
Post a Comment