DIRECTORY
Main Menu
Affiliate Programs
Hosting
Traffic
Content
Billing
Design
show pic archive
Articles
Tutorials
Contact Us
Message Board

Advertising inquiries

 
Tutorials -
VML: Vector Markup Language

 

Vector...Hah?

Honest to goodness, that was my buddy's reaction when I finally figured out what this thing was. In short, VML allows you to set aside vectors on Web pages.

In shorter, you can draw shapes. Cool.

VML is not really a language unto itself but rather something that works as a namesake (ns) under XML, (eXtensible Markup Language). Using the power of XML, you can set aside specific sections (vectors) and fill them in with color and all sorts of other fun stuff.

The one downside of it all is that since this effect deals with XML, it is browser limited. You'll need to be running IE 5.0 or above to get the effect. Netscape Navigator will just simply ignore the commands and display nothing.

Prepare the Page
To get the effect, you'll need to have a couple of lines of code on the page that will assist in the effect. This is the first:

<HTML xmlns:v="urn:schemas-microsoft-com:vml">

That command replaces your basic, original <HTML> flag at the top of the HTML code. Note the attribute "xmlns" is setting an XML namesake and pointing the page towards a DTD where the supporting materials can be grabbed.

Next, you'll need to set a line in your Style Sheet block. If you don't have one, you'll need to create one. It looks like this:

v\:* {behavior:url(#default#VML);}

Again, this goes in your Style Block. If you don't have one -- create one.

Let's Draw!
Here's the code to make a yellow rectangle:

<v:rect style="width:150pt;height:50pt" fillcolor="yellow"></v:rect>

Here's what's happening:

* v:rect is reacting off of the line of text you set in the style sheet. If you remember, you set the letter "v" to a specific behavior. In this case, that behavior is going to be a four-cornered object. Yes, I know it reads "rect," buy you'll see that it can easily become a square.

* style="width:150pt;height:50pt" sets the height and the width of the element you're drawing. Change the numbers to your heart's content to get different sizes. Set the sizes equal and you'll get a square.

* fillcolor="yellow" fills the created shape with yellow. You can also use a hex code, just be sure to place a pound sign (#) in front of it.

* </v:rect> ends the flag. Remember that in XML, all flags must have close flags.

You don't need a "fillcolor" command. In fact, if you don't have one, you'll simply get the outline of the shape. here's the code above with the fillcolor attribute taken out.

 

by Joe Burns, Ph.D.
Please pass on any suggestions or comments to Shok.