Jump to content

Onmouseover table


jubei

Recommended Posts

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

Link to comment
Share on other sites

I would like to create a table once you do a on mouse over.

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>

Link to comment
Share on other sites

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>

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.
Link to comment
Share on other sites

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.

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.
Link to comment
Share on other sites

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.

:) Here is what i did and it's looks really weird. Let me know what i'm doing wrong. :)
<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>

Link to comment
Share on other sites

:) Here is what i did and it's looks really weird. Let me know what i'm doing wrong. :)
I think your quotes were causing you grief, this should get you going :)
<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></head><body><DIV onMouseover="ddrivetip('<table border=\'1\'><tr><td>hello</td><td>World</td></tr><tr><td>Good</td><td>Afternoon</td></tr></table>', '#EFEFEF')" onMouseout="hideddrivetip()">Some text here. Some text here.</div><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></body></html> 

Link to comment
Share on other sites

Well, if you dont want to use that freaking much coding here is some simpler coing using the first post example..

<HTML><HEAD><TITLE> Text </TITLE></HEAD><BODY><table><tr><td><a href="#" onmouseout="mydiv1.style.display='none'" onmouseover="mydiv1.style.display='block'">table 1</a></td><td><a href="#" onmouseout="mydiv2.style.display='none'" onmouseover="mydiv2.style.display='block'">table 2</a></td><td><a href="#" onmouseout="mydiv3.style.display='none'" onmouseover="mydiv3.style.display='block'">table 3</a></td><td><a href="#" onmouseout="mydiv3.style.display='none'" onmouseover="mydiv4.style.display='block'">table 4</a></td></tr></table><table id="mydiv1" border="1" style="display:none;"><tr><th>TABLE 1</th></tr></table><table id="mydiv2" border="1" style="display:none;"><tr><th>TABLE 2</th></tr></table><table id="mydiv3" border="1" style="display:none;"><tr><th>TABLE 3</th></tr></table><table id="mydiv4" border="1" style="display:none;"><tr><th>TABLE 4</th></tr></table></BODY></HTML>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...