McArthur GFX

MooTools is a wonderful JavaScript framework, and since the actual community can be a scary place, I took it upon myself to share the effects I learn how to create. The first effect is getting a tooltip to contain an image.

The Framework

First, we need to download the MooTools framework. The MooTools site has an easy enough download page, but to keep problems from occuring, simply download every part of the framework (compressed, of course). You can select them all by typing “javascript:Download.all()” in the URL once on the Download page. Save it however you like, I call it “mootools.js”.

The Styling

We need to style the tooltip boxes, and I did so in a seperate stylesheet. Here’s mine, I assume you to understand CSS and able to modify as you wish:

.tool-tip {
color: #fff;
width: 320px;
z-index: 13000;
}

.tool-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #9FD4FF;
padding: 8px 8px 4px;
background: #444;
}

.tool-text {
font-size: 11px;
padding: 4px 8px 8px;
background: #444;
}

.custom-tip {
color: #000;
width: 130px;
z-index: 13000;
}

.custom-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #3E4F14;
padding: 8px 8px 4px;
background: #C3DF7D;
border-bottom: 1px solid #B5CF74;
}

.custom-text {
font-size: 11px;
padding: 4px 8px 8px;
background: #CFDFA7;
}

The Effect

Now we need to create the effect. This part is rather simple; their tool tips is kind of plug and play, but getting it to show the image required some help. You can make this in a script tag in the header, but I prefer to create its own .js file and link to it. Here’s the code I have:

window.addEvent(’domready’, function(){
/* Tips 1 */
var Tips1 = new Tips($$(’.tips’));
});

We want to wrap it all inside a DOMReady event. Then we create a new object from the class Tips, which will search through our document and find all items with the class=”tips” and attach the Tips effect.

Adding The Thumbnail

I’ll show you the xHTML I used and explain it.

<span><a href=”http://www.fabricantekitchens.com/” id=”fkc” class=”tips” title=”&l t;img src=http://mcarthurgfx.com/wp-content/themes/flowerpower/images/tips_fkc.png /&g t;“>Fabricante Kitchen Creations</a></span>

I gave this anchor the class “tips”. Tips will then create a tooltip when you mouse over the anchor, displaying the info from the href and title fields. So I needed to add the image into the title, but the normal img markup will kill the anchor. Shown are the codes for the open and close brackets, without the space between. You have to use the character entities in the title. Once the effect reads it in though, it will think its the actual markup.

Fabricante Kitchen Creations

Now our tooltips reads in our image, and the anchor isn’t broken. Hurray for MooTools. Hope this helped, I plan on showing how to do more effects as time permits.