|
|
 |
home <%=sCrumb%>
|
|
Mousin' Around by Vernon of the Sea Elves
Have you ever wanted to add more interactive effects to your site. Some fairly easy and interesting types of effects can be added to your site using the onMouseMove() event.
The first step is to call the init() Javascript function that references the document and sets it equal to "svgdoc"
<svg width="100%" height="220" xml:space="preserve" onload="init(evt)" onmousemove="doMouseMove(evt)">
The next key is to use the onmousemove() event to call the doMouseMove() function whenever a user's mouse is over your SVG. The doMouseMove() function uses "evt.clientY" and "evt.clientX" to track the "x" and "y" position of the user's mouse.
<script type="JavaScript"><![CDATA[
function init(evt) {
svgdoc = evt.getCurrentNode().getOwnerDocument();
}
function doMouseMove(evt) {
var y = evt.clientY;
var x = evt.clientX;
var svgobj;
if (x > 20 && y > 20 && y < 150) {
svgobj = svgdoc.getElementById('vertLine')
svgobj.setAttribute("x1", x);
svgobj.setAttribute("x2", x);
svgobj = svgdoc.getElementById('horzLine')
svgobj.setAttribute("y1", y);
svgobj.setAttribute("y2", y);
}
}
]]></script>
This rectangle element will stretch to fill the entire background of the SVG document that contains it.
<rect width="100%" height="100%" rx="0" ry="0" x="0" y="0" style="fill:snow;" />
The following two line elements will stick to your mouse like a fly to a cow pie.
<line id="vertLine" x1="20" y1="20" x2="20" y2="150" style="stroke:#000000; stroke-width:.8; opacity:0.4">
<desc>Mouse Vertical Line</desc>
</line>
<line id="horzLine" x1="20" y1="100" x2="95%" y2="100" style="stroke:#000000; stroke-width:.4; opacity:0.4">
<desc>Mouse Horizontal Line</desc>
</line>
Give it a try. You're gonna love it.
Mousin' Around
|
|
|
