Q1523 In a frames page, how do I set up the hover buttons in the contents section to remain the same as my mouseover image when clicked, in order to stay selected when loading the linked page?
You are here: irt.org | FAQ | JavaScript | Frame | Q1523 [ previous next ]
Have this in your menu:
<script language="JavaScript"><!--
if (document.images) {
image0on = new Image();
image0on.src = "aaa_on.gif";
image0off= new Image();
image0off.src = "aaa_off.gif";
image1on = new Image();
image1on.src = "bbb_on.gif";
image1off= new Image();
image1off.src = "bbb_off.gif";
image2on = new Image();
image2on.src = "ccc_on.gif";
image2off= new Image();
image2off.src = "ccc_off.gif";
}
saveImage = "";
function changeImages(imgName,img) {
if (document.images) {
if (saveImage == imgName) return;
document[imgName].src = eval(img + ".src");
}
}And this on the links:
<a href="aaa.html" onMouseOver="changeImages('image0', 'image0on')"
onMouseOut="changeImages('image0', 'image0off')"><img name="image0" SRC="aaa_off.gif" width=32
height=32 border=0
alt="Home"></a><br>
<a href="bbb.html" onMouseOver="changeImages('image1', 'image1on')"
onMouseOut="changeImages('image1', 'image1off')"><img name="image1" SRC="bbb_off.gif" width=32
height=32 border=0
alt="Feedback"></a><br>Have this in each page (assuming the images to stay depressed are in a frame called menu)
<script language="JavaScript"><!--
function depress(i) {
if (document.images && top.menu) {
if (top.menu.saveImage != '') {
top.menu.document.images[top.menu.saveImage].src=eval('top.menu.'+top.menu.saveImage+'off.src');
}
top.menu.document.images['image'+i].src= eval('top.menu.image'+i+'on.src');
top.menu.saveImage = 'image'+i;
}
}
depress(2); // the number in the bracket is the image number!!!
//--></script>