Trying to create mouseover that displays hidden infomation

Discussion in 'JavaScript' started by ziplock122949, Feb 15, 2011.

0
  1. #1
    I am trying to create a mouseover that displays hidden information. I know this is a javascript/css combo. I have seen this before and an example would be alltop.com. I do not know enough coding to even attempt this past what I have

    
<td onmouseover="" onmouseout="">
<h2 class="title"><a href=http://example.com/>Title text</a><h2>
<div class="published">the date</div>
<div class="summary">all the text goes here</div>
</td>
    Code (markup):

     
    ziplock122949, Feb 15, 2011 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Had trouble getting it to work for a single cell, but it works fine when I use a table and inner div.
    
<html>
<head>
<script type='text/javascript'>
function hide() {
	document.getElementById('hide').style.visibility='visible';
}

function show() {
	document.getElementById('hide').style.visibility='hidden';
}
</script>
<style type='text/css'>
#hide { visibility: hidden; }
</style>
</head>
<body>
<table>
<td onmouseover="hide()" onmouseout="show()">
<div id='hide'>
<h2 class="title"><a href=http://example.com/>Title text</a><h2>
<div class="published">the date</div>
<div class="summary">all the text goes here</div>
</div>
</td>
</table>
</div>
</body>
</html>
    Code (markup):
     
    Last edited: Feb 17, 2011
    Cash Nebula, Feb 17, 2011 IP