Logged out.

Learn
  SVG Forum
  Tutorials
  Resources 

Create
  Elf Workshop
  Downloads 

SVG Elves
  About
  Feedback
 


SVG 1.1
DOM Home
XML Home
CSS Home
XSLT Home
XPATH

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
     
 

Home | Add an Article, Tutorial, or Tool | SVG Tutorial | SVG

Professional Marketing Consulting Services

Stephen W. Thomas's BizTalk Server Blog | FunWadi.com Free Music

New Eastside | Moving Companies | mini itx | Australian Horse Racing

Matrix Sunglasses | Car Leasing UK | Buy Your Car Used Cars, Car Lease and Contract Hire

Used Car Trader - Used Cars | Electric Scooters, Gas Scooters, Pocket Bike Reviews

Search for Sapphire Jewelry Deals | Columbia MO Real Estate

Tradebit: Download Guides, Service Manuals, and more

Info Moving relocation service and moving information

Exchange Server
Century Computing are experts in the installation, configuration, repair and upgrading of the entire Microsoft Exchange Server family; having in excess of 100 years IT experience.

Website Designers
Our professional website designers can make websites that you update yourself! Add text and images whenever you need to. See online!

© 2000 - 2008 SVG Elves