SlickBoard | CSS/XML Timeline (new) | XML/SWF Charts | Timeline Eons

 < previousnext > 

 

Overlapping Elements

 

To make board elements such as menus overlap other web page elements, use <div> like this:

1. Start by creating a basic web page:

<HTML>

<BODY bgcolor="#FFFFFF">

<!-- display regular text and jpeg with html tags -->
<P>This is my web page.</p>
<P><img src="images/image_flower.jpg" width="319" height="239"></p>   

</BODY>
</HTML>

 


2. Add a <div> that overlaps the web page elements created in the first step:

<HTML>

<BODY bgcolor="#FFFFFF">

<!-- display regular text and jpeg with html tags -->
<P>This is my web page.</p>
<P><img src="images/image_flower.jpg" width="319" height="239"></p>   


<!-- create a div that overlaps the above jpeg image -->
<div id="menu_layer" style="position:absolute; left: 300px; top: 60px; width:100px; height:150px; z-index:1; ">   

</div>   


</BODY>
</HTML>

 


3. Add the board's code as on a regular web page, but place the actual board between the <div> tags and make it transparent.

<HTML>

<script language="javascript">AC_FL_RunContent = 0;</script>
<script language="javascript"> DetectFlashVer = 0; </script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
var requiredMajorVersion = 9;
var requiredMinorVersion = 0;
var requiredRevision = 45;
-->
</script>

<BODY bgcolor="#FFFFFF">

<!-- display regular text and jpeg with html tags -->
<P>This is my web page.</p>
<P><img src="images/image_flower.jpg" width="319" height="239"></p>   


<!-- create a div that overlaps the above jpeg image -->
<div id="menu_layer" style="position: absolute; left: 300; top: 60; width: 100; height: 150; z-index: 1; ">   

<!-- display a board with a menu inside the div -->
<script language="JavaScript" type="text/javascript">
<!--
if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {
	alert("This page requires AC_RunActiveContent.js.");
} else {
	var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
	if(hasRightVersion) { 
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,45,0',   
			'width', '480',
			'height', '300',
			'scale', 'noscale',
			'salign', 'TL',
			'bgcolor', '#666666',
			'wmode', 'transparent',
			'movie', 'slickboard',
			'src', 'slickboard',
			'FlashVars', 'xml_source=Menu.xml', 
			'id', 'my_board',
			'name', 'my_board',
			'menu', 'true',
			'allowFullScreen', 'true',
			'allowScriptAccess','sameDomain',
			'quality', 'high',
			'align', 'middle',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'play', 'true',
			'devicefont', 'false'
			); 
	} else { 
		var alternateContent = 'This content requires the Adobe Flash Player. '
		+ '<u><a href=http://www.macromedia.com/go/getflash/>Get Flash</a></u>.';
		document.write(alternateContent); 
	}
}
// -->
</script>
<noscript>
	<P>This content requires JavaScript.</P>
</noscript>

</div>

</BODY>
</HTML>

This is my web page.

 

 

 < previousnext > 


Copyright © 2010-2017, maani.us