home *** CD-ROM | disk | FTP | other *** search
/ Dynamic HTML Construction Kit / Dynamic HTML Construction Kit.iso / source_code / tydhtml / dyn.exe / CHAP11 / dyn11_6.txt < prev    next >
Encoding:
Text File  |  1997-10-02  |  3.7 KB  |  102 lines
  1. <HTML>
  2. <HEAD>
  3. <TITLE>5 Species of Squid</TITLE>
  4. </HEAD>
  5. <BODY BACKGROUND="water.jpg" TEXT=#FFFFFF LINK=FFFF22 VLINK=FF22FF>
  6. <H2>Species of Squid</H2>
  7. <FONT COLOR=#FFFF00>
  8. <I>Click on a squid to learn more about that type</I></FONT>
  9. </P>
  10. <P>
  11. <OBJECT ID="squidlist"
  12.         CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
  13.         BORDER="0" WIDTH="0" HEIGHT="0">
  14.   <PARAM NAME="DataURL" VALUE="types.txt">
  15.   <PARAM NAME="UseHeader" VALUE="True">
  16. </OBJECT>
  17. <P>
  18. <IMG ID="pointer" STYLE="container:positioned;position:absolute;TOP:400pt;
  19. LEFT:0px;WIDTH:156px;HEIGHT:156px;ZINDEX:0;" src="hilite.gif">
  20. <IMG ID="s1" STYLE="container:positioned;position:absolute;TOP:10pt;
  21. LEFT:480px;WIDTH:128px;HEIGHT:96px;ZINDEX:1;" src="Squid1.gif">
  22. <IMG ID="s2" STYLE="container:positioned;position:absolute;TOP:30pt;
  23. LEFT:340px;WIDTH:128px;HEIGHT:64px;ZINDEX:6;" src="Squid5.gif">
  24. <IMG ID="s3" STYLE="container:positioned;position:absolute;TOP:55pt;
  25. LEFT:40px;WIDTH:128px;HEIGHT:64px;ZINDEX:4;" src="Squid4.gif">
  26. <IMG ID="s4" STYLE="container:positioned;position:absolute;TOP:50pt;
  27. LEFT:270px;WIDTH:64px;HEIGHT:96px;ZINDEX:3;" src="Squid3.gif">
  28. <IMG ID="s5" STYLE="container:positioned;position:absolute;TOP:80pt;
  29. LEFT:400px;WIDTH:128px;HEIGHT:64px;ZINDEX:2;" src="Squid2.gif">
  30. <TABLE><TR><TD>
  31. <TR>
  32. <TD ALIGN=RIGHT VALIGN=TOP><LABEL FOR=type>Squid Type: </LABEL></TD>
  33. <TD ALIGN=LEFT VALIGN=TOP WIDTH="10"></TD>
  34. <TD ALIGN=LEFT VALIGN=TOP><INPUT ID=type SIZE=20 TYPE=text DATASRC=#squidlist 
  35. DATAFLD="Type"></TD>
  36. </TR>
  37. <TR>
  38. <TD ALIGN=RIGHT VALIGN=TOP><LABEL FOR=geography>Geography: </LABEL></TD>
  39. <TD ALIGN=LEFT VALIGN=TOP WIDTH="10"></TD>
  40. <TD ALIGN=LEFT VALIGN=TOP><INPUT ID=geography SIZE=60 TYPE=text 
  41. DATASRC=#squidlist DATAFLD="Geography"></TD>
  42. </TR>
  43. <TR>
  44. <TD ALIGN=RIGHT VALIGN=TOP><LABEL FOR=environment>Environment: </LABEL></TD>
  45. <TD ALIGN=LEFT VALIGN=TOP WIDTH="10"></TD>
  46. <TD ALIGN=LEFT VALIGN=TOP><INPUT ID=environment SIZE=200 TYPE=text 
  47. DATASRC=#squidlist DATAFLD="Environment"></TD>
  48. </TR>
  49. <TR>
  50. <TD ALIGN=RIGHT VALIGN=TOP><LABEL FOR=size>Size: </LABEL></TD>
  51. <TD ALIGN=LEFT VALIGN=TOP WIDTH="10"></TD>
  52. <TD ALIGN=LEFT VALIGN=TOP><INPUT ID=size SIZE=20 TYPE=text DATASRC=#squidlist 
  53. DATAFLD="Size"></TD>
  54. </TR>
  55. <TR>
  56. <TD ALIGN=RIGHT VALIGN=TOP><LABEL FOR=comments>Comments: </LABEL></TD>
  57. <TD ALIGN=LEFT VALIGN=TOP WIDTH="10"></TD>
  58. <TD ALIGN=LEFT VALIGN=TOP><INPUT ID=comments SIZE=200 TYPE=text 
  59. DATASRC=#squidlist DATAFLD="Comments"></TD>
  60. </TR>
  61. </TABLE>
  62. <SCRIPT language=JavaScript>
  63. var srcElement
  64. function documentClick() {
  65.     srcElement = window.event.srcElement;
  66.     if (srcElement.id=="s1") {
  67.        squidlist.recordset.AbsolutePosition = 1;
  68.        pointer.style.top="0px";
  69.        pointer.style.left="440px";
  70.     } else { 
  71.        if (srcElement.id=="s2") {
  72.           squidlist.recordset.AbsolutePosition = 2;
  73.           pointer.style.top="0px";
  74.           pointer.style.left="320px";
  75.        } else {
  76.           if (srcElement.id=="s3") {
  77.              squidlist.recordset.AbsolutePosition = 3;
  78.              pointer.style.top="35px";
  79.              pointer.style.left="20px";
  80.           } else {
  81.              if (srcElement.id=="s4") {
  82.                 squidlist.recordset.AbsolutePosition = 4;
  83.                 pointer.style.top="30px";
  84.                 pointer.style.left="200px";
  85.              } else {
  86.                 if (srcElement.id=="s5") {
  87.                    squidlist.recordset.AbsolutePosition = 5;
  88.                    pointer.style.top="60px";
  89.                    pointer.style.left="360px";
  90.                 }
  91.              }
  92.           }
  93.        }
  94.     }
  95. }
  96.  
  97. document.onclick = documentClick;
  98.  
  99. </SCRIPT>
  100. </BODY>
  101. </HTML>
  102.