Hi,

 

I have created a header and I want a image rollover for my header links.

The reason I need to use images and not links is the fact I am using a non standard font so therefore if the user doesnt have the font installed on there system the font changed to verdana

 

I have tried this

http://www.thesitewizard.com/archive/rollovers.shtml

 

and changed the code like this

 

<a href="http://www.tf2-forums.co.uk"

onmouseover="buttondown('aboutbutton')"

onmouseout="buttonup('aboutbutton')">

<img src="http://www.tf2-forums.co.uk/images/homebutton.png"'>http://www.tf2-forums.co.uk/images/homebutton.png" name="Home" border="0" />

</a>

 

<script language="JavaScript" type="text/javascript">

<!--

if (document.images) {

homebuttonup = new Image();

homebuttonup.src = "http://www.tf2-forums.co.uk/images/homebutton.png" ;

homebuttondown = new Image() ;

homebuttondown.src = "http://www.tf2-forums.co.uk/images/homebuttondown.png" ;

 

}

function buttondown( buttonname )

{

if (document.images) {

document[ buttonname ].src = eval( buttonname + "down.src" );

}

}

function buttonup ( buttonname )

{

if (document.images) {

document[ buttonname ].src = eval( buttonname + "up.src" );

}

}

// -->

</script>

 

But for some reason the rollover doesnt happen? Can anyone help me please?

 

Thanks

Danny

it could possible be the "onmouseover" bit... If i remmeber right this is case sensitive so it should either be onMouseover or onMouseOver.... try it and see what happens?

I also notice....

 

"aboutbutton"

 

 

Your image does not have an ID... surely it needs id="aboutbutton" in it too.

 

Also in the 4 lines where you state wht the image is, you do not state anything for "aboutbutton", only homebuttonup and homebuttondown

OK I now have this and it still wont work, can someone please say what I am doing wrong ?

 

Thanks

Danny

Stop using JS to achieve this is my first piece of advice. Use CSS instead. First off structure your HTML code so the navigation is wrapped in a list. Thus:

<ul id="nav">
<li id="navitem1"><a href="link.html" > </a></li>
<li id="navitem2">a href="link.html" > </a></li>
</ul>

 

Then you can apply CSS to target each element and style accordingly allowing you to have a non-hover background and then a hover background:

#navitem1 { background: url(../images/backgroundimage1.gif) no-repeat top center; }
#navitem1:hover { background: url(../images/backgroundimage1_hover.gif) no-repeat top center; }

 

The first line is the default image (in your case the font replacement). The second line swaps the background image for something else. This probably isn't the absolutely best way to do this, but it works. No doubt someone will suggest a better alternative.

 

Hope this makes sense?