|
|
|
|
Like this code?
Show the author your appreciation.
|
|
| |
CSS Roll Over
This is very simple CSS script. Here we add rollover image effect to link. We use single image for that both Rollover & Rollout image are the part of same single image.
| #example{
height: 20px;
width: 158px;
text-indent: 10000px;
overflow: hidden;
background: url(test.gif) top left no-repeat;
display: block;
}
#example:hover{
background-position: bottom left;
} | |
This is a simple piece of code which does the work for us. We select the top portion of the image first and on rollover we select the bottom portion. Height and Width are defined in px.
Very simple script enjoy it..!!!
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>CSS Rollovers</TITLE>
<STYLE TYPE="TEXT/CSS">
/* CSS Rollovers */
#example{
height: 20px;
width: 158px;
text-indent: 10000px;
overflow: hidden;
background: url(test.gif) top left no-repeat;
display: block;
}
#example:hover{
background-position: bottom left;
}
#example1{
height: 30px;
width: 168px;
text-indent: 10000px;
overflow: hidden;
background: url(test1.gif) top left no-repeat;
display: block;
}
#example1:hover{
background-position: bottom left;
}
#example2{
height: 30px;
width: 168px;
text-indent: 10000px;
overflow: hidden;
background: url(test2.gif) top left no-repeat;
display: block;
}
#example2:hover{
background-position: bottom left;
}
</STYLE>
</HEAD>
<BODY>
<DIV><A HREF="http://www.geocities.com/cdy2k2002/site/index.htm" ID="example">Home</A></DIV>
<DIV><A HREF="http://www.geocities.com/cdy2k2002/site/index.htm" ID="example1">Home</A></DIV>
<DIV><A HREF="http://www.geocities.com/cdy2k2002/site/index.htm" ID="example2">Home</A></DIV>
</BODY>
</HTML> | |
|
|
| Simple Javascript CSS Digital Clock
Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design | | | How to keep your tables width stable even if you have long strings inside.
Categories : CSS, Web Browsers, HTML, Beginner Guides | | | CSS Vertical Navigator , With Coll CSS Look
Categories : CSS, Web Design, Beginner Guides | | | CSS Container BOX , with cool CSS Design
Categories : CSS, HTML, Web Design | | | Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides | | | CSS Buttons Styles
Categories : CSS, HTML, Beginner Guides | | | <FORM> causing an extra line in HTML output on IE
Categories : Beginner Guides, HTML, CSS | | | Why it is not possible to preset a value in a file upload field
Categories : HTML, Security, Filesystem, Beginner Guides | | | PHPtabZ.. PHP controlled CSS Tab Menu
Categories : PHP, CSS, Web Design | | | An example of how to place elements on the footer of a page with CSS/HTML so that the elements are always on the bottom, regardless of the client resolution.
Categories : HTML, CSS, Interfaces | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | How to preset a text string in a textarea input field
Categories : HTML, HTML and PHP, PHP, Beginner Guides | | | Form Processing : with alert Highlight field name which is not filled by user
Categories : Java Script, Form Processing, Data Validation, Beginner Guides, Web Design | | | Kewl Date Example
Categories : PHP, HTML and PHP, Date Time, CSS, Beginner Guides | | | Date layout using CSS
Categories : CSS, Date Time, Web Design | |
|
|
|
