View Full Version : Special button help

04-28-2006, 03:48 AM
Hi, I have an image i made and i want it to be a button and when people put there mouse over it, it will change to something else. I was wondering if someone could show me how this code would look? I dont know if it would use html and css, please correct me if it doesnt. Thanks:thumbsup:

04-28-2006, 03:59 AM
You wouldn't use either HTML or CSS; you'd use JavaScript. The answer to your query largely depends on what "something else" is though. If it's an image, here's some inline JavaScript that'll do the trick:

onmouseover="this.src = 'ROLLOVERIMAGEURL';"
onmouseout="this.src = 'ORIGINALIMAGEURL';">

04-28-2006, 04:04 AM
So this would be put inside a table right? Yes, its an image. Also could you submit a legend for what imageid and originalimage are?
THanks again:)

04-28-2006, 04:08 AM
I revised the code to make it more obvious. The code is the image code itself; just insert it where you want the image to go.

IMAGEURL would be something like image.gif or http://www.site.com/image.gif.

04-28-2006, 04:13 AM
(btw) i forgot to tell you i want to use it for my navigation buttons. same code right?

04-28-2006, 04:14 AM
Correct, assuming those buttons are images.

04-28-2006, 12:46 PM
ok what if i wanted to change to a new page when i clicked on the button?:thumbsup:

04-28-2006, 01:01 PM
You really don't need JavaScript for that; the :hover pseudoclass is widely supported on the a element by almost all browsers in use today, and since it can be regarded as non-essential (as long as it's crystal clear that it is a link to a new page), it will degrade nicely on older or non-graphical browsers that don't.

You can apply the technique described in ALA's "Sliding Doors of CSS, part II (http://www.alistapart.com/articles/slidingdoors2/)" for this using a single image instead of two separate ones (you will need to adapt this to your particular situation).

04-30-2006, 10:27 PM
Could some one please post that same code but have a place where i can put my url for the page that i want it to go to when they click on it?:thumbsup: