Unable to call Javascript Function which written using innerHTML method. [Archive]

vijay.sachin23

07-25-2011, 08:45 AM

Hi ,

I am inserting an image into a span tag by click on button and resize the image using resize_image_height_weight function.
I am using two function to do this task.
setImage
setImage_w3Validation

setImage function resize the image but fail on w3validation on my webpage( As per w3c there is no attribute onload for image tag.) To fix out this issue I am using setImage_w3Validation function which pass on w3validation but unable to call resize_image_height_weight function.

My purpose is to resize the image.

Kindly suggest me how to do it?

<html>
<head>
<script TYPE="text/javascript" language="javascript">

function resize_image_height_weight(id, hgt, wdth){
//alert(id);
Obj=document.getElementById(id);
myImage = new Image();
myImage.src = Obj.src;
var heights = myImage.height;
var widths = myImage.width;
// alert("Height=>" + heights + " Width=> " + widths);

if(heights > hgt || widths > wdth)
{
if(heights > widths)
{
var temp = heights/hgt;
var new_width = widths / temp;
new_width = parseInt(new_width);
heights = hgt;
widths = new_width;
}
else
{
var temp = widths/wdth;
var new_height = heights / temp;
new_height = parseInt(new_height);
heights = new_height;
widths = wdth;
}
}
Obj.height = heights;
Obj.width = widths;

}

function setImage(){
document.getElementById("IM0").innerHTML ="<center><img src=\"http://www.google.co.in/intl/en_com/images/srpr/logo1w.png\" id=\"img1\" alt=\"\" height=\"125\" width=\"125\" onload=\"resize_image_height_weight('img1',125,125);\"><\/center>";
}

function setImage_w3Validation(){
document.getElementById("IM1").innerHTML ="<center><img src=\"http://www.google.co.in/intl/en_com/images/srpr/logo1w.png\" id=\"img2\" alt=\"\" height=\"125\" width=\"125\"><script type=\"text/javascript\">document.getElementById('img2').onload = function(){resize_image_height_weight('i12',125,125);};<\/SCRIPT><\/center>";
//I wanna to do the task using this one function to resize img for w3validation
}
function clear_page(){
document.getElementById("IM0").innerHTML ="";
document.getElementById("IM1").innerHTML ="";
}
</script>
</head>
<body>
<div class="img3"><span id="IM0"></span></div>
<div class="img3"><span id="IM1"></span></div>
<input type="button" name="btn1" value="Image Onload W3C Fail" onclick="setImage();">
<input type="button" name="btn2" value="Image Onload W3C Pass" onclick="setImage_w3Validation();">
<input type="button" name="btn2" value="Clear" onclick="clear_page();">
</body>
</html>