Hi there farley89hd,
have a look at this example that uses onclick rather than onmouseover...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#info {
font-size:16px;
text-align:center;
margin-top:40px;
}
#q {
width:150px;
height:30px;
line-height:30px;
border:2px solid #999;
text-align:center;
overflow:hidden;
margin:20px auto;
}
.qc {
background-color:#333;
color:#ccc;
}
.ac {
background-color:#ccc;
color:#333;
}
</style>
<script type="text/javascript">
var qs=new Array();
qs[0]='question 1';
qs[1]='question 2';
qs[2]='question 3';
qs[3]='question 4';
var as=new Array();
as[0]='answer 1';
as[1]='answer 2';
as[2]='answer 3';
as[3]='answer 4';
var c=29;
var k=1;
var n=0;
test=0;
var obj;
var speed=25;
var delay=2000;
window.onload=function() {
obj=document.getElementById('q');
obj.onclick=function() {
showAnswer();
}
}
function showAnswer() {
if(k==30){
k=1;
c=29;
if(n==qs.length-1) {
n=0;
}
else{
n++;
test=0;
clearTimeout(show);
setTimeout('obj.className=\'qc\';obj.firstChild.nodeValue=qs[n]',delay);
return;
}
}
if(c==0){
test=1;
k++;
obj.className='ac';
obj.style.height=k+'px';
obj.firstChild.nodeValue=as[n];
}
else{
if(test==0){
c--;
obj.style.height=c+'px';
}
}
show=setTimeout('showAnswer()',speed)
}
</script>
</head>
<body>
<h1 id="info">Click question to get an answer, there is then a predetermined delay before the next question.</h1>
<div id="q" class="qc">question 1</div>
</body>
</html>