New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

IE5+

Spider web link effect

Author: Dynamic Drive

Note: Modified slightly by DD to disable horizontal scrollbar. Read important note below.

Description: Creativity and ingenuity come together here to form one of the most unique onMouseover effects for your links. With the help of VML, a "spider web" follows the mouse, and expands when moved over designated links. Awesome effect that degrades well with non IE5+ browsers.

Demo: "Just move your mouse over this textlink to see the highlight effect. The script even allows you to use different highlight colors on the very same webpage as this textlink and this textlink are demonstrating."


Directions: Developer's View

Step 1: Insert the following stylesheet into the <head> section of your page:

Select All

Step 2: Insert the below code into the BODY section of your page, immediately following the <BODY> tag itself:

Select All

With the above in place, to give a particular text link on your page the spider effect, add to it the below onMouseover/onMouseout code, as shown here:

<a href="http://mydomain.com" onMouseOver="msover('#FFEEEE')" onMouseOut="msout()">
Test link</a>

Enjoy!

Important note

This script explicitly disables the horizontal scrollbar of the browser, which the spider effect adds, from appearing. If your page contains content which may require the H scrollbar to view (ie: a table with width set to 1500px, text wrapped inside a <nobr> tag etc, you will want to take out the code:

.disableHscroll{
width:100%;overflow-x:hidden;overflow-y:scroll;
}

from the style sheet of Step 1. This throws back in the horizontal scrollbar.