O_Arrow - An interactive arrow - Download

O_Arrow is an SVG (Scalable Vector Graphics) powered arrow to give your homepage a didactic feature or a possibility to interactively point out the details that are important. O_Arrow.js is a free downloadable JavaScript file. Use it for free on your homepage or elsewhere. It is provided open source and widely used in the tutorials of this website.
The features for this early version(0.2) are:

SVG rendering
customizable color and width
customizable angle and length of the arrow head
customizable layering

Requirement: SVG capable browser with enabled JavaScript support.
The whole source code of O_Arrow.js is checked with the software quality tool JSLint.
Stay tuned for more features in the future versions.
To see how it works and looks like move your mouse over the following phrase "mouseover here":

mouseover here Destination

An orange arrow occurs pointing from "mouseover here" to "Destination".

At first you need to download the following zipped file with this link:

Download O_Arrow.zip

Unzip the archive and place the unpacked O_Arrow.js file in the directory where your JavaScript files are collected.
Next you need to set the path to the O_Arrow.js file with the common known <script> tag:


                                
                                <script type="text/javascript" src="-> your path here <-/O_Arrow.js"></script>

As usual you can place this line either in the <head> or somewhere in the <body> area.
Now give your destination where the arrow should point at an unique id. In the example above the destination is a <span> that gets the id "arrow_destination":


                                
                                <span id="arrow_destination">Destination</span>

The next thing is to give your "source" the right attributes. In this example it's a <span> again. (In general you can use any HTML element.)


                                
                                <span onmousemove="O_Arrow(this, 'arrow_destination', 18, 30, '#FF9900', 2);"         >mouseover here</span>

With the onmousemove event you call the O_Arrow-method which draws the arrow when the mouse pointer is moved over the element. The following parameters must be set:


                                
                                O_Arrow(src, destId, headLength, headAngle, color, strokeWidth, containerId);

src
This parameter should always be this (the HTML element itself).
destId
Sets the id of the destination as string (e.g. 'arrow_destination').
headLength
Sets the length of the arrow head as number of pixels.
headAngle
Sets the angle of the head wings of the arrow as degrees.
color
Sets the color of the arrow with the HTML color format as string.
strokeWidth
Sets the width of the arrow as number of pixels.
containerId
Optional parameter to set an overlapping layer under which the arrow must be rendered. This is useful for example if you have an transparent layer through which the arrow should be seen. Set this parameter with a string naming the id of the overlapping layer.

Hint: One HTML element with an certain id can be the destination of more than one arrow.
Have fun to point something out.

Here are more examples:

Version history:
0.2: 08-26-2013 to achieve a better head the arrow uses SVG path rendering

Websites that use O_Arrow.js: