4:14 PM Use of CSS for Image Rollover |
Trend of online business has increased the demand of web
designers largely. You can find claims of a good website designer,
but not all the claims are supported by the skill related to web designing. Here are some useful tips that can help to web
designers in making their design efficient. CSS is of huge significance in adding rollovers and other
illustrative images to web pages. There is no need to use JavaScript in it. In
order to make a rollover in CSS, you need to use hover pseudo-selector. Hover
can be applied to any HTML tag and all browsers, but Internet Explorer 6 will
show the correct rollover effect. Here are some instructions of using CSS for image roller. 1.
Make
an HTML file or open your file in an editor. Put <div> and </div>
tags between the <body> and </body> tags. However, avoid putting
anything between the <div> tags. Your <div> tags should seem like
this: <div id="some-name"></div> 2.
Add
<style> and </style> tags among the <head> and </head>
tags of your HTML file. 3.
Alter
the path between the parentheses to the path of your original image. Modify the
width and the height to equalize the dimensions of the image in pixels. A
500-pixel width seems as "width: 500px;" in CSS. 4.
Add a hover state to the <div> tag in CSS code. Alter the
path between the parentheses to the path to your rollover image. This image
will show when a customer hovers the mouse needle over the <div> element. |
|
|
| Total comments: 0 | |