| バウンディング・ボックス バウンディング・ボックスのレッスンに戻る <script language="JavaScript1.2"> <!-- /* * Other parts required but not shown here: * In the HTML file, the radio buttons in the form below the SVG image each * have the following attribute: * * onclick="hilite_elem('grid_fill')" * * Where 'grid_fill' is replaced by the name of the SVG element that should * be highlighted whenever that radio button is click on. * For the "No Highlights" radio button the 'grid_fill' is replaced by ''. */ /* * This function highlights various elements of the SVG picture. * It is called when the user clicks on any of the radio buttons in * the form below. * The highlighting is done by changing the opacity of the elements. * The highlighted element's opacity is set to 1.0 while all other * elements' opacities are set to 0.1. * To remove all highlighting, call the function with an empty string * for element_name. This returns all elements' opacities to their * original settings. */ function hilite_elem (element_name) { var svgobj; var svgstyle; var svgdoc = document.SVG02c.getSVGDocument(); // For each element, get the element's style object, then set // its opacity based on whether no elements are highlighted // (original setting), some other element is highlighted // (de-emphasize), or this element is highlighted (emphasize). // gradient_star svgobj = svgdoc.getElementById('gradient_star'); svgstyle = svgobj.getStyle(); if (!element_name) { // Reset to normal. svgstyle.setProperty("fill-opacity", "1.0"); } else if (element_name != 'gradient_star') { // De-emphasize this element. svgstyle.setProperty("fill-opacity", "0.1"); } else { // Emphasize this element. svgstyle.setProperty("fill-opacity", "1.0"); } // grid_fill svgobj = svgdoc.getElementById('grid_fill'); svgstyle = svgobj.getStyle(); if (!element_name) { // Reset to normal. svgstyle.setProperty("fill-opacity", "0.3"); } else if (element_name != 'grid_fill') { // De-emphasize this element. svgstyle.setProperty("fill-opacity", "0.1"); } else { // Emphasize this element. svgstyle.setProperty("fill-opacity", "1.0"); } // round_corners svgobj = svgdoc.getElementById('round_corners'); svgstyle = svgobj.getStyle(); if (!element_name) { // Reset to normal. svgstyle.setProperty("stroke-opacity", "0.5"); svgstyle.setProperty("fill-opacity", "1.0"); } else if (element_name != 'round_corners') { // De-emphasize this element. svgstyle.setProperty("stroke-opacity", "0.1"); svgstyle.setProperty("fill-opacity", "0.1"); } else { // Emphasize this element. svgstyle.setProperty("stroke-opacity", "1.0"); svgstyle.setProperty("fill-opacity", "1.0"); } // SVG svgobj = svgdoc.getElementById('SVG'); svgstyle = svgobj.getStyle(); if (!element_name) { // Reset to normal. svgstyle.setProperty("fill-opacity", "0.5"); } else if (element_name != 'SVG') { // De-emphasize this element. svgstyle.setProperty("fill-opacity", "0.1"); } else { // Emphasize this element. svgstyle.setProperty("fill-opacity", "1.0"); } // coordinates svgobj = svgdoc.getElementById('coordinates'); svgstyle = svgobj.getStyle(); if (!element_name) { // Reset to normal. svgstyle.setProperty("fill-opacity", "1.0"); svgstyle.setProperty("stroke-opacity", "1.0"); } else if (element_name != 'coordinates') { // De-emphasize this element. svgstyle.setProperty("fill-opacity", "0.1"); svgstyle.setProperty("stroke-opacity", "0.1"); } else { // Emphasize this element. svgstyle.setProperty("fill-opacity", "1.0"); svgstyle.setProperty("stroke-opacity", "1.0"); } } // --> </script> バウンディング・ボックスのレッスンに戻る |