マウス・イベント
マウスイベントのレッスンに戻る
<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>
マウスイベントのレッスンに戻る