Javascript | Gio Gutierrez

All that is requied is the visible height and widht of the visible area and set the display to block to ensure the dimensions are respected. Note also that the text is indented using a huge negative value. This ensures that the link does not show, unless the style sheet is turned off in which case, the user would not see the image, but a clickable text link. One gotcha to be aware is that Firefox will currently outline links when they are clicked placing a thin border around them. While not usually a problem with standard links, if a link has a negative value, this is going to look whack. So we have a css that turns outlines off for all link states by utilizing the outline property.

/* Rollover class */

a {outline:none;}

.rollover { display:block width:300px; height:208px; background:url(images/prince.jpg) no-repeat; text-indent:-9999px; }

.rollover:hover {background-position:-300px;}

0 Click Here If U like This Post

Gio Gutierrez

Posts Tagged ‘javascript’

Javascript in Modern Web Design

10 Websites That use JavaScript Animation Effectively!!

Horizontal JavaScript Accordion 1kb - Web Development Blog

Cut & Paste Document Text Resizer

Pretty smooth Mac-like dock done all in Javascript using JQuery…

Rollover Images

My videos. Featured videos.

My photos. Now you know me.