Difference between revisions of "User:Chuehloo/sandbox"

From OpenWetWare
Jump to: navigation, search
Line 1: Line 1:
 
==A SVG ==
 
==A SVG ==
 +
  
 
<html>
 
<html>
Line 5: Line 6:
 
   <meta http-equiv="imagetoolbar" content="no">
 
   <meta http-equiv="imagetoolbar" content="no">
 
   <head>
 
   <head>
 +
<SCRIPT type="text/javascript">
 +
      function Change_Layer(checkbox, element_name){
 +
      // For each element, get the element's style object, then set
 +
// its visibility according to the state of the checkbox.
 +
var svgobj = document.embeds['SVG_Basic_Test'].getSVGDocument().getElementById(element_name);
 +
if (!checkbox.checked){
 +
// Hide layer.
 +
svgobj.setAttributeNS(null,'visibility','hidden');
 +
} else {
 +
// Show layer.
 +
svgobj.setAttributeNS(null,'visibility','visible');
 +
}
 +
      }
 +
     
 +
     
 +
    </SCRIPT>
 +
 
<title>Example </title>
 
<title>Example </title>
 
   </head>
 
   </head>
Line 10: Line 28:
 
       <a name="top"></a>
 
       <a name="top"></a>
 
       <h2>Example</h2>
 
       <h2>Example</h2>
     <embed width="512" height="256"  src="http://www.openwetware.org/images/e/ec/SVG_Basic_Test.svg" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">
+
     <embed width="512" height="256"  src="http://www.openwetware.org/images/e/ec/SVG_Basic_Test.svg" name="SVG_Basic_Test" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">
 +
<form name="Change_Layer_form" action="">
 +
<table border="0" cellpadding="0" cellspacing="2">
 +
<tr>
 +
<td colspan="2">Visible Layers</td>
 +
</tr>
 +
<tr>
 +
<td><input type="checkbox" value="" onclick="Change_Layer(this,'rectangle')">&nbsp;Rectangle</td>
 +
</tr>
 +
<tr>
 +
<td><input type="checkbox" value="" onclick="Change_Layer(this,'circle')">&nbsp;Circle</td>
 +
</tr>
 +
</table>
 +
<script type="text/javascript">
 +
                // Make sure all checkboxes are checked whenever the page is reloaded in the browser.
 +
          for (var i = 0;  i < document.Change_Layer_form.elements.length;  i++)
 +
                  if (document.Change_Layer_form.elements[i].type == 'checkbox'){
 +
                    document.Change_Layer_form.elements[i].checked = true;
 +
                  } 
 +
              </script>
 +
</form>
 +
 
 
   </body>
 
   </body>
 
</html>
 
</html>
  
 
Reference: [http://wiki.svg.org/SVG_and_HTML| How do I embed SVG into HTML page]
 
Reference: [http://wiki.svg.org/SVG_and_HTML| How do I embed SVG into HTML page]

Revision as of 05:35, 4 October 2006

A SVG

<html>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <meta http-equiv="imagetoolbar" content="no">		
  <head>

<SCRIPT type="text/javascript">

     function Change_Layer(checkbox, element_name){
     	// For each element, get the element's style object, then set

// its visibility according to the state of the checkbox. var svgobj = document.embeds['SVG_Basic_Test'].getSVGDocument().getElementById(element_name); if (!checkbox.checked){ // Hide layer. svgobj.setAttributeNS(null,'visibility','hidden'); } else { // Show layer. svgobj.setAttributeNS(null,'visibility','visible'); }

     }
     
     
   </SCRIPT>

<title>Example </title>

  </head>
  <body>
      <a name="top"></a>
      <h2>Example</h2>
    <embed width="512" height="256"  src="http://www.openwetware.org/images/e/ec/SVG_Basic_Test.svg" name="SVG_Basic_Test" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">	

<form name="Change_Layer_form" action=""> <table border="0" cellpadding="0" cellspacing="2"> <tr> <td colspan="2">Visible Layers</td> </tr> <tr> <td><input type="checkbox" value="" onclick="Change_Layer(this,'rectangle')">&nbsp;Rectangle</td> </tr> <tr> <td><input type="checkbox" value="" onclick="Change_Layer(this,'circle')">&nbsp;Circle</td> </tr> </table> <script type="text/javascript">

                // Make sure all checkboxes are checked whenever the page is reloaded in the browser.

for (var i = 0; i < document.Change_Layer_form.elements.length; i++)

                  if (document.Change_Layer_form.elements[i].type == 'checkbox'){
                    document.Change_Layer_form.elements[i].checked = true;
                  }  
              </script>

</form>

  </body>

</html>

Reference: How do I embed SVG into HTML page