[Javascript] Q on CSS

[Walter Torres]

I have a need to create a region that will contain an image and 1 or 2 words
of text

I am trying to get the region that contains the text to be directly on top-
of the region that contains the image. And both need to be within a parent
region so that this parent can be placed where ever I wish and both child
regions will follow automatically

   ______________________
   | __________________ |
   | | ______________ | |<-- Parent region (place anywhere)
   | | |            | |<|--- image region  (follow parent)
   | | |            |<|-|--- text region   (follow parent)
   | | |____________| | |
   | |________________| |
   |____________________|


Yes, I understand that I can place an image in the background of a region
(DIV/SPAN/TD) but using that method there is not a way to use array cached
images and swap them out for different mouse events.

I do this for array cached images...

// Array Object to store Button Image URLs
var aryBtns = new Array();

	aryBtns.blue     = new Array();
	aryBtns.blue.up  = new Image(74, 27);  aryBtns.blue.up.src  =
'./dialogs/images/Short_Slug-up.gif';
	aryBtns.blue.dn  = new Image(74, 27);  aryBtns.blue.dn.src  =
'./dialogs/images/Short_Slug-dn.gif';

with these methods...

function _mouseDown(objBtn)
{
	objBtn.src = aryBtns.blue.dn.src;
}

function _mouseUp(objBtn)
{
	objBtn.src = aryBtns.blue.up.src;

}

If I use the 'backgroundImage' style, I have to do this...

  .btn
   {
      background-image : url(./images/Short_Slug-up.gif);
      width: 74;
      height: 27;
   }

   <span class='btn'>

with these methods...

function _mouseDown(objBtn)
{
	alert ( objBtn.style.backgroundImage.src );

	objBtn.style.backgroundImage = 'url(./images/Short_Slug-dn.gif)';
}

function _mouseUp(objBtn)
{
	objBtn.style.backgroundImage = 'url(./images/Short_Slug-up.gif)';

}

The first method is much more effective than the second.

Thus my question.

How can I get these regions to float in relation to each other?

Thanks

Walter