HTML image popup

MaxBurn

MaxBurn

0
Joined
Jan 20, 2004
Messages
3,245
Location
SC
Looking for something easy, I basically want a thumbnail that you click to get a popup with the full size picture. A quick google results in a overwhelming flood of info. I have to embed it in a standard page and I would prefer to not have people clicking the OK for popup blocker.

Using a basic setup of apache for the server. I am using simpleviewer elsewhere in my galleries that uses flash so something that route isn't too bad. I think I will work on embedding that in my page and see how that works unless anyone has a good idea.
 
Could you just do something like this?

Code: 
<a href="fullSizeImage.jpg" target="_blank"><img src="thumbnailImage.jpg" border="0" /></a>

If you are looking to set the size of the window, remove the address bar, etc, you will need to use JavaScript, but then you risk getting blocked by pop-up blockers.
 
Actually that border is kind of handy, I changed mine to 3 to make it obvious there is a link there.
 
The backslash is needed if you want the code to be XHTML valid. Not necessary for HTML 4.01, but won't hurt. The border="0" is not needed, unless you don't want a border.
 
timwhit said:
The mouseover is done with JavaScript image replacement. View source if you want to see how it's done.
Click to expand...

TY for the info.

So there is no way to do it without JS, either BB code or standard html coding? I hate JS.
 
udaman said:
TY for the info.

So there is no way to do it without JS, either BB code or standard html coding? I hate JS.
Click to expand...

You could probably use some of the fancy new css. But probably only opera will do the content swap. Something like this?
HTML: 
<style type="text/css">#frankenstein:hover { content: url(http://willrickards.net/images/DSC_0109.JPG); }</style><img id="frankenstein" src="http://willrickards.net/images/DSC_0108.JPG">
 
You could do it without having to create the thumbnail(s), like this:
HTML: 
<A  HREF="FullSize.jpg" target="_blank">
<IMG src="FullSize.jpg" height="10%" width="10%">
</A>
 
Newtun said:
You could do it without having to create the thumbnail(s), like this:
HTML: 
<A  HREF="FullSize.jpg" target="_blank">
<IMG src="FullSize.jpg" height="10%" width="10%">
</A>
Click to expand...

This is a bad idea for two reasons.

1. You loading a much larger image than necessary for the thumbnail version, i.e. wasting bandwidth.

2. Browsers are very bad a resizing images and it will most likely not look very good.
 
The code tags would just display the code, not render it.
I think udaman was looking for something he can use in his posts so that when we roll over them it switches to another image.
Even if he could include html in his posts (can you do that?) it would probably sanitize the html and remove the style tag.
 
Will Rickards said:
The code tags would just display the code, not render it.
I think udaman was looking for something he can use in his posts so that when we roll over them it switches to another image.
Even if he could include html in his posts (can you do that?) it would probably sanitize the html and remove the style tag.
Click to expand...

I was confused, I wasn't replying to that part of his post. BBCode isn't real HTML, you can only do simple things like link to an image or URL and do simple formatting. If you were able to insert some kind of JS or HTML it would be a hack and a vulnerability.
 
You must log in or register to reply here.
Back
Top