How to put .gif image using java script

neha_kulkarni777 · **Joined:** Tue Nov 04, 2008 1:08 pm **Posts:** 21

Hi

If i click on upload button i must get an .gif image , is it possible , in the code below

Code:

<INPUT type="button" name="btnUpload" id="btnUpload" value="Upload" onclick="validateField()" />

and this is my
source

Code:

How to put it in above code

My requirement is when the user click on upload button , he must see the UploadStatus.gif image .
please help

Regards

panzer · **Joined:** Mon Nov 17, 2008 6:50 am **Posts:** 7

You *may* be able to try something like

Code:

function validateField() {

   var docs = document.getElementById("img");
   docs.setAttribute("src", "gif_path");

    ... // other code
}

Code:

<body>
...
<img id="img" src='#'>
...
</body>

neha_kulkarni777 · **Joined:** Tue Nov 04, 2008 1:08 pm **Posts:** 21

panzer wrote:

You *may* be able to try something like

Code:

function validateField() {

   var docs = document.getElementById("img");
   docs.setAttribute("src", "gif_path");

    ... // other code
}

Code:

<body>
...
<img id="img" src='#'>
...
</body>

Thanks a lot panzer , It worked , successfully , Thanks a lot for ur help

but it is showing a square box by default and when the upload button is clicked the .gif image is displayed , I dont need that square box .
i got the solution , but is there any way to remove the square box . Thanks
[/img]

flabbyrabbit · **Posted:** Tue Nov 18, 2008 11:35 am

You could try something like:

Code:

and

Code:

function validateField() {

   var docs = document.getElementById("img");
   docs.setAttribute("src", "gif_path");
   docs.style.display = 'block';

    ... // other code
} 

Hope that helps,
Flabby Rabbit

rangana · **Posted:** Tue Nov 18, 2008 2:57 pm

Flabby, there's no solid value on CSS' display property.

This part is erroneous:

Code:

docs.style.display = 'solid';

For further reading:
http://www.w3schools.com/css/pr_class_display.asp

flabbyrabbit · **Posted:** Tue Nov 18, 2008 5:21 pm

I meant "block", sorry.

Edited post.

Flabby Rabbit

panzer · **Joined:** Mon Nov 17, 2008 6:50 am **Posts:** 7

neha_kulkarni777 wrote:

but it is showing a square box by default and when the upload button is clicked the .gif image is displayed , I dont need that square box .
i got the solution , but is there any way to remove the square box . Thanks

You can try adding border="0" to the img tag.

Code:

You can also try a masked image instead of using src="". Another option *may* be to use the div tag and innerHTML, but I don't know how how well it's supported by different browsers.

Code:

function validateField() {

   var docs = document.getElementById("container");
   docs.innerHTML = "<img src="gif_path">;

    ...  // other code
}
...
<body>
<div id="container"></div>
...

Hope that helps.

rangana · **Posted:** Wed Nov 19, 2008 1:29 am

flabbyrabbit wrote:

I meant "block", sorry.

Edited post.

Flabby Rabbit

That would work well, but image is (by default) an inline-element.

Changing it to block-level element (as by changing it's display property to block) isn't a desired effect.

We only want to toggle the image's display.

You can leave the value an empty space:

Code:

docs.style.display=''

...this also means a positive display.

Hope that makes sense

@panzer,

Don't use the border attribute - it's deprecated:
http://www.w3.org/TR/REC-html40/index/attributes.html
http://www.codehelp.co.uk/html/deprecated.html

How to put .gif image using java script

Who is online