638
x and y position i havent done it before , always used the prototypes for such things ,here is my code snippet
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
- <title><?=SITE_TITLE;?></title>
- <style type="text/css">
- .popup {
- position:absolute;
- visibility:hidden;
- }
- </style>
- <script type="text/javascript">
- function putIF(hldr,x,y,w,h,url){// description of the arguments below
- if(prevTip!=url){
- holder=document.getElementById(hldr); //wrap around div
- holder.innerHTML="";
- holder.style.visibility='visible';
- holder.style.display='block'; // the div gets styled
- holder.style.position='absolute';
- holder.style.left=x;
- holder.style.top=y;
- holder.style.width=w;
- var page="tooltip_new.php?item_name="+url;
- xmlTip=GetXmlHttpObject();
- if(xmlTip==null){
- msg_divs('error','400px','780px','400px','400px',"You Have to upgrade the browser");
- return;
- }else{
- xmlTip.onreadystatechange=$_tip;
- xmlTip.open("GET",page,true);
- xmlTip.send(null);
- }
- }
- prevTip=url;
- }
- function $_tip(){
- if(xmlTip.readyState==4){
- if(xmlTip.status==200){
- document.getElementById("tip").innerHTML=xmlTip.responseText;;
- }
- }
- }
- function closeIF(obj){// the close is simple we just clear out the div
- document.getElementById(obj).innerHTML='';
- holder.style.visibility='hidden';
- holder.style.display='none';
- prevTip="";
- }
- </script>
- </head>
- <body>
- <tr>
- <td align="left" valign="top" width="727">
- <div id="AddOn_div">
- <table cellspacing="0" cellpadding="0" border="0" align="left" width="727">
- <tr>
- <td align="left" valign="top" width="9"></td>
- <td align="left" valign="top" width="133">
- <div id="ahsi_div" onmouseover="putIF('tip','210px','780px','400px','400px','AHSI');" onmouseout="closeIF('tip');">
- <img id="ahsi" name="off" src="images/ahsi_off.gif" width="133" height="60" border="0" alt="" onclick="AddOnFor(this.id,0,12);" style="cursor:pointer;" />
- </div>
- </td>
- <td align="left" valign="top" width="9"></td>
- <td align="left" valign="top" width="133">
- <div id="pu-nc_wrap_div" onmouseover="putIF('tip','350px','780px','400px','400px','PUNC');" onmouseout="closeIF('tip');"><img id="pu-nc_wrap" name="off" src="images/pu-nc_wrap_off.gif" width="133" height="60" border="0" alt="" onclick="AddOnFor(this.id,0,8);" style="cursor:pointer;" />
- </div>
- </td>
- <td align="left" valign="top" width="9"></td>
- <td align="left" valign="top" width="133">
- <div id="omega_div" onmouseover="putIF('tip','495px','780px','400px','400px','OMEGA');" onmouseout="closeIF('tip');">
- <img id="omega" name="off" src="images/omega_off.gif" width="133" height="60" border="0" alt="" onclick="AddOnFor(this.id,0,15);" style="cursor:pointer;" />
- </div>
- </td>
- <td align="left" valign="top" width="9"></td>
- <td align="left" valign="top" width="133">
- <div id="cr_39_div" onmouseover="putIF('tip','635px','780px','400px','400px','CR-39');" onmouseout="closeIF('tip');">
- <img id="cr_39" name="off" src="images/cr_39_off.gif" width="133" height="60" border="0" alt="" onclick="AddOnFor(this.id,0,14);" style="cursor:pointer;" />
- </div>
- </td>
- <td align="left" valign="top" width="9"></td>
- <td align="left" valign="top" width="133">
- <div id="quadcore_div" onmouseover="putIF('tip','635px','780px','400px','400px','CR-39');" onmouseout="closeIF('tip');">
- <img id="quadcore" name="off" src="images/quadcore_off.gif" width="133" height="60" border="0" alt="" onclick="AddOnFor(this.id,0,17);" style="cursor:pointer;" />
- </div>
- </td>
- <td align="left" valign="top" width="11">
- <img src="images/submitdesign_27.gif" width="11" height="60" border="0" alt="" />
- </td>
- </tr>
- </table>
- </div>
- </td>
- </tr>
- <div id="tip" class="popup" style="width:324px;"></div>
- </body>
file_name=tooltip_new.php(the file from where the toltip text is responsed)
Expand|Select|Wrap|Line Numbers
- <?
- include("includes/config.php");
- $item=$_GET["item_name"];
- $sql_tip="SELECT
- item_text,item_name,item_heading
- FROM
- myrage_tooltip
- WHERE(myrage_tooltip.item_name ='$item')";
- $res_tip=mysql_query($sql_tip)or die(mysql_error()."<br />".$sql_tip);
- if(mysql_num_rows($res_tip)){
- $f=mysql_fetch_array($res_tip);
- }
- ?>
- <link rel="stylesheet" type="text/css" href="includes/styles.css"/>
- <table cellspacing="0" cellpadding="0" border="0" align="center" width="324">
- <tr><td align="center" valign="top"><img src="images/tooltip_anchor.gif" width="15" height="8" border="0" alt="" /></td></tr>
- <tr><td align="center" valign="middle" style="background-image:url(images/tooltip_head.gif);" class="text_greyblack_12"><?=$f["item_heading"];?></td></tr>
- <tr><td align="center" valign="bottom" style="background-color:#FFB100;"><img src="images/tooltip_border.gif" width="300" height="2" border="0" alt="" /></td></tr>
- <tr>
- <td align="center" valign="bottom" width="324">
- <table cellpadding="0" cellpadding="0" align="center" width="324" border="0" style="background-color:#FFB100; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#000000; text-align:center;">
- <tr><td align="center" valign="middle"> </tr>
- <tr><td align="center" valign="middle" width="300"><?=$f["item_text"];?></td></tr>
- </table>
- </td>
- </tr>
- <tr><td align="center" valign="middle"><img src="images/tooltip_bottom.gif" width="324" height="14" border="0" align="" /></td></tr>
- </table>
regards ,
Omer
