Tech Tips Home
The Best Tech Tips And Daily Deals
Newsletter On The Internet!

WorldStart Tech Tip And Store Search
Email: Password: Login Remember Me

Like what you see here? Subscribe to the Tech Tips newsletter!   Email: Subscribe

Web Design Workshop: Rollover

Wednesday, October 12th, 2005 by | Filed Under: Web Design


A rollover, also called a mouseover, is an element on a web page that changes when you place your mouse over it. Rollovers are typically graphic or text elements that indicate a link or some other type of active area on a site.

I like rollovers on a site. I think they can be cool and fun and they let me know when part of the page ‘is alive’. For example, if it’s a link to another page or something like that. Our WorldStart site has rollovers on the links. Check it out: . Take your mouse pointer over the “Home”, “Software Store”, “Computer Tips”, “Newsletters”, “Message Board”, or “Contact” links at the top of the WorldStart home page and you will see that the words change from white to light blue.

Here are a couple of sites that have fun rollovers: – this is a crazy little site. The bug on the main page is set to do something different each time you roll over it. This rollover is just for fun – it doesn’t link to other pages. – this site is a bit graphic heavy but has fun rollovers. The first page asks you to enter your name and then hit “go”. If you enter in your name and hit “go” then the next page appears and your name will be drawn out on a big etch-a-sketch –fun! Anyhoo – there is a lot of spinning, flashing fun rollovers on that page. Put your mouse cursor over them and check them out. These rollovers are also links to the other sections of the site.

Javascript is used to make the rollovers, um, well rollover. Simply put, the javascript instructs the browser to load a specified graphic and then when a mouse pointer rolls over it to then swap out that graphic with a different one. When the mouse pointer rolls off of the graphic then the original graphic will return or something else exciting may happen. It all depends on the how the site is designed.

If you understand the whole java-thing and are using a web site design program that allows you to easily incorporate them then you are a smart cookie and already ahead of the game J . However, one thing you need to watch out for is the design of the rollovers.

A graphic rollover involves at least two different images – an original image and one that appears when a mouse rolls over it. You can also have an image for when you roll off and one for when you click it. It’s up to you J . These images need to be that exact same size otherwise they will ‘jump’ when you rollover them. Unless that ‘jump’ is part of your design then it just comes across as being poorly designed.

Here are the two images I’m using for my rollover. They are the exact same size with just a slight difference in one of the images to make it look like it’s moving when put into the rollover. Notice that one image has both ears up and the other has one up and one down.


Image 1
Image 2


Here is an example of the rollover created with the above two images. You’ll notice that the only thing that moves is Lily’s ear. That’s the only thing that I want to move in this rollover – her ear.


The example below is what happens when the files are two different sizes. Her ear still moves but the whole picture jumps. It’s not what I intended and looks a little weird also.


So, as long as your image files are the same size and your rollovers will look great :-)



Leave a Reply

Like these tips? Get them for FREE in your email!

WorldStart's Tech Tips Newsletter

  • Tech Tips Daily - Become a tech pro! Get the very best tech and computer help sent directly to your email every weekday!

  • Tech Tips Weekly - If you don't want our Tech Tips newsletter every day, then sign up for this weekly newsletter to get the best information of the week. Sent on Fridays.

Other Newsletters

  • WorldStart's Daily Deals - Every week, we send out great deals in our Daily Deals newsletter. Many of these deals are exclusively for our Daily Deals newsletter subscribers and can't be found with our regular specials.

  • Just For Grins - Each issue includes a couple clean jokes, some funny quotes, and a hilarious reader's story. Newsletter is sent five days a week.

Enter Email Address:


Your e-mail address is safe with us!
We only use it to send you the newsletters you request. It is NEVER disclosed to a third party for any reason, ever! Plus, if you decided you don't like our newsletters (don't worry, you'll love them), unsubscribing is fast and easy.

Free Newsletter Signup

Tech Tips Daily

Become a tech pro! Get the very best tech and computer help sent directly to your email every weekday!

Tech Tips Weekly

The week's best in tech and computer help. Get your issue sent to your email every Friday!

WorldStart's Daily Deals

The very best deals on the Internet! Get a new set of incredible sales every day of the week!

Just For Grins

Clean jokes, funny quotes, and hilarious comics. Sent 5 times a week straight to your email.


Love Worldstart? Refer A Friend!

WorldStart's Premium Membership

Tip Archive