| マウス・イベント マウスイベントのレッスンに戻る <script language="JavaScript1.2"> <!-- /* * Other parts required but not shown here: * In the HTML file, the a tags in the right-hand columns of the example * each contain the following attributes: * * onmouseover="return mouse_over_a('linkS')" * onmouseout="mouse_out_a('linkS')" * onclick="return mouse_click_a('linkS')" * * Where 'linkS' is replaced by 'linkV' and 'linkG' for other links. * * In the SVG file, the g tags with the href attributes each contain the * following attributes: * * onmouseover="return mouse_over_a('linkS')" * onmouseout="mouse_out_a('linkS')" * onclick="return false" * * Where 'linkS' is replaced by 'linkV' and 'linkG' for other links. */ /* * Scripts to implement interactions for this lesson. */ // "MouseOver" and "MouseOut" colors for hyperlinks. var color_mouse_over = 'red'; var color_mouse_out = 'blue'; /* * This function is called to suppress javascript error messages when it is * known that the errors are not real problems. */ function suppress_errors () { return true; } /* * Verify that the indicated SVG element exists. */ function does_element_exist (svg_name, element_name) { // First, redirect the error handler so that if the SVG plug-in has not // yet loaded or is not present, it doesn't cause the browser to // issue a JavaScript error. var old_error = window.onerror; window.onerror = suppress_errors; // Now attempt to get the SVG object. var svgobj = document.embeds[svg_name].getSVGDocument().getElementById(element_name); // Reset the error hanlder to the browser's default handler. window.onerror = old_error; // Return appropriate value. if (svgobj == null) return false; else return true; } /* * This function handles the mouseover events for the first example. * It is called for mouseover events for both the SVG image and the HTML * hyperlinks. * On each call, it changes the hyperlink's color (MSIE only) and the SVG * element's fill-opacity. * We rely on the mouseout handler to reset these properties back to their * original values at the proper time. * The input parameter is expected to contain the name of the SVG element * or the HTML hyperlink that generated the event. Both SVG element and * hyperlink should have the same name. */ function mouse_over_a (target_id) { var svgdoc = document.inter1_01.getSVGDocument(); // Change the HTML hyperlink's color (this can only be done in MSIE). if (document.all && document.all.item) { var linkobj = document.all.item(target_id); if (linkobj) linkobj.style.color = color_mouse_over; } // Make sure SVG element is available. if (!does_element_exist ('inter1_01', target_id)) return true; // Now change the SVG element's fill-opacity. var svgobj = svgdoc.getElementById(target_id); if (svgobj != null) { var svgstyle = svgobj.getStyle(); svgstyle.setProperty ('fill-opacity', .7); } // Propagate the event to other handlers. return true; } /* * This function handles the mouseout events for the first example. * It is called for mouseout events for both the SVG image and the HTML * hyperlinks. * On each call, it resets the hyperlink's color (MSIE only) and the SVG * element's fill-opacity. * The input parameter is expected to contain the name of the SVG element * or the HTML hyperlink that generated the event. Both SVG element and * hyperlink should have the same name. * This is very similar to the mouse_over_a function. */ function mouse_out_a (target_id) { var svgdoc = document.inter1_01.getSVGDocument(); // Change the HTML hyperlink's color (this can only be done in MSIE). if (document.all && document.all.item) { var linkobj = document.all.item(target_id); if (linkobj) linkobj.style.color = color_mouse_out; } // Make sure SVG element is available. if (!does_element_exist ('inter1_01', target_id)) return true; // Now change the SVG element's fill-opacity. var svgobj = svgdoc.getElementById(target_id); if (svgobj != null) { var svgstyle = svgobj.getStyle(); svgstyle.setProperty ('fill-opacity', 0); } // Propagate the event to other handlers. return true; } // --> </script> マウスイベントのレッスンに戻る |