Weird MouseOver problem

[Dark Dragon]

Okay..I decided to use a simple DHTML code for a rollover on links..more precisely the text will change color when the mouse is over it..works nice escept the link will still change if the mouse is near the text..

I tried putting the links into a frameset in hopes it would help but how do I adjust the MouseOver Event so it changes ONLY when it is actually over the link? Here is the code I am using..I haven't allocated the link pages yet

<h4 onmouseover="style.color='red'" onmouseout="style.color='white'">
Pencil Images</h4>
<h4 onmouseover="style.color='red'" onmouseout="style.color='white'">
Digital Tablet</h4>
<h4 onmouseover="style.color='red'" onmouseout="style.color='white'">
Photoshop Pics</h4>

[Fang]

<h4> is a block-level element, so it will fill the width of the page.
If you nest the text in a <span>, inline element, the width of the element is the same as the text.
look at these two examples:

<h4 style="border:1px solid red;">
<span style="border:1px solid blue;" onmouseover="style.color='red'" onmouseout="style.color='white'">Pencil Images</span>
</h4>
<h4 style="border:1px solid red;" onmouseover="style.color='red'" onmouseout="style.color='white'">Digital Tablet</h4>

[David Harrison]

It's because hn elements come with either padding or a margin (I can't remember which). Unless there are actually headers I would do this:

<style type="text/css"><!--

a.class, a.class:hover, a.class:visited{color:#fff;background-color:transparent;font-size:16pt;}
a.class:focus, a.class:hover, a.class:active{color:#f00;background-color:transparent;font-size:16pt;cursor:default;}

--></style>

<a href="#" class="change" onclick="return false;">Pencil Images</a>

[Dark Dragon]

Thanks LavaLamp that was really cool!!!..

The next difficulty comes allocating the links..what do I put for the "onclick" event?

[pyro]

Just use regular links (<a href="somepage.htm">Go to somepage.htm</a>) rather than using the onclick event handler. Using onclick will make it so your pages only work in JavaScript enabled browsers (a bad thing...)

[Dark Dragon]

Well..the reason I want to use "onclick" is because the "h ref" will void out the rollover script I wanted for my links....kinda defeats the whole purpose behind the rollover scripting.

[David Harrison]

I'm not sure what you mean when you say:the "h ref" will void out the rollover scriptIf you just put this:

<a href="http://www.w3.org/" class="change">Pencil Images</a>

It will work as a normal link but still change colour when the mouse moves over it.

[Dark Dragon]

Okay..thanks LavaLamp

[David Harrison]

If you are going to use the colour change for links then you can remove the cursor:default; from the styles. Happy to help. :)