Dynamic HTML Demos

Microsoft VersionNetscape 4.0 Version
Run the comic stripRun the comic strip
<HTML>
<HEAD><TITLE>Comic Strip - Internet Explorer</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF>
<SCRIPT LANGUAGE="JavaScript">
function showIt() {
  origin=event.srcElement.id;
  whichOne=origin.substring(origin.length-1, origin.length);
    for (i=1;i<4; i++){
      if (i==whichOne){
        document.all["txt"+whichOne].style.display="";
      }
      else{
        document.all["txt"+i].style.display="none";
      }
    }
}
</SCRIPT>
<H3>Clash of the Titans</H3>
<IMG SRC="bg1.gif" ID="bg1" STYLE="container:positioned; 
position:absolute; top:40; left:40; height:100; width:100">
<IMG SRC="bg1.gif" ID="bg2" STYLE="container:positioned; 
position:absolute; top:40; left:155; height:100; width:100">
<IMG SRC="bg1.gif" ID="bg2" STYLE="container:positioned; 
position:absolute; top:40; left:270; height:100; width:100">
<IMG SRC="fg1.gif" onmouseover="showIt()" ID="fg1" 
STYLE="container:positioned; position:absolute; top:40; 
left:40; height:100; width:100">
<IMG SRC="fg2.gif" onmouseover="showIt()" ID="fg2" 
STYLE="container:positioned; position:absolute; top:40; 
left:155; height:100; width:100">
<IMG SRC="fg3.gif" onmouseover="showIt()" ID="fg3" 
STYLE="container:positioned; position:absolute; top:40; 
left:270; height:100; width:100">
<IMG SRC="txt1.gif" ID="txt1" STYLE="container:positioned; 
position:absolute; top:40; left:40; height:100; width:100; 
display:none">
<IMG SRC="txt2.gif" ID="txt2" STYLE="container:positioned; 
position:absolute; top:40; left:155; height:100; width:100; 
display:none">
<IMG SRC="txt3.gif" ID="txt3" STYLE="container:positioned; 
position:absolute; top:40; left:270; height:100; width:100; 
display:none">
</BODY>
</HTML>

<HTML>
<HEAD><TITLE>Comic Strip</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF>
<SCRIPT LANGUAGE="JavaScript">
function showIt(whichOne) {
  for (i=1;i<4; i++){ //runs through layers
    if (i==whichOne){//turns on the right one
      document.layers["txt"+whichOne].visibility="inherit";}
    else{//turns off the others
      document.layers["txt"+i].visibility="hide";}
	}
}
</SCRIPT>

<H3>Clash of the Titans</H3>
<LAYER NAME="bg1" TOP=40 LEFT=20 HEIGHT=100 WIDTH=100>
<IMG SRC="bg1.gif"></LAYER>
<LAYER NAME="bg2" TOP=40 LEFT=130 HEIGHT=100 WIDTH=100>
<IMG SRC="bg1.gif"></LAYER>
<LAYER NAME="bg3" TOP=40 LEFT=240 HEIGHT=100 WIDTH=100>
<IMG SRC="bg1.gif"></LAYER>
<LAYER NAME="fg1" TOP=40 LEFT=20 HEIGHT=100 WIDTH=100>
<A HREF=""  ONMOUSEOVER="showIt(1)"><IMG SRC="fg1.gif" 
BORDER=0></A></LAYER>
<LAYER NAME="fg2" TOP=40 LEFT=130 HEIGHT=100 WIDTH=100>
<A HREF="" ONMOUSEOVER="showIt(2)"><IMG SRC="fg2.gif" 
BORDER=0></A></LAYER>
<LAYER NAME="fg3" TOP=40 LEFT=240 HEIGHT=100 WIDTH=100>
<A HREF="" ONMOUSEOVER="showIt(3)"><IMG SRC="fg3.gif" 
BORDER=0></A></LAYER>
<LAYER NAME="txt1" TOP=40 LEFT=20 HEIGHT=100 WIDTH=100 
VISIBILITY="hide">
<IMG SRC="txt1.gif"></LAYER>
<LAYER NAME="txt2" TOP=40 LEFT=130 HEIGHT=100 WIDTH=100 
VISIBILITY="hide">
<IMG SRC="txt2.gif"></LAYER>
<LAYER NAME="txt3" TOP=40 LEFT=240 HEIGHT=100 WIDTH=100 
VISIBILITY="hide">
<IMG SRC="txt3.gif"></LAYER>
</BODY></HTML>

<Origin Page   TOC   More Demos

Copyright 2000 Simon St.Laurent