PDA

View Full Version : resizing image onclick

emz
04-03-2007, 01:45 PM
ok! am having a slight problem. i have an iframe in which when a link is clicked it loads an image into the iframe. eg

<iframe width=100px height=200px></iframe>

<a onclick=document.getElementById("picture_frame").src='city.jpg'>load city img</a>

what i wanted basically is when one clicks the link no matter the size of the image "city.jpg" when its loaded onto the iframe it is resized to a cetain size.

how can that happen help.
ASMBlah
04-03-2007, 05:38 PM
emz, i think you mean the following:
...
[Iframe page]

...
<img id="picture_frame" style="height:300px;width:400px;">
<a onclick="document.getElementById('picture_frame').src='city.jpg'">load city img</a>
...


Hope this helps

Dan
Mr J
04-04-2007, 12:25 PM
Something on these lines maybe?

<script type="text/javascript">
<!--

function resize_iframe(p){

currentPic=new Image()
currentPic.src=p

document.getElementById("iframe_id").src=p
document.getElementById("iframe_id").height=currentPic.height+30
document.getElementById('iframe_id').width=currentPic.width+30
}
// -->
</script>

<iframe id="iframe_id" name="iframe_name" src="" scrolling="no" frameborder="yes"></iframe>


<a href="#null" onclick="resize_iframe('pic1.jpg')">img 1</a>
<a href="#null" onclick="resize_iframe('pic2.jpg')">img 2</a>
emz
04-04-2007, 01:22 PM
the results you've given me resizes the frame but not the image inside it.

here is the issue, i have a system that pages images using aloop from an array called list[], the array contains all the image names

function paging()
{
for(i=0;i<arr_length;i++)
{
document.writeln("<a style=cursor:hand; onclick=document.getElementById('frame').src='"+list[i]+"';><font face=arial size=2 color=white>Page: </font><font face=arial size=3 color=white><b>"+i+"</b></font></a><font face=arial size=5 color=white> |</font>");
}}

the iframe called ('frame') displays the corresponding image when its number is clicked, so my issue is the images stored in the array are of diffrent sizes, what i want is that when the images are displayed in the iframe they are automatically resized to a certain size. the iframe has no src=""

pliz help am stuck.
Mr J
04-04-2007, 02:28 PM
So, I take it your dynamically writing the links in the parent page which will load an image into the iframe.

The default image sizes are all different but you want to show them all at the same size in the iframe.

This may be the way to go,

Load a default page into the iframe and then dynamicallty change the src of the image tag in that page, hard coding the link into the parent page as my example shows would benefit accessibility

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>

<script type="text/javascript">
<!--

function loadImage(p){

window.frames['iframe_name'].document.getElementById("mypic").src=p

}

// -->
</script>

<a href="pic01.jpg" onclick="loadImage(this.href);return false">Img 1</a>
<a href="pic02.jpg" onclick="loadImage(this.href);return false">Img 2</a>
<a href="pic03.jpg" onclick="loadImage(this.href);return false">Img 3</a>
<a href="pic04.jpg" onclick="loadImage(this.href);return false">Img 4</a>
<a href="pic05.jpg" onclick="loadImage(this.href);return false">Img 5</a>

<BR>

<iframe id="iframe_id" name="iframe_name" width=200 height=200 src="iframepage.htm" scrolling="no"></iframe>

</BODY>
</HTML>

iframepage.htm

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<style>
body{
margin:0;
}
</style>

</HEAD>
<BODY>

<img id="mypic" src="blank.gif" style="width:200px;height:200px">

</BODY>
</HTML>



On a side note the font tag is now depreciated and you should use css for styling