Hi,
I have one issue in image display on device , it is working fine on simulator. when apps load , two small images are displayed,and i put the onclick event on two images. when click on the first images (GoAir.png),then load a Version.png (alignment is correct), But when i click on the second img(AIRINDIA.png) , the alignment of img (Version.png) extended to the right side.So alignment is not corrected .
Please see my web apps link :URL: http://goo.gl/zRtLH&type=webapp1_0
Js code is:
function init()
{
// Add your code steps here
document.getElementById('imgid1').style.display = "block";
document.getElementById('imgid2').style.display = "block";
document.getElementById('loadimg1').style.display = "none";
var img1="<table width='240' cellpadding='4' cellspacing='2'><tr><td><img src='GoAir.png' onclick='javascript:loadimg();'></td></tr></table>";
var img2="<table width='240' cellpadding='4' cellspacing='2'><tr><td><img src='AIRINDIA.png' onclick='javascript:loadimg();'></td></tr></table>";
mwl.insertHTML('#imgid1',img1);
mwl.insertHTML('#imgid2',img2);
}
function loadimg()
{
document.getElementById('imgid1').style.display = "none";
document.getElementById('imgid2').style.display = "none";
document.getElementById('loadimg1').style.display = "block";
var loadimg="<div id='tablebox'><table width='240' cellpadding='4' cellspacing='2'><tr><td><img src='Version.png' onclick='javascript:init();'></td></tr></table></div>";
mwl.insertHTML('#loadimg1',loadimg);
}
index.html
<body onload="javascript:init();">
<div id='imgid1'></div>
<div id='imgid2'></div>
<div id="loadimg1"></div>
</body>
basic.css is
#tablebox
{
margin-left:5px;
margin-top:20px;
}
Regards,
Greenbil

Reply With Quote

