DickHildreth
06-26-2006, 11:33 AM
I am trying to put a window component on top of an existing HTML page. Ideally, I would like the window to be draggable over any part of the HTML page which, I guess, means that I want a transparent canvas. I have not been able to make the canvas transparent.
Failing that, I have fallen back to placing the window into the upper left corner of the page. I have managed to make the canvas and the window the same size but, no matter how I drive around the position variables, I end up with 3/4 of the window outside of the canvas (I see the upper left 1/4).
My code (in the current incarnation):
<canvas height="160" width="180" proxied="false">
<silverstyle isdefault="true" canvascolor="null"/>
<bluestyle name="bluecolors" canvascolor="null"/>
<goldstyle name="goldcolors" canvascolor="null"/>
<view id="s1" x="0" y="0">
<window style="bluecolors" height="160" width="180" title="Sponsors" id="sponsors" resizable="false" closeable="false" x="${immediateparent.x}" y="${immediateparent.y}">
<text x="25" y="10" multiline="true" width="${immediateparent.width}">
<a href="http://www-03.ibm.com/services/ca/en/bcs/" target="_blank">
<img src="images/ibm_sponsor2.jpg" align="center" height="44" width="111" vspace="3" hspace="3" /></a>
</text>
<text x="5" y="60" multiline="true" width="${immediateparent.width}">
<a href="http://www.agf.com/" target="_blank">
<img src="images/AGF_logo.jpg" align="center" height="40" width="51" vspace="3" hspace="3" /></a>
</text>
<text x="62" y="60" multiline="true" width="${immediateparent.width}">
<a href="http://www.pacificyachting.com/" target="_blank">
<img src="images/pacific-yachting.jpg" align="center" height="40" width="93" vspace="3" hspace="3" /></a>
</text>
</window>
</view>
</canvas>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2006 Victoria to Maui International Yacht Race Tracking by Flagship</title>
<script type="text/javascript" language="javascript">
</head>
<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" >
<div id="0" style="position:absolute; top:0; left:0; z-index:10" >
<img src="images/vic.jpg" align="left" height="1104" width="1324" />
<div id="2" style="position:absolute; top:0; left:0; z-index:30" >
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="Sponsors" >
<param name="allowScriptAccess" value="sameDomain" />
<param name="scale" value="exactfit">
<param name="salign" value="LT">
<param name="menu" value="false">
<param name="movie" value="Sponsors.swf" /><param name="quality" value="high" /><embed src="Sponsors.swf" quality="high" scale="exactfit" salign="lt" width="180" height="160" name="Sponsors" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</div>
<div id="1" style="position:absolute; top:0; left:0; z-index:20" >
<img src="images/VicCurrents.png" width="1324" height="1104" />
</div>
</body>
</html>
Am I doing something wrong (I'm pretty much a noob here) or am I asking for something that can't be done?
Failing that, I have fallen back to placing the window into the upper left corner of the page. I have managed to make the canvas and the window the same size but, no matter how I drive around the position variables, I end up with 3/4 of the window outside of the canvas (I see the upper left 1/4).
My code (in the current incarnation):
<canvas height="160" width="180" proxied="false">
<silverstyle isdefault="true" canvascolor="null"/>
<bluestyle name="bluecolors" canvascolor="null"/>
<goldstyle name="goldcolors" canvascolor="null"/>
<view id="s1" x="0" y="0">
<window style="bluecolors" height="160" width="180" title="Sponsors" id="sponsors" resizable="false" closeable="false" x="${immediateparent.x}" y="${immediateparent.y}">
<text x="25" y="10" multiline="true" width="${immediateparent.width}">
<a href="http://www-03.ibm.com/services/ca/en/bcs/" target="_blank">
<img src="images/ibm_sponsor2.jpg" align="center" height="44" width="111" vspace="3" hspace="3" /></a>
</text>
<text x="5" y="60" multiline="true" width="${immediateparent.width}">
<a href="http://www.agf.com/" target="_blank">
<img src="images/AGF_logo.jpg" align="center" height="40" width="51" vspace="3" hspace="3" /></a>
</text>
<text x="62" y="60" multiline="true" width="${immediateparent.width}">
<a href="http://www.pacificyachting.com/" target="_blank">
<img src="images/pacific-yachting.jpg" align="center" height="40" width="93" vspace="3" hspace="3" /></a>
</text>
</window>
</view>
</canvas>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2006 Victoria to Maui International Yacht Race Tracking by Flagship</title>
<script type="text/javascript" language="javascript">
</head>
<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" >
<div id="0" style="position:absolute; top:0; left:0; z-index:10" >
<img src="images/vic.jpg" align="left" height="1104" width="1324" />
<div id="2" style="position:absolute; top:0; left:0; z-index:30" >
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="Sponsors" >
<param name="allowScriptAccess" value="sameDomain" />
<param name="scale" value="exactfit">
<param name="salign" value="LT">
<param name="menu" value="false">
<param name="movie" value="Sponsors.swf" /><param name="quality" value="high" /><embed src="Sponsors.swf" quality="high" scale="exactfit" salign="lt" width="180" height="160" name="Sponsors" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</div>
<div id="1" style="position:absolute; top:0; left:0; z-index:20" >
<img src="images/VicCurrents.png" width="1324" height="1104" />
</div>
</body>
</html>
Am I doing something wrong (I'm pretty much a noob here) or am I asking for something that can't be done?