stratton
04-08-2007, 02:37 AM
I have a page that i am trying to design with image on and off states.
On the page, i have 6 pictures at people at the top --- then the user can click on the image ---the page reloads because I am passing the pubid varable in the url and the text below the image changes.
What i am having trouble with is
1. I want the picture to remain "on" when the page reloads so the user know the text is associated with that person. .
It seems like it should be easy but i can't get anywhere with it.. i am just going in circles...
here is an example of what i am working with---
(I am open to completely starting over if there is a better approach...)
Thank you...thank you for any help in advance.......
<script type="text/javascript">
<!--
function switchimage(imgDocID,imgObjName)
{
document[imgDocID].src = eval(imgObjName + ".src");
}
img1 = new Image(90,90);
img1.src = "../images/personA.jpg";
img2 = new Image(90,90);
img2.src = "../images/personA_off.jpg";
img3 = new Image(90,90);
img3.src = "../images/personB.jpg";
img4 = new Image(90,90);
img4.src = "../images/personB_off.jpg";
//-->
</script>
<a href="alumni_stories.jsp?pubID=1705" onmouseover="switchimage('personA','img1');" onmouseout="switchimage('personA','img2');"><img src="../images/personA_off.jpg" name="personA" width="90" height="90" border="0"></a>
<a href="alumni_stories.jsp?pubID=1595" onmouseover="switchimage('personB','img3');" onmouseout="switchimage('personB','img4');"><img src="../images/personB_off.jpg" name="personB" width="90" height="90" border="0"></a>
On the page, i have 6 pictures at people at the top --- then the user can click on the image ---the page reloads because I am passing the pubid varable in the url and the text below the image changes.
What i am having trouble with is
1. I want the picture to remain "on" when the page reloads so the user know the text is associated with that person. .
It seems like it should be easy but i can't get anywhere with it.. i am just going in circles...
here is an example of what i am working with---
(I am open to completely starting over if there is a better approach...)
Thank you...thank you for any help in advance.......
<script type="text/javascript">
<!--
function switchimage(imgDocID,imgObjName)
{
document[imgDocID].src = eval(imgObjName + ".src");
}
img1 = new Image(90,90);
img1.src = "../images/personA.jpg";
img2 = new Image(90,90);
img2.src = "../images/personA_off.jpg";
img3 = new Image(90,90);
img3.src = "../images/personB.jpg";
img4 = new Image(90,90);
img4.src = "../images/personB_off.jpg";
//-->
</script>
<a href="alumni_stories.jsp?pubID=1705" onmouseover="switchimage('personA','img1');" onmouseout="switchimage('personA','img2');"><img src="../images/personA_off.jpg" name="personA" width="90" height="90" border="0"></a>
<a href="alumni_stories.jsp?pubID=1595" onmouseover="switchimage('personB','img3');" onmouseout="switchimage('personB','img4');"><img src="../images/personB_off.jpg" name="personB" width="90" height="90" border="0"></a>