HTML image popup

[MaxBurn]

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.

 

[timwhit]

Could you just do something like this?

<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.

 

[MaxBurn]

Yeah that works fine, thanks.

 

[udaman]

<a href="fullSizeImage.jpg">

<img src="thumbnailImage.jpg" border="0" /></a>



what is the backslash for? Are border & target necessary, or can you leave them out?

How would I code with BB, and also html

the 'mouse over' homer simpson images on this link, and could you do the same with thumbnail & full size images rather than same sized images---mouse over?

http://www.northlight-images.co.uk/article_pages/tilt_and_shift_ts-e.html

 

[MaxBurn]

Actually that border is kind of handy, I changed mine to 3 to make it obvious there is a link there.

 

[timwhit]

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]

the 'mouse over' homer simpson images on this link, and could you do the same with thumbnail & full size images rather than same sized images---mouse over?

http://www.northlight-images.co.uk/article_pages/tilt_and_shift_ts-e.html

The mouseover is done with JavaScript image replacement. View source if you want to see how it's done.

 

[udaman]

The mouseover is done with JavaScript image replacement. View source if you want to see how it's done.

TY for the info.

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

 

[timwhit]

TY for the info.

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

You could do it in Flash.

 

[ddrueding]

You could do it in Flash.

Do not pass go, do not collect $200, go directly to hell...

 

[timwhit]

Do not pass go, do not collect $200, go directly to hell...

He asked for another way to do it. That's just about it. Either it's got to be JS or Flash.

 

[ddrueding]

I don't disagree with you, I just don't think very highly of Flash. Sorry if that wasn't clear.

 

[Will Rickards]

TY for the info.

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

You could probably use some of the fancy new css. But probably only opera will do the content swap. Something like this?

<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">

 

[timwhit]

You forgot to close your image tag.

 

[Newtun]

You could do it without having to create the thumbnail(s), like this:

<A  HREF="FullSize.jpg" target="_blank">
<IMG src="FullSize.jpg" height="10%" width="10%">
</A>

 

[timwhit]

You could do it without having to create the thumbnail(s), like this:

<A  HREF="FullSize.jpg" target="_blank">
<IMG src="FullSize.jpg" height="10%" width="10%">
</A>

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.

 

[Will Rickards]

You forgot to close your image tag.

I was using just html not xhtml. I'm not even sure how you could post that type of thing on this board anyway. It would probably cull your style rules.

 

[timwhit]

I was using just html not xhtml. I'm not even sure how you could post that type of thing on this board anyway. It would probably cull your style rules.

Use the "

" tags.

 

[Will Rickards]

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.

 

[timwhit]

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.

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.