Reply to Iframes and Mouse Position — HTML

Posted by wmanzo on 09/22/06 15:42

I have a really professional conspiracy movie site
and I use tons of layers and an external scroll bar assembly.
I would like to put the various sections into MS Iframes and
in order to clean up the page but I find that the iframes interfere
with the getting the mouse coords from the screen which is
essential in moving the scroll bar around.

My test html is given below. With the iframe hidden the mouse coords
are obtainable. With the iframe visible things get buggy.

Where the "background_foriframe.html" is just a html file with
a background layer using a "DIV" tag.

<Div id='Main_Page_Background'
style='position:absolute;
filter:alpha(opacity=60);
clip:rect(0,5000,5000,0);
width:1px;height:1px;
left:0px;top:0px;z-index:50'>
<table border=0 cellpadding=0 cellspacing=0>
<tr><td bgcolor="#AAAAAA" background="imgs/background_metalback.jpg">
<img src="imgs/trans.gif" id="main_page_bg" width=5000 height=5000
border=0>
</td></tr></table>
</Div>

<html>
<head>

<base href=" ">
<meta http-equiv="imagetoolbar" content="no">

</head>

<body bgcolor="#CCCCCC">

<Div id='Main_Background_Iframe'
style='position:absolute;
visibility:hidden;
clip:rect(0,5000,5000,0);
width:1px;height:1px;
left:0px;top:0px;z-index:50'>
<iframe src="background_foriframe.html" width="5000" height="5000"
name="background_iframe" frameborder="0" scrolling="no"
allowtransparency="true">
</iframe>
</Div>












<script language="JavaScript">

var ms_x, x_offset;

var ms_y, y_offset;

document.onmousemove = cm_mouseMove;

//--MOUSE MOVE-----------------------

function cm_mouseMove(e){

ms_x = event.x+document.body.scrollLeft;
ms_y = event.y+document.body.scrollTop;

if (ms_x < 0){ms_x = 0;}
if (ms_y < 0){ms_y = 0;}

document.xy_display.xcoord.value = ms_x;
document.xy_display.ycoord.value = ms_y;

return false;

}

//--MOUSE MOVE-----------------------

</script>
















<Div id="XY_Coord_Dispay_Assembly"
style="position:absolute;
width:100; height:100;
clip:rect(0,500,500,0);
left:0px;top:0px;z-index:200;">

<form name="xy_display">

<Div id="XY_Coord_Background"
style="position:absolute;
filter:alpha(opacity=50);
width:100; height:100;
clip:rect(0,200,200,0);
left:0px; top:0px;z-index:100;">
<table border=0 cellpadding=0
cellspacing=0><tr><td>
<img src="imgs/xy_coord_body.gif" border=0
</td></tr></table>
</Div>

<Div id="X_Coor_Display"
style="position:absolute;
width:100; height:100;
clip:rect(4,33,17,2);
left:36px; top:0px;z-index:100;">
<table border=0 width=38 cellpadding=0 cellspacing=0><tr><td>
<input type="text" size="5" name="xcoord" value="0"
style="background-color:transparent;
color:black";>
</td></tr></table>
</Div>

<Div id="Y_Coor_Display"
style="position:absolute;
width:100; height:100;
clip:rect(4,33,17,2);
left:36px; top:15px;z-index:100;">
<table border=0 width=38 cellpadding=0 cellspacing=0><tr><td>
<input type="text" size="5" name="ycoord" value="0"
style="background-color:transparent;
color:black";>
</td></tr></table>
</Div>

<Div id="X_Coor_Display"
style="position:absolute;
width:100; height:100;
clip:rect(4,33,17,2);
left:36px; top:32px;z-index:100;">
<table border=0 width=38 cellpadding=0 cellspacing=0><tr><td>
<input type="text" size="5" name="x_layer" value="0"
style="background-color:transparent;
color:black";>
</td></tr></table>
</Div>

<Div id="Y_Coor_Display"
style="position:absolute;
width:100; height:100;
clip:rect(4,33,17,2);
left:36px; top:48px;z-index:100;">
<table border=0 width=38 cellpadding=0 cellspacing=0><tr><td>
<input type="text" size="5" name="y_layer" value="0"
style="background-color:transparent;
color:black";>
</td></tr></table>
</Div>

</form>

</Div>




</html>

[Back to original message]

Удаленная работа для программистов • Как заработать на Google AdSense • England, UK • статьи на английском • PHP MySQL CMS Apache Oscommerce • Online Business Knowledge Base • DVD MP3 AVI MP4 players codecs conversion help

Home • Search • Site Map • Set as Homepage • Add to Favourites

Сайт изготовлен в Студии Валентина Петручека —
изготовление и поддержка веб-сайтов, разработка программного обеспечения, поисковая оптимизация