I have several pages that I want to allow the same kind of activity,
so my basic question is how best to structure the interaction (and I
have one related subquestion as well).
Scenario: The user clicks a hyperlink and opens a new window in which
there is a bit of explanatory text. This text will be different for
every link. In addition, there is an image on the page which can be
clicked to close the new window.
(This image should rollover on mousing over and out of the image: I
haen't been able to make this work yet; help?)
I would like to pass the text, and the necessary window size (just big
enough for the text)to be used to a common function that I can use
over and over again by calling that function when the user clicks the
link. And I need to be able to have the Close image have rollover
capability when the new window opens.
I don't want to creat an html doc for this and call it if that is at
all possible.
The code I have used is below, but it's too clunky and cannot be
reused easily:
function rollImages(){
if (document.images){
changeClose = new Image;
simpleClose = new Image;
changeClose.src = "../../../../../Generic_Images/close_over_v2.gif";
simpleClose.src = "../../../../../Generic_Images/close_v2.gif";
if (card.Close.src = "../../../../../Generic_Images/close_v2.gif"){
alert("I see it");
//card.Close.src =
"../../../../../Generic_Images/close_over_v2.gif";
}
//else{card.Close.src =
"../../../../../Generic_Images/close_v2.gif";}
}
else {
changeClose = "";
simpleClose = "";
document.Close = "";
}
}
function newCardWindow(){
cardHolder=window.open("", "card",
"resizable=no,width=250,height=110")
cardHolder.document.write("<html><head><title>Who is the card
holder?<\/title><\/head><body bgcolor=\"#ffffff\"
style=\"font-family:arial;\"><p>This is the person to whom the card
was officially issued during the enrollment process.<\/p><div
style=\"background-color:#00005e; bottom:0%; height:20px;
position:absolute; width:100%;\"><a onClick=\"window.close()\"
onKeyPress=\"window.close()\" id=\"CloseButtonLink\" tabindex=\"1\"
onmouseover=\"opener.rollImages()\" onmouseout=\"opener.rollImages\"
tabindex=\"1\"><div style=\"position: absolute; text-align: center;
width: 100%;\"><img src=\"..\/..\/..\/..\/..\/Generic_Images\/close_v2.gif\"
alt=\"Close Window\" name=\"Close\" id=\"Close\" width=\"66\"
height=\"20\" border=\"0\" ><\/div><\/a><\/div><\/body><\/html>")
}
down in the html the functions are called this way
<li>Color photo of the <a href="javascript:newCardWindow()">card
holder</a></li>
