Automatic Clicking of an event to resize an image

Hi guys!
Once again someone on here has helped me :>)

In the following code, what Id like to do is to:
1) When an image in the panorama id section is clicked, that particular image is loaded into the image_details section with a fixed height and width.
2) To do this, when the image is clicked on in the panorama div section, somehow (dont know), the onclick event for input type="button" value="Grow Now" is fired ----> meaning that the image in the panorama div is loaded into the image_details section at a predefined fixed height and width.

Any help greatly appreciated.

Here is the 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=iso-8859-1" />
<title>Untitled Document</title>


<style>
#panorama {
      width:800px;
      overflow-x:auto;
      overflow-y:hidden;
}
#image_details {
      width:auto;
        position:relative;
        float:left;
        width:69%;
        height:350px;
        margin-left:.5%;
}
#image_details textarea {
        width:100%;
        height:350px;
}
#image_heading {
 
        text-align:center;
      /*border:#666666 solid 1px;*/
      height:20px;
      width:100%;
      position:relative;
}
#show_image {
      width:30%;
      float:left;
      height:350px;
      border: #CCCCCC solid 1px;
      overflow:auto; /* this is the new line added */ /* this is the line that allows the divs to align side by side */
}
</style>

<script language="javascript">
function ShowImage(el)
{
//alert(el.src);
document.getElementById('show_image').innerHTML = '<img src="'+el.src+'" />';
document.getElementById('image_heading').innerHTML = el.title;
//document.getElementById('image_details').innerHTML = '<textarea name="'+el.name+'">This is for '+el.name+'</textarea>';
document.getElementById('image_details').innerHTML = '<textarea name="txt'+el.name+'">This is for '+el.name+'</textarea>';

}

function ShowDetails(el)
{
//alert(el.src);
document.getElementById('image_details').innerHTML = el.name;
}


// sizeTo() is a cross-browser function that resizes images

function sizeTo(layerName, img, iHeight, iWidth, animate) {
   var ie4 = (document.all)
   if (ie4) {
     var targetLayer = document.all[layerName]
     var el = targetLayer.children.tags("IMG")[0]
     el.clip = new Object      
   }
   else {
     var el = document.layers[layerName]
     el.style = new Object
     el.style.pixelHeight = el.offsetHeight = el.clip.height
     el.style.pixelWidth = el.offsetWidth = el.clip.width
   }
   if (!animate) {
      if (ie4) {
        el.style.pixelWidth = iWidth; el.style.pixelHeight = iHeight
      }
      else {
        el.document.write("<img src='" + img + "' width="+iWidth+" height="+iHeight+">");
        el.document.close();  
      }
   }
   else
   if ((el.offsetHeight != iHeight) || (el.offsetWidth != iWidth)) {
      if (el.offsetHeight < iHeight)
        el.style.pixelHeight = el.clip.height = el.offsetHeight + 1;
      if (el.offsetWidth < iWidth)
        el.style.pixelWidth = el.clip.width = el.offsetWidth + 1;
      if (el.offsetHeight > iHeight)
        el.style.pixelHeight = el.clip.height = el.offsetHeight - 1;
      if (el.offsetWidth > iWidth)
        el.style.pixelWidth = el.clip.width = el.offsetWidth  - 1;
      if (!ie4) {
        el.document.write("<img src='" + img + "' width="+el.style.pixelWidth+" height="+el.style.pixelHeight+">");
        el.document.close();
      }
      setTimeout('sizeTo("' + layerName + '","'+img+'",'+iHeight+','+iWidth+','+animate+')',10);
  }
}



var delay = 5; // seconds
var tId = "";
function loadPage() {
  tId=setTimeout('document.forms[0].growTo.click()',delay*1000)
}  

</script>



</head>


<body onLoad="loadPage()">
     
<div id="panorama">
<nobr>
<img src="test.jpg" title="Test image" name="tesst"  width="82" height="108" title="My picture" onclick="ShowImage(this);return false;"/>
<img src="feed_me_british_shorthair.jpg" title= "test"" name="feesdme" width="82" height="108" title="My picture" onclick="ShowImage(this);return false;">        
<img src="sad_eyes_british_shorthair.jpg" title="Sad eyes" name="sad" width="82" height="108" title="My picture" onclick="ShowImage(this);return false;"/>
<img src="untitled1.bmp" title="Untitled" name="untitled"  width="82" height="108" title="My picture" onclick="ShowImage(this);return false;"/>
</nobr>
</div>
<br>
<br>

<div id="image_heading"></div>


<div id="show_image" align="center">
      <img src="" border=0 height=73 width=153 style=>
</div>

<div id="image_details"></div>

<br>
<form>
<input type="button" value="Grow To" name="growTo"
   onClick="sizeTo('show_image', 'feed_me_british_shorthair.jpg',146,146,true)">
   <input type="button" value="Shrink To"
   onClick="sizeTo('zoom', '/gifs/inside.jpg',24,15,true)">
<input type="button" value="Grow Now"
   onClick="sizeTo('zoom', '/gifs/inside.jpg',146,118,false)"><input
   type="button" value="Shrink Now"
   onClick="sizeTo('zoom', '/gifs/inside.jpg',24,15,false)">

</form>

<DIV id="zoom" STYLE="height:73; width: 59; position: absolute">
<img src="feed_me_british_shorthair.jpg" border=0 height=73 width=193>
</DIV>




</body>
</html>
=======================================================================
LVL 1
Simon336697Asked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
You mean
function ShowImage(el)
{
document.getElementById('show_image').innerHTML = '<img src="'+el.src+'" />';
document.getElementById('image_heading').innerHTML = el.title;
document.getElementById('image_details').innerHTML = '<textarea name="txt'+el.name+'">This is for '+el.name+'</textarea>';
sizeTo('show_image', el.src,146,146,true);
}
0
 
Michel PlungjanIT ExpertCommented:
Sorry. I do not understand the question

What does it do now and what do you want it to do and when?
0
 
Simon336697Author Commented:
My aplogies mp..you are too kind.

If you save the entire code above as a html file....and
put some images in a folder eg.the same folder as the html file, then change the following section in the html file....

<div id="panorama">
<nobr>
<img src="test.jpg" title="Test image" name="tesst"  width="82" height="108" title="My picture" onclick="ShowImage(this);return false;"/>
<img src="feed_me_british_shorthair.jpg" title= "test"" name="feesdme" width="82" height="108" title="My picture" onclick="ShowImage(this);return false;">        
<img src="sad_eyes_british_shorthair.jpg" title="Sad eyes" name="sad" width="82" height="108" title="My picture" onclick="ShowImage(this);return false;"/>
<img src="untitled1.bmp" title="Untitled" name="untitled"  width="82" height="108" title="My picture" onclick="ShowImage(this);return false;"/>
</nobr>

load the page....

1) After a few seconds, automatically the image displayed in the show_images div expands out.
2) What I want is upon launching the page, instead of now the timer kicking in, Id like whatever picture you click on in the panorama div section, to be loaded to a predefined size using the Grow Now javascript event into the image_details div. This is so that any picture that you see in the image_details div is the SAME SIZE FOR ALL.
So, when you load the page ----> click on an image in the panorama div secition ---> javascript Grow now function kicks in to instantly load a predefined size into the image_details section. So there is no animation, but just a straight load to a fixed size for all images that are clicked on in the panorama div, into the image_details div.
Hope this makes sense...if not ill extrapolate further :>)
0
 
Simon336697Author Commented:
Yes :>)
0
All Courses

From novice to tech pro — start learning today.