I have a HTML (see below) with functions to swap images in one table cell (imageframe) and texts into another cell (textframe). I set a background-image (backimg.jpg) in the textframe. Now I would like to link one background-image (backimg1.jpg) to choice1 and another one (backimg2.jpg) to choice2. I have no idea how to do this. With CSS? Can anyone help? <br />
<br />
Kippie <br />
<br />
The code so far is:<br />
<html> <br />
<head> <br />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <br />
<meta name="generator" content="Adobe GoLive 4"> <br />
<script language="JavaScript" name="WZW"><!-- <br />
//These are the images to appear in the image frame <br />
<br />
alt1 = new Image(); <br />
alt1.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"img1.jpg"; <br />
<br />
alt2 = new Image(); <br />
alt2.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"img2.jpg"; <br />
// --> <br />
</script> <br />
<br />
<script language="JavaScript" name="CQ"><!-- <br />
//These are the texts to appear in the textframe <br />
var msg1 = 'This is Message 1' <br />
var msg2 = 'And this is Message2' <br />
<br />
//This is the functions to change text: <br />
function htmlChange(id,message){ <br />
d=document; <br />
re=d.all?d.all[id]:d.getElementById(id); <br />
re.innerHTML=message; <br />
} <br />
<br />
//This is the function to change an image <br />
function rewriteImg(id,imgName){ <br />
d=document; <br />
re=d.all?d.all[id]:d.getElementById(id); <br />
re.innerHTML="<img src='http://www.htmlforums.com/archive/index.php/"+eval(imgName + ".src")+"'>"; <br />
} <br />
<br />
//this is a function not used in this html <br />
function changeImg(id,imgName){ <br />
document.images[id].src=http://www.htmlforums.com/archive/index.php/eval(imgName+".src"); <br />
} <br />
<br />
// --> <br />
</script> <br />
<br />
</head> <br />
<br />
<body> <br />
<table name="bigtable" border="1" width="570" height="357" cellpadding="0" cellspacing="0"> <br />
<tr height="14"> <br />
<td id="headmenu" colspan="2" height="14"> <br />
<a href=http://www.htmlforums.com/archive/index.php/"/" onmouseover="htmlChange('textframe',msg1); <br />
rewriteImg('imageframe','alt1');">Choice1</a> <br />
<a href=http://www.htmlforums.com/archive/index.php/"/" onmouseover="htmlChange('textframe',msg2); <br />
rewriteImg('imageframe','alt2');">Choice2</a> <br />
</td> <br />
</tr> <br />
<tr height="301"> <br />
<td id="imageframe" width="226" height="301"> <br />
<img src=http://www.htmlforums.com/archive/index.php/"img0.jpg" height="301"> <br />
</td> <br />
<td id="cell for texttable" valign="middle" height="301"> <br />
<table border="3" cellpadding="15" width="344" height="100%"> <br />
<tr> <br />
<td id="textframe" background-image="backimg.jpg">Starting Text</td> <br />
</tr> <br />
</table> <br />
</td> <br />
</tr> <br />
</table> <br />
</body> <br />
<br />
</html> <br />
<br />
Kippie<!--content-->try this website (<!-- m --><a class="postlink" href="http://www.w3schools.com">http://www.w3schools.com</a><!-- m -->)<!--content-->gaussie<br />
<br />
there's no point replying to two year old threads, it is very likely that that person is no longer active on the forums.<!--content-->i just looked for unanswered posts and clicked a random 1!<!--content-->
<br />
Kippie <br />
<br />
The code so far is:<br />
<html> <br />
<head> <br />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <br />
<meta name="generator" content="Adobe GoLive 4"> <br />
<script language="JavaScript" name="WZW"><!-- <br />
//These are the images to appear in the image frame <br />
<br />
alt1 = new Image(); <br />
alt1.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"img1.jpg"; <br />
<br />
alt2 = new Image(); <br />
alt2.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a><!-- m -->"img2.jpg"; <br />
// --> <br />
</script> <br />
<br />
<script language="JavaScript" name="CQ"><!-- <br />
//These are the texts to appear in the textframe <br />
var msg1 = 'This is Message 1' <br />
var msg2 = 'And this is Message2' <br />
<br />
//This is the functions to change text: <br />
function htmlChange(id,message){ <br />
d=document; <br />
re=d.all?d.all[id]:d.getElementById(id); <br />
re.innerHTML=message; <br />
} <br />
<br />
//This is the function to change an image <br />
function rewriteImg(id,imgName){ <br />
d=document; <br />
re=d.all?d.all[id]:d.getElementById(id); <br />
re.innerHTML="<img src='http://www.htmlforums.com/archive/index.php/"+eval(imgName + ".src")+"'>"; <br />
} <br />
<br />
//this is a function not used in this html <br />
function changeImg(id,imgName){ <br />
document.images[id].src=http://www.htmlforums.com/archive/index.php/eval(imgName+".src"); <br />
} <br />
<br />
// --> <br />
</script> <br />
<br />
</head> <br />
<br />
<body> <br />
<table name="bigtable" border="1" width="570" height="357" cellpadding="0" cellspacing="0"> <br />
<tr height="14"> <br />
<td id="headmenu" colspan="2" height="14"> <br />
<a href=http://www.htmlforums.com/archive/index.php/"/" onmouseover="htmlChange('textframe',msg1); <br />
rewriteImg('imageframe','alt1');">Choice1</a> <br />
<a href=http://www.htmlforums.com/archive/index.php/"/" onmouseover="htmlChange('textframe',msg2); <br />
rewriteImg('imageframe','alt2');">Choice2</a> <br />
</td> <br />
</tr> <br />
<tr height="301"> <br />
<td id="imageframe" width="226" height="301"> <br />
<img src=http://www.htmlforums.com/archive/index.php/"img0.jpg" height="301"> <br />
</td> <br />
<td id="cell for texttable" valign="middle" height="301"> <br />
<table border="3" cellpadding="15" width="344" height="100%"> <br />
<tr> <br />
<td id="textframe" background-image="backimg.jpg">Starting Text</td> <br />
</tr> <br />
</table> <br />
</td> <br />
</tr> <br />
</table> <br />
</body> <br />
<br />
</html> <br />
<br />
Kippie<!--content-->try this website (<!-- m --><a class="postlink" href="http://www.w3schools.com">http://www.w3schools.com</a><!-- m -->)<!--content-->gaussie<br />
<br />
there's no point replying to two year old threads, it is very likely that that person is no longer active on the forums.<!--content-->i just looked for unanswered posts and clicked a random 1!<!--content-->