SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast megler's Avatar
    Join Date
    May 2006
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to Combine 2 JS and DHTML Scripts?

    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

  2. #2
    SitePoint Enthusiast megler's Avatar
    Join Date
    May 2006
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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:


    Code:
    <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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •