Hovering over Button

[Chris]

I want to make the buttons on my website change colour when i hover over them. The button is an image so i don't know how to do this, any suggestions?

The Site[/img]

[johneva]

Checkout a few of the tuorials on this and you will soo be able to make you nav work with rollover effect.

http://css.maxdesign.com.au/listamatic/index.htm

You use the hover propertie in CSS to do it but the tutorials are the best way for you to get used to how it works.

All the tutorials use Basic text and coloured backgriounds but you can use images just as easy.

[Chris]

http://wellstyled.com/css-nopreload-rollovers.html

I used the advice given in that page to do my rollover on the buttons, however, i must be doing it wrong because it won't work...any ideas?

[johneva]

Ah right sound post us the exact code you have used and I will take a look over it.

[Chris]

http://javascript.internet.com/generato ... mages.html

Its alright now, i have found a generator and it works perfect! I strongly recommend this site !

[johneva]

No thanx Javascript menus suck and I know how to use CSS so it is pointless in me doing a javascript menu from a code generator.

I also really dont like code generators anyways cos I think it is better to know what the code does and why rather than just copy and pasting chunks of code when you have no idea how it works.

[Chris]

I'm having one small problem though, the Home button and Graphics button do not change colour...

This is my code:

Code: Select all

<a href="http://www.freewebs.com/fmtemplate/home.html" onmouseover="image1.src='http://www.freewebs.com/fmtemplate/homehover.gif';"
onmouseout="image1.src='http://www.freewebs.com/fmtemplate/home.gif';">
<img name="image1" src="http://www.freewebs.com/fmtemplate/home.gif" border=0></a>

<a href="http://www.freewebs.com/fmtemplate/players.html" onmouseover="image2.src='http://www.freewebs.com/fmtemplate/playershover.gif';"
onmouseout="image2.src='http://www.freewebs.com/fmtemplate/players.gif';">
<img name="image2" src="http://www.freewebs.com/fmtemplate/players.gif" border=0></a>

<a href="http://www.freewebs.com/fmtemplate/players.html" onmouseover="image3.src='http://www.freewebs.com/fmtemplate/staffhover.gif';"
onmouseout="image3.src='http://www.freewebs.com/fmtemplate/staff.gif';">
<img name="image3" src="http://www.freewebs.com/fmtemplate/staff.gif" border=0></a>

<a href="http://www.freewebs.com/fmtemplate/tactics.html" onmouseover="image4.src='http://www.freewebs.com/fmtemplate/tacticshover.gif';"
onmouseout="image4.src='http://www.freewebs.com/fmtemplate/tactics.gif';">
<img name="image4" src="http://www.freewebs.com/fmtemplate/tactics.gif" border=0></a>

<a href="http://www.freewebs.com/fmtemplate/graphics.html" onmouseover="image1.src='http://www.freewebs.com/fmtemplate/graphicshover.gif';"
onmouseout="image1.src='http://www.freewebs.com/fmtemplate/graphics.gif';">
<img name="image1" src="http://www.freewebs.com/fmtemplate/graphics.gif" border=0></a>

[johneva]

Where it says.

onmouseover="image1.src=

both the code for home and graphics are using the same you need to change the graphics one to onmouseove="image5.src='

Then same for onmouseout and image name too for the graphics part of the code.

[Chris]

Thanks a lot for your help Johneva.

[Tomi]

i take it this is sorted ? but couldnt you simply use somthing like (expect mistakes, im not good at html and im writing it from scratch)

Code: Select all

<a href="LINK URL HERE" img src="IMAGE URL HERE" overscr="IMAGE 2 URL HERE" border="0">