onmouseover issue (changing text color)

Forum Moderators: open

Message Too Old, No Replies

onmouseover issue (changing text color)

onmouseover issue

jonwald

9:46 am on Apr 14, 2005 (gmt 0)

I have a simple piece of javascript to change the color of a piece of text when the mouse moves over it. The text also links to another page, which opens a new browser window. Problem is, only the left half of the text recognises the onmouseover command. When I move the mouse over the right half of the text, nothing happens. Anyone encountered anything like this before?

Thanks,

Jonathan

birdbrain

10:28 am on Apr 14, 2005 (gmt 0)

Hi there jonwald,

and a warm welcome to these forums. ;)

To help resolve this problem, we really need to see all the relevant code.

birdbrain

jonwald

6:35 am on Apr 15, 2005 (gmt 0)

Hi Birdbrain thanks for the welcome! I wasn't sure about the protocol of posting code, so I thought I'd wait and see if it was requested. But since it is, here goes. I've tried it 2 ways: one where all links change color, and one where just the specific link in question changed color. Both tries had the same effect: the link in layer 6 only changed color when the mouse went over the left half. The other links, by the way, changed color in a more predictable way. Thanks in advance for your help.

The single line attempt is:

<DIV class="dynamic-style-3">
<SPAN class="dynamic-style-4"> <a onMouseOver="this.style.color='#FF7B1F'" onMouseOut="this.style.color='#000000'" onclick="window.open('Comedy Program.htm','jonathanwald.com','left=20,top=20,width=630,height=630');"style="text-decoration: none">Comedy of Errors</a><BR></DIV></SPAN>

The complete page is below, with an alternate way of programming the color change:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>

<HEAD>
<META name="generator" content="Adobe InDesign HTML Export Plug-in">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>Noises Off</TITLE>

var num=1
img1 = new Image ()
img1.src = "images/noises-small-1.jpg"
img2 = new Image ()
img2.src = "images/noises-small-2.jpg"
img3 = new Image ()
img3.src = "images/noises-small-3.jpg"
img4 = new Image ()
img4.src = "images/Noises-Small-4.jpg"

text1 = "Text for Picture One"
text2 = "Text for Picture Two"
text3 = "Text for Picture Three"
text4 = "Text for Picture Four"

function slideshowUp()
{
num=num+1
if (num==5)
{num=1}
document["theatrestill"].src=eval("img"+num+".src")
document.jon.wald.value=eval("text"+num)
}

function slideshowBack()
{
num=num-1
if (num==0)
{num=4}
document["theatrestill"].src=eval("img"+num+".src")
document.jon.wald.value=eval("text"+num)
}

</SCRIPT>

</HEAD>

<DIV class="DIVDefaultParaStyle">
<SPAN class="dynamic-style-1">Program</SPAN><SPAN class="dynamic-style-2"><BR></SPAN>
</DIV>

</DIV>

<DIV class="dynamic-style-3">
<SPAN class="dynamic-style-4"> <a onclick="window.open('From Stiller Program.htm','left=20,top=20,width=630,height=630');"style="text-decoration: none">Noises Off!</a><BR></DIV></SPAN>
</DIV>
<DIV id="layer9">
<DIV class="dynamic-style-3">
<SPAN class="dynamic-style-6">Photos<BR></SPAN>
</DIV>
</DIV>

</DIV>

</BODY>
</HTML>

natty

9:35 am on Apr 15, 2005 (gmt 0)

hi jonwald,

a couple of things,

firstly i would opt for changing the styles via

element.className = "some style in your stylesheet" - (note the capital N in className)
rather than setting the color directly.

also the bit abou the text only working on the left word..
i pasted your page into a doc then loaded it up, obviously i dont have your images or anything, but it was easier to see that the reason the rh text is not doing anything is because .. i think .. it is covered by the layer 8 layer.

maybe setting the z-index of the covered layer to higher will pop it to the top and make the text work..

just a thought, might be worth a go.

gl
hth

nat

Bernard Marx

11:14 am on Apr 15, 2005 (gmt 0)

firstly i would opt for changing the styles via
element.className = "some style in your stylesheet" - (note the capital N in className)
rather than setting the color directly.

I disagree (respectfully). Dynamically switching/amending className is a very flexible way of doing things, but it can have it's own complications. Considering that only one property is being changed, I don't think it's worth it - on balance.

This is because jonwald will have to either

a) Define a whole new CSS rule restating all the other properties that are in the initial class.

b) Use specific functions to deal with adding and removing individual classes from a multiple-className attribute.

Bernard Marx

11:35 am on Apr 15, 2005 (gmt 0)

natty's right about it being obscured by a layer.

Add this rule to the stylesheet:

div{border: solid 1px red;}

and you'll see what's going on.

jonwald

1:45 pm on Apr 15, 2005 (gmt 0)

Thanks for all the advice. I fixed it using your help - though not exactly in the way expected. The layer issue seemed clear after I outlined in red - but the problem continued even after I moved the layer that cut off half the text. However, when I changed the z-index of the layer with the link so that it was highest, the problem was fixed.

Thanks again for the assistance. I have another question about slideshows on multiple pages, but I'll post that elsewhere.

Cheers,

Jonathan

natty

8:58 pm on Apr 15, 2005 (gmt 0)

i must remember to prefix personally rather than firstly. just easier to sort out on multiple pages..
but then again, i'd always listen to bernard i cant even begin to count the amount of times he has helped me out..
:-)

onmouseover issue (changing text color)

onmouseover issue

jonwald

birdbrain

jonwald

natty

Bernard Marx

Bernard Marx

jonwald

natty

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week