Topic: JavaScript onMouseOut help... (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=29062" title="Pages that link to Topic: JavaScript onMouseOut help... (Page 1 of 1)" rel="nofollow" >Topic: JavaScript onMouseOut help... <span class="small">(Page 1 of 1)</span>\$

Aquilo Paranoid (IV) Inmate From: las vegas, nevada, us Insane since: Nov 2000	posted 03-23-2007 01:06 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 Code: <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> 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 (Edited by Aquilo on 03-23-2007 01:18)
poi Paranoid (IV) Inmate From: Norway Insane since: Jun 2002	posted 03-23-2007 01:14 Not sure to understand what you want to achieve but I guess you need to replace the onmouseover in imageframe by onmouseout. Also this can most likely be achieved using CSS only.
Aquilo Paranoid (IV) Inmate From: las vegas, nevada, us Insane since: Nov 2000	posted 03-23-2007 01:17 hehe yeh, onmouseout, I just got it wrong for the example there! it's onmouseout in the real script!
poi Paranoid (IV) Inmate From: Norway Insane since: Jun 2002	posted 03-23-2007 01:44 posting your actual JavaScript might help Right now I don't see what can possibly go wrong. On mouseover over imgholder, imageframe should show up, and it should disapear when you mouseout of it. FYI, this works ( as I understand what you to achieve ): code: <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>foo</title> <style type="text/css"> body { background:#000; color:#ccc; margin:0; padding:0; font:12px Trebuchet ms; } #d1 { position:relative; width:128px; height:128px; background:orange; color:#000; } #d1.show #d2 { display:block; } #d2 { position:absolute; top:0; left:0; width:100%; height:100%; background:green; display:none; } </style> </head> <body> <p>lorem</p> <div id='d1' onmouseover='this.className="show"' onmouseout='this.className=""'> <img src='base.img.png' alt='base'/> <div id='d2'> <img src='1st.img.png' alt='1st' /> <img src='2nd.img.png' alt='2nd' /> </div> </div> <p>lipsum</p> </body> </html> For a cleaner, and CSS only version, remove all the inline event crap, and replace .show by :hover in the CSS HTH (Edited by poi on 03-23-2007 01:53)
Aquilo Paranoid (IV) Inmate From: las vegas, nevada, us Insane since: Nov 2000	posted 03-23-2007 01:54 it's on my pc, and I only have it positioned in FF right now so IE will be funny looking until I work all this out then add a proper offset for IE. http://sandbox.graytap.com/gtpod/array.php thanks for the help!
poi Paranoid (IV) Inmate From: Norway Insane since: Jun 2002	posted 03-23-2007 02:20 Ok, the mouseout event is fired when you move the mouse over an IMG inside the linkframed. I suggest to cut ALL the inline events and use global mouseout and mouseover event listeners that will check from the srcElement to the root of the document to see if an element with the className=='grid' on mouseover or id=='linkframed' on mouseout is met and do the necessary. Beside fixing the problem this will make the page much smaller. Also I don't think you need all the z-index; neither to set the border attribute of the IMG tags, use CSS for that, and unless there is more to come all the IDs grid_XXX are not necessary, so is the class grid actually. And personnaly I'd use an UL instead of a zillion DIVs. (Edited by poi on 03-23-2007 02:24)
Aquilo Paranoid (IV) Inmate From: las vegas, nevada, us Insane since: Nov 2000	posted 03-23-2007 06:28 I don't get how using UL's would get the same effect.
poi Paranoid (IV) Inmate From: Norway Insane since: Jun 2002	posted 03-23-2007 10:11 Using an UL is just more semantically correct. It will have NO impact on the script. You can style the UL and its LIs just like the zillions DIVs you have now.

Topic: JavaScript onMouseOut help... (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=29062" title="Pages that link to Topic: JavaScript onMouseOut help... (Page 1 of 1)" rel="nofollow" >Topic: JavaScript onMouseOut help... <span class="small">(Page 1 of 1)</span>\$

Aquilo
Paranoid (IV) Inmate

From: las vegas, nevada, us
Insane since: Nov 2000

posted 03-23-2007 01:06

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
Code:

<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>

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

(Edited by Aquilo on 03-23-2007 01:18)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted 03-23-2007 01:14

Not sure to understand what you want to achieve but I guess you need to replace the onmouseover in imageframe by onmouseout.

Also this can most likely be achieved using CSS only.

Aquilo
Paranoid (IV) Inmate

From: las vegas, nevada, us
Insane since: Nov 2000

posted 03-23-2007 01:17

hehe yeh, onmouseout, I just got it wrong for the example there! it's onmouseout in the real script!

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted 03-23-2007 01:44

posting your actual JavaScript might help

Right now I don't see what can possibly go wrong. On mouseover over imgholder, imageframe should show up, and it should disapear when you mouseout of it.

FYI, this works ( as I understand what you to achieve ):

code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>

<title>foo</title>

<style type="text/css">

body
{
	background:#000;
	color:#ccc;
	margin:0;
	padding:0;
	font:12px Trebuchet ms;
}
#d1
{
	position:relative;
	width:128px;
	height:128px;
	background:orange;
	color:#000;
}
#d1.show #d2
{
	display:block;
}
#d2
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:green;
	display:none;
}

</style>

</head>
<body>

<p>lorem</p>
<div id='d1' onmouseover='this.className="show"' onmouseout='this.className=""'>
	<img src='base.img.png' alt='base'/>
	<div id='d2'>
		<img src='1st.img.png' alt='1st' />
		<img src='2nd.img.png' alt='2nd' />
	</div>
</div>
<p>lipsum</p>

</body>
</html>

For a cleaner, and CSS only version, remove all the inline event crap, and replace .show by :hover in the CSS

HTH

(Edited by poi on 03-23-2007 01:53)

Aquilo
Paranoid (IV) Inmate

From: las vegas, nevada, us
Insane since: Nov 2000

posted 03-23-2007 01:54

it's on my pc, and I only have it positioned in FF right now so IE will be funny looking until I work all this out then add a proper offset for IE.
http://sandbox.graytap.com/gtpod/array.php

thanks for the help!

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted 03-23-2007 02:20

Ok, the mouseout event is fired when you move the mouse over an IMG inside the linkframed.

I suggest to cut ALL the inline events and use global mouseout and mouseover event listeners that will check from the srcElement to the root of the document to see if an element with the className=='grid' on mouseover or id=='linkframed' on mouseout is met and do the necessary. Beside fixing the problem this will make the page much smaller.

Also I don't think you need all the z-index; neither to set the border attribute of the IMG tags, use CSS for that, and unless there is more to come all the IDs grid_XXX are not necessary, so is the class grid actually. And personnaly I'd use an UL instead of a zillion DIVs.

(Edited by poi on 03-23-2007 02:24)

Aquilo
Paranoid (IV) Inmate

From: las vegas, nevada, us
Insane since: Nov 2000

posted 03-23-2007 06:28

I don't get how using UL's would get the same effect.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted 03-23-2007 10:11

Using an UL is just more semantically correct. It will have NO impact on the script. You can style the UL and its LIs just like the zillions DIVs you have now.

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: JavaScript onMouseOut help... (Page 1 of 1)

Insert Slimies »

Insert UBB Code »

Topic: JavaScript onMouseOut help... (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=29062" title="Pages that link to Topic: JavaScript onMouseOut help... (Page 1 of 1)" rel="nofollow" >Topic: JavaScript onMouseOut help... <span class="small">(Page 1 of 1)</span>\$