PDA

View Full Version : Pop-up window

Jason.K
10-10-2002, 11:52 PM
Hi,

I have 10 thumbnail images on each page and I want a pop-up window to open a HTML page with the full size image and some other stuff also. I need to know how to open a window with no toolbars, menus etc when the user clicks on the image. I can only find scripts on the net that only open one address.

I am sure thsi would have been posted in the past so if anyone knows where I can find let me know. If not can someone please show this.

Regards, Jason
chrismiceli
10-11-2002, 02:20 AM
is this what you want?


function test(url) {
try = "http://www.domain.com/" + url
window.open(try, "test" "toolbar=no,srollbars=no,menubar=no,status=no")
}
<img src="hi" onClick="test(hi.jpg)">
<img src="hi2" onClick="test(hi2.gif)">
glenngv
10-11-2002, 02:41 AM
Originally posted by chrismiceli
is this what you want?


function test(url) {
try = "http://www.domain.com/" + url
window.open(try, "test" "toolbar=no,srollbars=no,menubar=no,status=no")
}
<img src="hi" onClick="test(hi.jpg)">
<img src="hi2" onClick="test(hi2.gif)">


just correcting the syntax: :)

window.open(try, "test","toolbar=no,srollbars=no,menubar=no,status=no")

<img src="hi.jpg" onClick="test('hi.jpg')">
<img src="hi2.jpg" onClick="test('hi2.gif')">


but a cross-browser solution would be like this: (NS4 has no onclick event on <img>)

<a href="#" onClick="test('hi.jpg');return false"><img src="hi.jpg" border="0"></a>
<a href="#" onClick="test('hi2.jpg');return false"><img src="hi2.jpg" border="0"></a>
boywonder
10-11-2002, 02:47 AM
'try' is a reserved javascript word and 'test' is already a built-in function with javascript. I would change those words in the code.

I was gonna show syntax errors also but glenngv got to that first :)
chrismiceli
10-11-2002, 02:59 AM
thanx for the correction guys, i love this place.
adios
10-11-2002, 03:00 AM
but a cross-browser solution would be like this: (NS4 has no onclick event on <img> )

Well...


<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function IMG_onmousedown() {
this.down = true;
}

function IMG_onmouseup() {
if (this.down) this.handler();
this.down = false;
}

function IMG_onmouseout() {
this.down = false;
}

function IMG_onload(img) {
img.onmousedown = IMG_onmousedown;
img.onmouseup = IMG_onmouseup;
img.onmouseout = IMG_onmouseout;
img.handler = handlers[img.name];
}

var handlers = Object;
handlers['newthread'] = function() {alert('new thread')};
handlers['postreply'] = function() {alert('post reply')};

</script>
</head>
<body>
<img name="newthread" src="http://www.codingforums.com/images/newthread.gif"
onload="IMG_onload(this)">
<img name="postreply" src="http://www.codingforums.com/images/reply.gif"
onload="IMG_onload(this)">
</body>
</html>


OK, so it's messy. :o
Jason.K
10-11-2002, 09:51 AM
Thanks for the replies. I still can't seem to get it working without the errors. Here is my code below, there is another script for mouse roll overs in an external js file. The images I want to open are the tn_001.jpg

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Kerrie-Ann Haute Coture- Portfolio</title>
<script src="navigation.js" language="JavaScript" type="text/javascript"></script>
<script language="JavaScript">
function open(url)
{
address = "C:\Documents and Settings\Jason\My Documents\My Webs\Kerrie Ann Haute Couture\" + url
window.open(address, "open" "toolbar=no,scrollbars=no,menubar=no,status=no")
}
</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/nav-home1.gif','images/nav-port1.gif','images/nav-contact1.gif','images/nav-aboutus1.gif')">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="19%" height="41" rowspan="2" bgcolor="#006699"><div align="center"><img src="images/logo.gif" width="135" height="78"></div></td>
<td width="81%" height="51" valign="top" bgcolor="#006699"><div align="center"><img src="images/banner.gif" width="545" height="40"><br>
</div></td>
</tr>
<tr>
<td height="20" valign="top" bgcolor="#006699"> <div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%"><div align="center"><a href="index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','images/nav-home1.gif',1)"><img src="images/nav-home.gif" alt="Home" name="home" width="150" height="36" border="0"></a></div></td>
<td width="25%"><div align="center"><a href="portfolio.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('portfolio','','images/nav-port1.gif',1)"><img src="images/nav-port.gif" alt="Portfolio" name="portfolio" width="150" height="36" border="0"></a></div></td>
<td width="25%"><div align="center"><a href="aboutus.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aboutus','','images/nav-aboutus1.gif',1)"><img src="images/nav-aboutus.gif" alt="About Us" name="aboutus" width="150" height="36" border="0"></a></div></td>
<td width="25%"><div align="center"><a href="contact.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','images/nav-contact1.gif',1)"><img src="images/nav-contact.gif" alt="Contact" name="contact" width="150" height="36" border="0"></a></div></td>
</tr>
</table>

</div></td>
</tr>

<tr align="center" valign="top">
<td height="551" colspan="2"> <p>&nbsp;</p>
<center>
<table width="77%" height="486" border="0" cellpadding="0" cellspacing="0" bgcolor="#9999FF">
<tr>
<td width="63%" height="486" valign="top"> <div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="6%" height="99" align="left" valign="top"> <div align="left"><img src="images/roundcorner1.gif" width="40" height="46"></div></td>
<td width="92%"><div align="center"><br>
<img src="images/port.gif" width="185" height="58"> <br>
<font size="3" face="Verdana, Arial, Helvetica, sans-serif">Click
on image to enlarge and open in a new window<br>
<br>
</font></div></td>
<td width="2%" align="right" valign="top"><div align="right"><img src="images/roundcorner2.gif" width="34" height="48"></div></td>
</tr>
</table>
<table width="100%" height="322" border="0" cellpadding="0" cellspacing="8">
<tr>
<td><div align="center"><a href="#" onClick="open('index.htm');return false"><img src="images/tn_001.jpg" width="70" height="140"></a></div></td>
<td><div align="center"><img src="images/tn_002.jpg" width="77" height="140"></div></td>
<td><div align="center"><img src="images/tn_003.jpg" width="69" height="140"></div></td>
<td><div align="center"><img src="images/tn_004.jpg" width="95" height="140"></div></td>
<td><div align="center"><img src="images/tn_005.jpg" width="113" height="140"></div></td>
</tr>
<tr>
<td width="20%"><div align="center"><img src="images/tn_006.jpg" width="109" height="140"></div></td>
<td width="20%"><div align="center"><img src="images/tn_007.jpg" width="89" height="140"></div></td>
<td width="20%"><div align="center"><img src="images/tn_008.jpg" width="103" height="140"></div></td>
<td width="20%"><div align="center"><img src="images/tn_009.jpg" width="120" height="140"></div></td>
<td width="20%"><div align="center"><img src="images/tn_010.jpg" width="77" height="140"></div></td>
</tr>
</table>

<div align="center"><font face="Arial, Helvetica, sans-serif">&lt;&lt;
Previous &nbsp;&nbsp;&nbsp;<a href="javascript:openwindow('index.htm')">Next</A> &gt;&gt;</font> </div>
<table width="100%" height="43" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="8%" height="43" align="left" valign="baseline" bgcolor="#9999FF"><div align="left"><img src="images/roundcorner3.gif" width="44" height="44"></div></td>
<td width="87%" valign="middle"><div align="center"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">This
website was created by Jason Klein 2002</font></div></td>
<td width="5%" align="right" valign="baseline"><img src="images/roundcorner4.gif" width="35" height="44"></td>
</tr>
</table>
</td>
</tr>
</table>

<p>&nbsp;</p></center>

</td>
</tr>
</table>
</body>
</html>