Tutorials

Tutorials - 5 - Positioning Images
Sometimes, in fact, very often, you will need to align images in
several items. An example can be seen here.
As you will see on this page when you right-click, the images
in the bottom two items are perfectly aligned. This tutorial will show you how to easily achieve this effect.
1. Why WebDDM has no automatic solution
WebDDM has no automatic "easy" way to align images. Although it may
seem like a downfall, it is actually one of the strengths of WebDDM.
Instead of doing everything for you, WebDDM lets you take
control.
Why the automatic solution is baC:
- It makes everything MUCH slower
- It actually makes the effect harder to integrate into your menu.
- It does everything for you, leaving you no way to customize anything.
2. How to achieve the effect
Instead of having WebDDM do alignments automatically for you, you can
use a simple element of HTML to achieve the same effect and
have more control over how things look.You can simply insert a <SPAN> tag with absolute positioning into the "content" attribute of your item.
3. The code
// Begin menu...
// Begin item 1
1:{
// Content of this item
'content':'Menu with Image' +
'<span style="position: absolute; top: 15; left: 90;";>' +
'<img src="path/to/img.gif" />' +
'</span>',
// Other attributes ...
}
// End item 1
// End menu...
Remember: the top and left attributes
define the position from the top, left corner of the
parent element - that means that if you set top
and left to 0, the image will appear in the top,
left corner of the item.
Tutorials
Tutorials: Last - Next