This Message Forum is no longer in use

Please use the new Bravenet Help Forums FOUND HERE

General Forum
This Forum is Locked
Author
Comment
Need help building rollover buttons

I've tried a lot of the web based rollover building programs trying to build links that change color or whatever on a mouseover. So far I'm not doing something right. I need some help in very plain language with all of the steps in detail. If there is someone out there who can help with this, I'd appreciate it.

Thanks

Re: Need help building rollover buttons

can you provide a link to an example of the rollover you are trying to make?

some are image based, some are just style changes, all have a bit of different coding that make them work best.

Re: Need help building rollover buttons

At the top of this forum are the words 'Return to Forum" they are blue until the mouse touches them, and then they change to green. All I want to be able to do is something as simple as that. It would be even better if there were an oval around the words that changed colors on the mouseover. I'm reasonable knowledgeable about stuff like this, but for some reason I just can't figure this one out. Thanks for responding.

Re: Need help building rollover buttons

if you have a css page or a section in your webpage coding that is a area, add this piece...

a:link {color: #0000ff;}
a:visited {color: #ff0000;}
a:active {color: #00FF00;}
a:hover {background-color: #ffffff;}
a {text-decoration: none;}

adjust color codes as desired.

Re: Need help building rollover buttons

The code that pb&j is correct, but not very useful in your case. For the most part, all of your pages are just big image maps. So the Anchor Pseudo-class definitions that he provide will not work.

Rollovers on image maps can be done, but are a little messy to implement. And I wouldn't be able to tell you how to do it with your specific. I can show you with very simple example, but once you learn how much work it would take, you will probably change your mind.

I made a copy of your home page and then modified one of the button images (Biography) to have a red border when you put your mouse pointer over it. The test page is at Harpe Test Page.

To implement the roll over I first had to make a copy of your main page image, "img0.gif". I named it "img0_a.gif", opened it in MS Paint, and put a red border around the "Biography" button image. Then I added a name to the tag.

name="img0" src="img0.gif" usemap="#map3072" border="0" height="1540" width="864">

I then modified the tag for that link, to swap the new image over the original image, during a rollover. The original code for the "Biography" area looked like the following.



Below is the modified tag, that included the mouse actions.

onMouseOver="document.img0.src='img0_a.gif'" onMouseOut="document.img0.src='img0.gif'">

So you see, it can be done. And you can make the roll over more dramatic than I did. But to do this for all the links on your home page, you would need 17 copies of the image, each modified to show a particular rollover change. To do this to all your pages, you would need 17 X 17 images (289), over and above your basic images. And, if you go back to your design application and modify/add a button image, you would have to redo ALL of your images.

This would also probably kill your bandwidth. Your main image isn't very big, but start multiplying that by the number of images that a user's browser would have to download to just flip a button, and you have very high bandwidth usage. Low speed dialup users would be downloading almost constantly.

Re: Need help building rollover buttons

Thanks very much, I appreciate the response and I will try once again to see what I can do with this info.

Thanks