User:Chuehloo/sandbox: Difference between revisions
No edit summary |
No edit summary |
||
| 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')"> Rectangle</td> | |||
</tr> | |||
<tr> | |||
<td><input type="checkbox" value="" onclick="Change_Layer(this,'circle')"> 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')"> Rectangle</td> </tr> <tr> <td><input type="checkbox" value="" onclick="Change_Layer(this,'circle')"> 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
