Hi,
I'm working on creating a double rollover, one of which will be editable text. So far I've been able to create the rollover with the text field, but having difficulty figuring how to code the image rollover as well.
Basically when a user rolls over 'button 1' I want to display an image and the text as a double rollover. Below is sample code I have so far - any help appreciated!
<html>
<head>
<style type="text/css">
#thetext {
position:absolute;
top:10px;
left:350px;
width:200px;
border:solid 1px #990000;
background:#c0c0ff;
padding:5px;
font-family:verdana;
font-size:10px;
text-align:left;
}
#container {
position:absolute;
top:210px;
left:10px;
width:290px;
border:solid 1px #000000;
background:#ffffff;
padding:4px;
}
</style>
<script language="javascript">
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
test1 = newImage("images/test1.jpg");
test2 = newImage("images/test2.jpg");
test3 = newImage("images/test3.jpg");
test4 = newImage("images/test4.jpg");
preloadFlag = true;
}
}
function toggle(id,text,img){
d=document.getElementById(id);
d.innerHTML=text;
}
</script>
</head>
<body ONLOAD="preloadImages();">
<div id="container">
<span><a href="http://www.surfpulse.com/surf_report.shtml" onmouseover="toggle('thetext','First bunch of test text.','test1.jpg')" onmouseout="toggle('thetext','')">Button 1</a></span>
<span><a href="" onmouseover="toggle('thetext','Second bunch of test text.')" onmouseout="toggle('thetext','')">Button 2</a></span>
<span><a href="" onmouseover="toggle('thetext','Third bunch of test text.')" onmouseout="toggle('thetext','')">Button 3</a></span>
<span><a href="" onmouseover="toggle('thetext','Fourth bit ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus. Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus.')" onmouseout="toggle('thetext','')">Button 4</a></span>
<div>
<div id="thetext"></div>
</body>
</html>
