CSS Rollover
April 19th, 2007 by SteveSuppose you want to add a rollover banner ad on your site and would rather do it with CSS (Style Sheets) instead of javascript. Start by creating an image that is twice as wide as the banner, so that it loads all at once and there is no delay on the mouseover:
Next, add the following lines to the stylesheet:
.rollover a {
display:block;
width: 234px;
height: 60px;
background: url("/ads/banner-free-tiles.gif") 0 0 no-repeat;
float: right;
}
.rollover a:hover {
background-position: -234px 0px;
}
The height and width match the size of the ad. The actual image is twice as wide (468×60). The a:hover pseudo-class moves the image 234 pixels to the left, showing the right half during a mouseover.
Add this code where you want the ad to appear:
<span class="rollover"><a href="http://xanadu-fx.com/tiles/" title="Free Background images"> </a></span>
and you should see this:
You can also use this technique to make rollovers in menus, but I prefer to use text based links in navigation for accessibility reasons. Also, you can stack the images vertically, but be sure to adjust the code in “a:hover” accordingly so the image moves up instead of left.
Posted in | 10 Comments »
January 3rd, 2013 at 10:41 am
I visited several web pages except the audio feature for audio songs existing at this website is truly fabulous.
February 26th, 2014 at 3:52 pm
Of the medication most commonly used for erectile dysfunction, Viagra is most common.
When was the last time you have totally different hairstyle.
This type of studies brings hopes to people that suffer from this condition knowing that something that does not have a known
cure is actually on the verge of getting positive results.
March 10th, 2014 at 6:40 am
I must thank you for the efforts you’ve put in writing this
blog. I am hoping to check out the same high-grade content by you later on as well.
In truth, your creative writing abilities has inspired me to get my very own website now 😉
March 15th, 2014 at 5:09 pm
You are so interesting! I don’t believe I have read something like
this before. So nice to find another person with unique thoughts on
this subject matter. Really.. thank you for starting this
up. This site is one thing that is needed on the internet, someone with a
bit of originality!
Also visit my web-site – dog flea collars (Rudolf)
March 18th, 2014 at 7:34 am
Generally, steel doors are more inexpensive
than wooden doors. Also, unlike steel, wood does not dent and,
thus, will withstand the occasional stray basketball
or hockey puck without any problem. These doors just move in two directions that are downward and upward.
Also visit my blog :: Kitsap garage door
March 19th, 2014 at 6:02 am
Win a Iphone 5C or 5S right here!
my webpage :: Win an Iphone 5S or 5C for Free!
September 6th, 2014 at 7:06 pm
I’m really enjoying the theme/design of your site.
Do you ever run into any internet browser compatibility problems?
A few of my blog readers have complained about my site not working correctly in Explorer but looks
great in Opera. Do you have any advice to help fix this problem?
October 10th, 2015 at 2:56 pm
you prefer manufacture the best asics shoes sale for you to choose.
Finish Line is not just an athletic shoes store but also
sells casual shoes and sandals for both genders. A great product.
October 14th, 2015 at 1:18 pm
Before purchasing a Gaming PC, always check the features of the following
key components:. A faster processor gives better speed, efficiency and performance and hence the desktop
with such a processor will have a higher price.
Remove viruses.
November 13th, 2018 at 3:41 am
Wonderful beat ! I would like to apprentice at the same time as you amend
your website, how could i subscribe for a blog site?
The account helped me a applicable deal. I were tiny bit familiar of this your broadcast offered bright cler concept