Simple Machines Community Forum

General Community => Scripting Help => Aiheen aloitti: Aquilo - maaliskuu 22, 2007, 06:54:47 IP

Otsikko: JavaScript onMouseOut help...
Kirjoitti: Aquilo - maaliskuu 22, 2007, 06:54:47 IP
Please! ;)


ok I have an image that has an onMouseOver placing a <div> over it, and this <div> has three "child" images in it, what I was doing before the images with onMouseOut was just fine but now with the images if I go over one of them the <div> hides how can I make the images in the <div> keep it shown as well?

here is a better example
<div id="imgholder" onmouseover="FrameOn(this,'imageframe');"><img src="base.img" /></div>
<div id="imageframe" onmouseover="FrameOff('imageframe');"><img src="1st.img" /><img src="2nd.img" /></div>

so what I found is waving the mouse over 1st.img & 2nd.img will make imageframe hide!

how do I keep imageframe open when the mouse is over 1st.img & 2nd.img??

Thanks for any help!
Aquilo
Otsikko: Re: JavaScript onMouseOut help...
Kirjoitti: B Patterson - maaliskuu 22, 2007, 07:10:10 IP
That's because of inheritance!!!  The "imageframe" div will hide any time the mouse is moved over it.  To counteract this, you need to either remove the onmouseover function from the imageframe div, or add a button, and make it an onclick event.
Otsikko: Re: JavaScript onMouseOut help...
Kirjoitti: Aquilo - maaliskuu 22, 2007, 07:37:40 IP
the onmouseover on imageframe was a typo it should be

<div id="imgholder" onmouseover="FrameOn(this,'imageframe');"><img src="base.img" /></div>
<div id="imageframe" onmouseout="FrameOff('imageframe');"><img src="1st.img" /><img src="2nd.img" /></div>


the typo is only here in the example!

shouldn't the two images inherit onmouseout function from imageframe?
Otsikko: Re: JavaScript onMouseOut help...
Kirjoitti: Aquilo - maaliskuu 22, 2007, 07:39:53 IP
funny thing is it does not hide if there is text you can select text and it will not hide until the mouse is out of  imageframe but adding images does not do this!
Otsikko: Re: JavaScript onMouseOut help...
Kirjoitti: B Patterson - maaliskuu 22, 2007, 08:49:20 IP
Are you adding straight text like:
<div id="imageframe">this is example text</div>

or like this:
<div id="imageframe"><p>some text...</p></div>

If it's the first, that's because the text is on the same level as the div, so it never leaves that div.  In the second, it's another layer, and a new div, so the mouseout fires.

What might be the best idea is to add a button, and use an onClick or onMouseUp function to fire that calls the frameOff() function.

<div id="imageframe"><img /><img /><img />
<a href="javascript:void(0);" onClick="FrameOff('imageframe');">Close</a>
</div>
Otsikko: Re: JavaScript onMouseOut help...
Kirjoitti: Aquilo - maaliskuu 22, 2007, 10:58:39 IP
well I found using javascript to do an imageframe.innerHTML type thing actually makes the images part of the imageframe layer! well that was just a test so off to see if it works! :D nope :(
Otsikko: Re: JavaScript onMouseOut help...
Kirjoitti: Dannii - maaliskuu 22, 2007, 11:03:56 IP
Firstly, don't use inline javascript ;)

Secondly, the best thing to do is probably to look at the event object and see what the target was.
http://www.quirksmode.org/js/events_properties.html
Otsikko: Re: JavaScript onMouseOut help...
Kirjoitti: Aquilo - maaliskuu 23, 2007, 12:18:06 AP
I've got out all the inline javascript, still trying to get the mouse out to work! ;D