Probably simple 'onclick' event question

T

tokyothousand

New Member
Hi all.

I can't figure this one out, so I came here for help.

Let's say that on the left of a page I have a thumbnail.

On the right, there's an iframe. I want to click the thumbnail and load the bigger version on the iframe.

The code is quite simple:

<img src=image.jpg width=32 onclick="iframe.location">

I want to specify the width and height of the image that is loaded on the iframe, but I can't figure out how.

Hope someone can figure it out, I'd be very grateful.
 
B

bcee

New Member
You need to define the iframe using javascript then size it, either using innerhtml or css.
 
T

tokyothousand

New Member
Thank you for your reply.

It's not the size of the iframe that I'm trying to specify, it's the size of the image that is loaded inside it.

I've tried all that I could think of. I thought it would be pretty straight forward but nothing seems to work.

I thought it would be a matter of specifying the iframe in the code, like:

<img src=image.jpg width=32 onclick="iframe.location";width(iframe)='256'">
or
<img src=image.jpg width=32 onclick="iframe.location";iframe.width='256'">

But nothing works.

Sorry, I'm a newbie I know.
 
smoovo

smoovo

New Member
So you want to upload iframe with image inside, and with one click to do the upload and to resize the image? If yes you can't do that.

iframe it's already built page, and you are trying to edit something in it, you are trying to edit page inside page... Impossible.

I'm barely believe you can do it with two steps Javascript and innerHtml method.

Let us know if you get something. :)
 
B

bcee

New Member
If I am understanding correctly it's quite easier than I thought:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

body {
	background: #1f1f1f;
	font: 11px Arial, Helvetica, sans-serif;
	color: #aaa;
	padding: 30px;
}
img {
	float: left;
}
iframe {
	background: #1f1f1f;
	width: 820px;
	height: 620px;
	border: 0;
	overflow: hidden;
	float: left;
}

</style>
</head>
<body>
	<img src="image.gif" width="80" height="60" alt="" onclick="document.getElementById('holder').src=this.src" />
	<iframe id="holder" frameborder="0" scrolling="no"></iframe>
</body>
</html>

You can change the size of the thumb to whatever size you would like. Though it won't look as nice as thumbs created in a graphics program or sized by the server.
 
T

tokyothousand

New Member
Hi. I'm sorry for taking so long to reply.

The code shown above is very similar to what I have. It duplicates the thumbnail in its original size in the iframe.

The only detail here is that I want to specify the width and height of the image that is loaded in the iframe. That's what I can't figure out.

I tried all combinations I could think of. It always loads the image with the original size.

If I try this:

<img src="image.gif" width="80" height="60" onclick="document.getElementById('holder').src=this.src;width=600"/>

it enlarges the original image (the thumbnail).

How to apply that 600px width to the duplicate image (the one loaded on the iframe)?
 
smoovo

smoovo

New Member
I'm really confused... :confused: But i'll try my best anyway.

If you want the frame to be 600px you can just give the size to the frame image. I mean, the frame page that will be opened.

Or, use Javascript, but not like you wrote it. Use
HTML: 
onclick="document.getElementById('holder').src=this.src; document.getElementById('holder').style.width='600px';"

Again, I'm really don't get what you are looking for, but from what you have posted, i think it might help you.
 
You must log in or register to reply here.
Top