How to Combine 2 JS and DHTML Scripts?

[megler]

Hello!

I am trying to combine the functions of 2 scripts, but am not sure how. If anyone can help, I'd totally appreciate it. :-)

The first script is a Popup Box (DHTML Announcement Box) found on http://www.dynamicdrive.com/dynamicindex11/abox.htm - what I like is how the popup LOOKS. that is what I am ideally trying to create.

the catch is, I don't want it to pop up all by itself. I want it to popup on mouseover of specific text (kind of like a Kontera ad).

I found another script at http://www.dynamicdrive.com/dynamici...tmltooltip.htm - this accomplishes the onmouseover effect, but I don't like how the box looks.

Is there anyway to combine the 2 to that I can have the "pretty" box onmouseover of specific text?

thanks in advance for any advice.

Marceia

[megler]

ok, sleep has aided in refining my question a little bit. the onmouseover effects pulls from a CSS that defines the box I DON'T like:

<style type="text/css">

#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

</style>

This just makes a bland retactangle and whatever color you define. What I WANT is more of a table layout found here:

<div id="showimage" style="position:absolute;width:250px;left:250px;top:250px">

<table border="0" width="250" bgcolor="#000080" cellspacing="0" cellpadding="2">
  <tr>
    <td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0"
    height="36px">
      <tr>
        <td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" onMousedown="initializedrag(event)"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0"><font face="Verdana"
        color="#FFFFFF"><strong><small>Announcement Box</small></strong></font></layer></ilayer></td>
        <td style="cursor:hand"><a href="#" onClick="hidebox();return false"><img src="close.gif" width="16px"
        height="14px" border=0></a></td>
      </tr>
      <tr>
        <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">

<!-- PUT YOUR CONTENT BETWEEN HERE -->

Testing 1 2 3

<!-- END YOUR CONTENT HERE -->

</td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</div>

I've tried merely switching them out, but no luck. is there any advice on how I can use the 1st CSS to build the info in the 2nd set of code?

In hindsite, I'm probably in the wrong forum. I originally thought it was the javascript that was my issue. I now think it's CSS. i aplogize in advance if I've posted in the wrong place.

Marceia