I know how to make a popup window. But i want to be able to set the background of the popup window to black without linking to a webpage.<br />
I want to link it to a straight .jpg file<br />
basically i want a popup window for name.jpg with black background.<br />
is there a way to do this?<!--content-->Try a script like this, it opens a pop-up with nothing in it, then it writes some source code into it. It will bypass pop-up blockers and you can write anything you want into the source of the pop-up.<br />
This script will also fall back on no-JavaScript compatibility for users who don't have it enabled, so the links will still work for them.<!--content-->The only thing I can think of doing is <br />
<style type="text/css"><br />
body{background: url(image.jpg) #000;}<br />
</style><br />
but you will have to link to a html and not just the image.<!--content-->Is there a tutorial to use that script?<!--content-->Well what you see is all there is. What exactly do you want to know about it?<br />
I'll have a go at trying to explain the script as fully as I can, then if you're still stuck, ask away.<br />
<br />
First of all, a variable is defined called imageWindow, this will later be used to assign the window to it.<br />
<br />
Then a function is created, the code in there is mainly just to write HTML into the window, however there are also two arguements in the function, "imageSrc" and "alternateText". The imageSrc is used to reference the image in the <img> tag, the alternateText is used in the alt attribute of the image and also in the pop-up's title.<br />
<br />
All of the CSS that follows underneath the script is just to layout the thumbnails on the page, ignore that.<br />
<br />
Then in the actual links, you'll see this
nclick="imageWindow=window.open('','newwin','width=256,height=256');<br />
writePopup(this.href, 'Image 1');return false;"The first thing that happens here is that the variable imageWindow is assigned a new window. The window does not have a source but it is 256x256 pixels in size.<br />
Then the function that was also defined in the <head> is run to write the source code into the popup.<br />
I could have moved this:imageWindow=window.open('','newwin','width=256,height=256');into the function in the head as well, but then it would not get around pop-up blockers, leaving it in the link code gives you the added advantage that you can specify a unique window size for each pop-up should you want to.<br />
<br />
Does that help any more?<br />
<br />
Here's the code again but properly adapted to HTML (when I posted last time it was half XHTML and half HTML).<!--content-->hey thanx a bunch for all the help,<br />
still a little confused, i implemented the code into my page,<br />
<br />
first of all how does all that code generate a popup window. I'm just curiuos (is window.open a general function to open up a window without any extra javascript?)<br />
The only thing is that i can't seem to get the picture i want in the popup window. I'm confused as to where that is in the code<!--content-->ok figured out why my picture wasn't showing up.<br />
<br />
but now i can't seem to get the picture to center in the popup window<!--content-->What does newwin refer to as well as this.href<!--content-->window.open opens a new window, there are three arguements to that function though. The page you want to open when you call the function (in this case I didn't specify a page) The name of the window (so you can target any link to the window by using target="newwin") What properties the window has, eg width, height, statusbar, whether it allows resizing, scrolling etc.<br />
When a pop-up blocker is enabled, window.open only works when called onclick of a link though, that's to stop the user getting billions of unrequested pop-up's.<br />
<br />
In the code "this" refers to the current link, and ".href" refers to the href attribute of the current link. So for example, this.href will equal "big1.png" in the first link. Therefore by changing the href you change the image that is opened in the pop-up window.<br />
You probably can't control the image as you'd like because of the style="position:absolute;top:0;left:0;" which move the image to the top left of the window leaving no gap. Get rid of that and put your HTML around it. Also you don't need the class="fullImage" that was left in there for some reason I can't remember.<!--content-->kewl<br />
thanx a bunch!<!--content-->Be carful if you use a single quote inside the document.writeln, if you do use one then you need to escape it like this \' but other than that you should be OK.<br />
<br />
Happy to help.
<!--content-->
I want to link it to a straight .jpg file<br />
basically i want a popup window for name.jpg with black background.<br />
is there a way to do this?<!--content-->Try a script like this, it opens a pop-up with nothing in it, then it writes some source code into it. It will bypass pop-up blockers and you can write anything you want into the source of the pop-up.<br />
This script will also fall back on no-JavaScript compatibility for users who don't have it enabled, so the links will still work for them.<!--content-->The only thing I can think of doing is <br />
<style type="text/css"><br />
body{background: url(image.jpg) #000;}<br />
</style><br />
but you will have to link to a html and not just the image.<!--content-->Is there a tutorial to use that script?<!--content-->Well what you see is all there is. What exactly do you want to know about it?<br />
I'll have a go at trying to explain the script as fully as I can, then if you're still stuck, ask away.<br />
<br />
First of all, a variable is defined called imageWindow, this will later be used to assign the window to it.<br />
<br />
Then a function is created, the code in there is mainly just to write HTML into the window, however there are also two arguements in the function, "imageSrc" and "alternateText". The imageSrc is used to reference the image in the <img> tag, the alternateText is used in the alt attribute of the image and also in the pop-up's title.<br />
<br />
All of the CSS that follows underneath the script is just to layout the thumbnails on the page, ignore that.<br />
<br />
Then in the actual links, you'll see this
nclick="imageWindow=window.open('','newwin','width=256,height=256');<br />writePopup(this.href, 'Image 1');return false;"The first thing that happens here is that the variable imageWindow is assigned a new window. The window does not have a source but it is 256x256 pixels in size.<br />
Then the function that was also defined in the <head> is run to write the source code into the popup.<br />
I could have moved this:imageWindow=window.open('','newwin','width=256,height=256');into the function in the head as well, but then it would not get around pop-up blockers, leaving it in the link code gives you the added advantage that you can specify a unique window size for each pop-up should you want to.<br />
<br />
Does that help any more?<br />
<br />
Here's the code again but properly adapted to HTML (when I posted last time it was half XHTML and half HTML).<!--content-->hey thanx a bunch for all the help,<br />
still a little confused, i implemented the code into my page,<br />
<br />
first of all how does all that code generate a popup window. I'm just curiuos (is window.open a general function to open up a window without any extra javascript?)<br />
The only thing is that i can't seem to get the picture i want in the popup window. I'm confused as to where that is in the code<!--content-->ok figured out why my picture wasn't showing up.<br />
<br />
but now i can't seem to get the picture to center in the popup window<!--content-->What does newwin refer to as well as this.href<!--content-->window.open opens a new window, there are three arguements to that function though. The page you want to open when you call the function (in this case I didn't specify a page) The name of the window (so you can target any link to the window by using target="newwin") What properties the window has, eg width, height, statusbar, whether it allows resizing, scrolling etc.<br />
When a pop-up blocker is enabled, window.open only works when called onclick of a link though, that's to stop the user getting billions of unrequested pop-up's.<br />
<br />
In the code "this" refers to the current link, and ".href" refers to the href attribute of the current link. So for example, this.href will equal "big1.png" in the first link. Therefore by changing the href you change the image that is opened in the pop-up window.<br />
You probably can't control the image as you'd like because of the style="position:absolute;top:0;left:0;" which move the image to the top left of the window leaving no gap. Get rid of that and put your HTML around it. Also you don't need the class="fullImage" that was left in there for some reason I can't remember.<!--content-->kewl<br />
thanx a bunch!<!--content-->Be carful if you use a single quote inside the document.writeln, if you do use one then you need to escape it like this \' but other than that you should be OK.<br />
<br />
Happy to help.
<!--content-->