jubei
-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by jubei
-
-
Here is what i did and it's looks really weird. Let me know what i'm doing wrong.Ok i think i get what you mean now, a tooltip: http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htmJust update this bitddrivetip('<table>blah blah</table>', 'OPTIONAL BACKGROUND COLOR', OPTIONAL TIP WIDTH)I tried looking at that site but it never worked.<html><head><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><style type="text/css">h1{text-align: left;color: yellow;font-family: arial} h2{text-align: left;color: green;font-family: arial} h3{text-align: left;color: black;font-family: arial} h4{text-align: left;color: blue;font-family: arial} </style></head><body><div id="dhtmltooltip"></div><script type="text/javascript">/************************************************ Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)* This notice MUST stay intact for legal use* Visit Dynamic Drive at [url="http://www.dynamicdrive.com/"]http://www.dynamicdrive.com/[/url] for full source code***********************************************/var offsetxpoint=-60 //Customize x offset of tooltipvar offsetypoint=20 //Customize y offset of tooltipvar ie=document.allvar ns6=document.getElementById && !document.allvar enabletip=falseif (ie||ns6)var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""function ietruebody(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function ddrivetip(thetext, thecolor, thewidth){if (ns6||ie){if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolortipobj.innerHTML=thetextenabletip=truereturn false}}function positiontip(e){if (enabletip){var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;//Find out how close the mouse is to the corner of the windowvar rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000//if the horizontal distance isn't enough to accomodate the width of the context menuif (rightedge<tipobj.offsetWidth)//move the horizontal position of the menu to the left by it's widthtipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"else if (curX<leftedge)tipobj.style.left="5px"else//position the horizontal position of the menu where the mouse is positionedtipobj.style.left=curX+offsetxpoint+"px"//same concept with the vertical positionif (bottomedge<tipobj.offsetHeight)tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"elsetipobj.style.top=curY+offsetypoint+"px"tipobj.style.visibility="visible"}}function hideddrivetip(){if (ns6||ie){enabletip=falsetipobj.style.visibility="hidden"tipobj.style.left="-1000px"tipobj.style.backgroundColor=''tipobj.style.width=''}}document.onmousemove=positiontip</script><a href="http://www.yahoo.com" onMouseover="ddrivetip('<table width="200" border="1" bgcolor="#000000"><tr><td><h1>Weak Troll's Blood Potion</h1><br><h2><u>Use:</u>Regeneration</h2><br><h3>Cooldown: 3 sec</h3><br><h3>Charges: 1(expandable)</h3><br><h3>Item Level 8</h3><br><h4>Source:Recipe,Vendor,Quest</h4></td></tr></table>')"; onMouseout="hideddrivetip()">Search Engine</a></body></html>
-
What i was thinking of is when you put your cursor over a link you will see an "alt" I wanted to make the same affect but add it in a table with CSS effects. If you put your cursor over the Clickable Smiles in the window when you post a message it will say "Smilie" I want to do the same think. For an example go to www.thottbot.com and click on alchemy and you will see a list put your cursos over the image and you will see a description. I would like to make the same effect but with different writing and colors.Create the table when the page loads but set it's display to none, then when you mouse over something set it's display to block.<input type="button" value="Create Table" onmouseover="mydiv.style.display='block'" /><div id="mydiv" style="display:none"><table border="1" width="50%"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></div>
-
I would like to create a table once you do a on mouse over. I found a website that does what i need to do. I want to just create a table sort of like this.
<script type="text/javascript"> i311 = "<table width=250> <tr> <td colspan=2> <span> Weak Troll's Blood Potion </span></td> </tr> <tr><td colspan=2> <a class='spell' href='?sp=3219'> <u>Use</u>: Regenerate 2 health every 5 sec for 1 hour.</a></td></tr> <tr><td colspan=2>Cooldown: 3 sec</td></tr> <tr><td colspan=2>Charges: 1 (Expendable)</td></tr> <tr><td colspan=2>Item Level 8</td></tr> <tr><td colspan=2><small><font color='#7777FF'>Source: Recipe, Vendor, Quest</font></small></td></tr> <tr><td colspan=2><h6>mhotch <font color=88FF88>Live (1.10.1)</font></h6></td></tr></table>"; </script> <img alt='' src='http://i72.thottbot.com/en/Interface/Icons/INV_Potion_77.jpg' width=32 height=32 onmouseover='tt(i311);' onmouseout='ctt();' border=0></td> <td valign=middle><a href='?i=311'>Weak Troll's Blood Potion</a></td></tr></table></td> </tr></table></script>
With no luck
Onmouseover table
in JavaScript
Posted
thank you very much that worked great. thanks again for the help