PDA

View Full Version : Inserting images...

baton
04-03-2003, 07:27 AM
Welcome from Poland...

I'd like to insert some images into my homepage. It's not a problem of course :p
But what I want is: an image (smalla one) and when someone is pointing (clkiking) it, it is showing in new larger window... My language is not perfect, but if someone undarstands me please help...

Best Regards

Baton
animgirl
04-03-2003, 08:18 AM
Hi!
Welcome to the forums!

You mean you want a small version of an image on your site, like a *thumbnail*, and then when clicked on, a new pop-up window comes up with a larger version?

First of all, you need a larger and smaller version of your pic.

This generic example with Javascript may help you. Instead of the text on the html, insert your pic.

There are some directions on the html included, but if you have any questions about it, ask!

I hope that helps ya.

Again, welcome! http://www.clicksmilie.de/sammlung/cool/cool-smiley-010.gif
animgirl
tmmoose
04-03-2003, 10:39 AM
Maybe This??

<p>If you want to use a graphic to open a pop-up window, the code is:
</p><pre>
&lt;a href=&quot;#&quot; window.open(&quot;demo3.htm&quot;,&quot;&quot;,&quot;width=450,height=250&quot;)&gt;
&lt;img src="Your picture link" width="154" height="36" alt="" border="0"&gt;
&lt;/a&gt;
</pre>
<A href="#"
onClick="window.open('demo3.htm', 'Sample','width=450,height=250')"><img src="LinkTo You Pic Here " width="154" height="36" alt="Click Me" border="0"></a>.<p></p>



Try It Here (http://www3.sympatico.ca/terry.mckee/openlarger.html)
Zero Angel
04-03-2003, 11:19 AM
A better solution might be to have the popup code open the image itself instead of the HTML file containing the image. It would be much simpler that way.

You can use XnView (http://www.xnview.com) to size and save your files. If you poke around in the program, you'll notice that it allows to process several images at once (including sizing and filters).

A good naming convention for thumbnails is using a 'tn_' prefix, for example naming the thumbnail of 'image1.jpg' to 'tn_image1.jpg'. Makes it easy to keep track of your files, esp. if they are in alphabetic order.

HTH,
Zero Angel
alain
05-05-2003, 02:36 AM
hello
try this script , very simple
<html><head><title></title>
<!-- -->
<script language="JavaScript" type="text/JavaScript">
var w=252;<!-- width -->
var h=209;<!-- height -->
var s=5;<!-- speed -->
function a() {
if (p.width<=w ) {
p.width=p.width + 6
p.height=p.height +5
x=window.setTimeout('a()', s)}}
</script>
<!-- -->
</head>
<body bgcolor="#000000" text="#FFFF00" alink="#FFFF00">
<div id="g" style="width:252;height:209">
<a href="#">
<img src="f.jpg" border="1" width=125 height=104 OnClick="javascript:a()"
id="p" style="position:absolute;left:110;top:100"></a></div>

<a href="javascript:a()">shrinck !!!</a><br><br><br><br><br><br>
You can remove from the tag : img src : OnClick="javascript:shrinck()"<br><br>
The most difficult is to set the good size for the little pic
</body></html>