PDA

View Full Version : Putting an image in my page and let it download whenever I want!



ConfusedOfLife
Feb 24th, 2003, 10:03 AM
Hi, well, I'm writing a kind of gallery site, but they also wana have the About us and Contact Us pages. I'm trying to put everything in one page and make things come and go with JS. So, Putting the texts of different pages in just one page doesn't add to the download time, but if I put all the images in that page too, then the whole page takes a year to get downloaded.
I'm looking for a way to display the pictures whenever I want, i.e. they don't get downloaded b4 the user presses a key.

I used this dummy code:


<body>
<img id="oopse" src="damn.jpg" style="display : none"> <br>
Hi there! <br>

<input type="Button" value="Display" onclick="document.getElementById('oopse').style.display = 'block'">-->
</body>

As you can see, I'm using display:none to hide the image, I was hoping that it also doesn't send the picture to the browser till they press the Display button. But as I tested it, it doesn't work! So, is there a way that I can make this? I really don't wana have a second page in my site!

Thank you in advance

sweenster
Feb 24th, 2003, 12:26 PM
all you need to do is use an i-frame. That means it will load the new page within the existing one.

The code below will load page1.html in the frame initially, then when you want to change it use a simple hyperlink:
<a href="page2.html" target="pop-in">link</a>



<iframe width="500" height="400" name="pop-in" scrolling="no" noresize src="page1.html" frameborder="no" marginwidth="0" marginheight="0"></iframe><layer><ilayer name="pop-in" width="400" height="400" scrolling="no" noresize src="page1.html" frameborder="no" marginwidth="0" marginheight="0"></ilayer></layer>

thox
Feb 24th, 2003, 05:06 PM
Just a couple of ideas.... one might appeal to you more than the other.


document.getElementById('oopse').src="next_image.jpg"

this would replace the image with next_image.jpg. if the original image was a 1x1 pixel transparent gif then the loading time would not be affected.



<div id="myexample1"></div>

<button
onclick="document.getElementById('myexample1').innerHTML='<img src=\"image.jpg\" .>';">
Show Image</button>


the above code would only put the HTML into to the DIV when the button is clicked. a further button or script can then be called to remove / replace the image.

i don't know much about how this works in other browsers. its fine in IE5.5.

ConfusedOfLife
Feb 24th, 2003, 09:42 PM
Thank you all

well, I know about iframes dear sweenster, I was just looking to do this in the easiest way. You know, using an iframe inside a td of a table makes it shrink in Windows ME, that really sux. I need to put the iframe inside nested tables that I'm sure is gonna make some trouble!
Thanks to you too thox, actually I have to show couple of thumbnails ( transparent gifs ) and they should be enlarged in a pop up, so, I can't use your frist strategy, but as for as the second one, it's probably the best without considering that compatibility thing that I always hate. If it's anyone who could tell me that it works in NS6 and 7 too, I would have difinitely used it.

I'm still looking for further tips, but I am feeling that I have to use that iframe in here again!

Thank you all.

sweenster
Feb 24th, 2003, 11:54 PM
ah... but if you're gonna put it in a table you should change the width / height attributes from 400 (or whatever value it is) to 100%.

problem solved

ConfusedOfLife
Feb 25th, 2003, 11:35 PM
Yup, it's right! But there is still one minor problem: my page is exactly like a picture, e.g all the page is made of a big image that I just sliced in Photosho ( I'm not to blame, the customer wanted it himself! ). So, I am putting the texts in the middle of the page, and if I use an iframe in there, when I try to switch to another iframe, it'll take some time to download the background picture that actually makes the main stage and it is not really beautiful!

Well, I think it's really no other way. Thanks for your answers and have fun.