Member Avatar for mlohokare

Hi,

I am new in Javascript.

I want to add few lines for content, which is already present, using Javascript.

HTML code :

<html>
   <head>
	  <script type="text/javascript">
	  function test()
	  {
	  t = document.getElementById("p123");
		w = t.width;
		h = t.height;
	  </script>
</head>
<body onload="test();">
	<p><img alt="Graphic" id="p123" src="image1.gif" /></p>
	<p>TEST</p>
</body>
</html>

In above HTML
If image is grater than 300px width then below line should be appeared otherwise no.

<p><a href="image1.gif"><img href="zoom.gif" /></a></p>

With above script i reached upto half part.

Please help me out.

Thanks in Advance.

  • 2 Contributors
  • 3 Replies
  • 162 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by Thirusha
Member Avatar for Thirusha

You use an if statement:

<script type="text/javascript">
	  function test()
	  {
	  t = document.getElementById("p123");
		w = t.width;
		h = t.height;
		if (w > 300){
                 // do something here
		}
		}
	  </script>

I am not sure what you mean by bottom line must show, if you are talking about the words "TEST" must show, then first give the tag and id attribute, then use the style="display:none" attribute on the p tag, then in the if statement(where i wrote do something), add this:

document.getElementById("idOfPTag").style.display = "block"
Member Avatar for mlohokare

Hi Thirusha,

Thanks for instant replay.

Below is my example,

<html>
      <head>
      <script type="text/javascript">
      function test()
      {
      t = document.getElementById("p123");
      w = t.width;
      h = t.height;
      </script>
      </head>
      <body onload="test();">
      <p><img alt="Graphic" id="p123" src="image1.gif" /></p>
      <p>TEST</p>
      </body>
</html>

And i want to check width with the function and want to generate a extra line below the <p><img alt="Graphic" id="p123" src="image1.gif" /></p> as <p><a href="image1.gif"><img href="zoom.gif" /></a></p> If and only if the image size is grater than the 300 pixel. That will be shown only on browser not in coding.

But simultaneously don't want to touch the other elements [Like <p> etc. ].

So my resultant HTML file should look like on browser as below
In which width will change for <img> element and below that <p> will appeared so on browser there will be a link where actual image can be seen.

<html>
      <head>
      <script type="text/javascript">
      function test()
      {
      t = document.getElementById("p123");
      w = t.width;
      h = t.height;
      // Dont know what shuld be come over here 
      and I am looking for the same
      </script>
      </head>
      <body onload="test();">
      <p><img width="300" alt="Graphic" id="p123" src="image1.gif" /></p>
       <!--  It will be displayed on browser only -- ><p><a href="image1.gif"><img href="zoom.gif" /></a></p>
      <p>TEST</p>
      </body>
</html>

Hope this can clarify.. :(

Member Avatar for Thirusha

You will then need to employ the innerhtml attribute, this is what u need to do, first create empty p tags with an id, remember id must be unique.
then in the if statement you insert this:

document.getElementById("pTagId").innerHTML = '<a href="image1.gif"><img href="zoom.gif" /></a>'

where pTagId = the unique id of your p tag.

another thing your current javascript is not going to work properly since you havent closed the tags. Based on the last posts code:

<html>
      <head>
      <script type="text/javascript">
      function test()
      {
      t = document.getElementById("p123");
      w = t.width;
      h = t.height;
      // Dont know what shuld be come over here 
      and I am looking for the same
[B]}[/B]
      </script>
      </head>
      <body onload="test();">
      <p><img width="300" alt="Graphic" id="p123" src="image1.gif" /></p>
       <!--  It will be displayed on browser only -- ><p><a href="image1.gif"><img href="zoom.gif" /></a></p>
      <p>TEST</p>
      </body>
</html>

please insert the closing bracket(in bold and in red) in your code.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.