I am Mahesh. I am new in Javascript.
I am creating a web page using XSLT. But for that I need help for javascript.
Problem Statement
*****************************************
There are several <img>s in output html page.
images id are randomly generated using xslt.
in that img tag there is no width attribute.
I need to check the width of the original images before loading.
If image’s width is more than 300px then
1] that image should automatically get dispalyed as 300px in width.
2] Below that image there should be a link
like <a href="…" ….>Click here for actual image</a>
3] After clicking on link the original image should be appear.
*****************************************
While trying i reached upto below,
<html>
<head>
<style type=’text/css’> .test1{float:center;margin:.5em 0;margin-right:10px;border:0px solid #999; padding:2px; width: 300px}</style>
<script language="JavaScript" type="text/javascript">
function getImgSize(imgSrc)
{
var newImg = new Image();
newImg.src = imgSrc;
var width = newImg.width;
if (width > 300)
{
document.getElementById(’img_2′).className = ‘test1′;
}
else
{
alert (’width is: ‘ + width + ‘ so Image is correct’);
}
}
</script>
</head>
<body bgcolor=’#FFFFFF’ text=’#000000′ vlink=’#840084′ alink=’#0000FF’ class=’text’ >
<div style=’margin-left: 0pt; margin-right: 0pt; text-indent: 0pt; break-before: page;’>
<div style=’margin-left: 0pt; margin-right: 0pt; text-indent: 0pt; margin-top: 8pt; text-align: center;’>
<img id="img_1" alt=’Graphic’ src="pic23281.jpg" onClick="getImgSize(document.getElementById(id).src);"/>
</div>
<div style=’margin-left: 0pt; margin-right: 0pt; text-indent: 0pt; margin-top: 8pt; text-align: center;’>
<img id="img_2" alt=’Graphic’ src="test2.jpg" onClick="getImgSize(document.getElementById(id).src);" />
</div>
</div>
</body>
</html>
*****************************************
Is there any way without explistly mentionetion the "id" I can manage which image should be bigger and how to generate an anchor below that image only. Because i cant know each and every time which will be the <img id="">
Thanks in advance.
I am really stuck on this point please help.
Cheers
Mahesh
Loading ...