Pleae help with javascript pop-up window

[Malikman]

Hello, i'm trying to have a image link display a pop-up window when it is clicked. Now ig ot that to work, but when it is clickedk in the iframe that it is in it will put that page in there too... how do i make it so that the iframe stays where it is and it just make one pop-up?

I hope that make sense, and the code for the page is below...the css file just puts the text where it's supposed to be... it doesn't mess with the links at all. If someone could help me figure out why the exec day pop-up makes the pop-up window but also displays it in the iframe of the main page that would be much appreciate, caue it isn't supposed to display the pop-up stuff in the iframe!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

<link rel="stylesheet" type="text/css" href="frame.css" />
<SCRIPT TYPE="text/javascript">

function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=400,height=400,scrollbars=yes');
return false;
}
</SCRIPT>
</head>
<body align="center">
<a href="cuba1.html" target="_blank">

<img style="border: 0px solid ; width: 183px; height: 200px;" alt="" src="CubaImages/cubathumbnail.jpg" title="Cuba">

</a><br>
<div id="caption-photos1">
Cuba
</div>
<br>
<br>
<a href="execday1.html" onclick="popup(this,'Exec Day')";><img style="border: 0px solid ; width: 183px; height: 116px;" alt="" src="ExecDayThumbnail/execdaythumbnail.jpg" title="Exec Day"></a><br>
<div id="caption-photos">
Exec Day
</div>
<br>
<br>
<a href="paki1.html" target="_blank"><img style="border: 0px solid ; width: 184px; height: 130px;" alt="" src="PakistanImages/pakithumbnail.jpg" title="Pakistan"></a><br>
<div id="caption-photos">
Pakistan
</div>
<br>
<br>
<a href="portrait1.html" target="_blank"><img style="border: 0px solid ; width: 185px; height: 195px;" alt="" src="PortraitImages/portraitthumbnail.jpg" title="Portraits"></a>
<br>
<div id="caption-photos2">
Portraits
</div>
</body></html>

 

[amromousa]

Could you please use [ code ] tags?

Edit: the reason it's changing pages is that you're telling it to here:

<a href="execday1.html" onclick="popup(this,'Exec Day')";>

If you don't want it to switch, then you can just set href="#" or get rid of it and include cursor: pointer in the style for your anchor tag.

 

[Malikman]

alright, thank you.
i changed it to

<a href="#" onclick="popup('execday1.html', 'Exec Day')"><img style="border: 0px solid ; width: 183px; height: 116px;" alt="" src="ExecDayThumbnail/execdaythumbnail.jpg" title="Exec Day"></a><br>

... i assumed that although the a href= was equal to a html that it would not change it since the onclick was there... i thought the javascript would take precedence. Obviously i was wrong haha. Thanks for your help... it seems to be working now. Can you explain the cursor: pointer anchor tag thoug... i have not heard of it (i'm not GREAT at CSS/Javascript/Html and i learn things all the time haha.)

Also can you tell me what the # sign means for the a href?

 

[amromousa]

If you don't set the href attribute on the anchor tag, the user's mouse cursor will not change to the "hand" icon when they hover over your link. Since people are accustomed to seeing that for action items, it may be useful to set the style. You would do something like

<a style="cursor:pointer" onclick="..">stuff</a>

It's good practice to put your styles into an external file and reference them at the top of your page. You may want to look into that as well.

 

[webdes03]

Another thing to consider would be using the javascript to output a borderless DHTML "window". I personally am not a big fan of iframes... in my experience DHTML can help you to achieve better cross-browser compatibility than with an iframe...

Just something else to throw out there...

 

[Malikman]

yea i was a little heitant about iframes, but my brother, who i'm making this site for (for about 10 an hour which idk if that's really a fair price for myelf but who knows) wanted iframes so i am jut doing what i am being asked for, to the best of my ability.

as well i put my css in a file and referenced it in the <head> ... are you saying i should reference higher before any html itelf?

 

[amromousa]

nope, that's exactly what i meant so you're already there. it's just that you didn't have it setup that way in the original post

 

[Malikman]

alright,
thanks for your help guys i'll post the finished product here cause there's always little things that can be fixed on a website.

 

[tim_m]

you should keep a real url in the href="..." part just in case someone comes along with javascript disabled. granted that's probably relatively rare, but for basically no extra effort you can achieve it.

<a href="execday1.html" onclick="popup(this,'Exec Day'); return false;";>

note the added "return false;". this basically tells the browser not to do what it was normally going to do when you click the link (i.e. go to execday1.html). if javascript isn't available, the user will follow the link normally.

return false also works if you have a form with onsubmit="return myValidateFn()", for example. your function returns whether the fields validate and if not the form won't be submitted (you'd want some message to indicate the problem of course).

 

[Malikman]

ohhh okay, i was never sure what that return false was for... Thank you