How to put .gif image using java script

by **neha_kulkarni777** on Mon Nov 17, 2008 2:44 pm

Hi

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

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

and this is my
source

Code: Select all: <img src="images/action/animation/UploadStatus.gif"/>

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

by **panzer** on Mon Nov 17, 2008 9:56 pm

You *may* be able to try something like

Code: Select all: function validateField() { var docs = document.getElementById("img"); docs.setAttribute("src", "gif_path"); ... // other code }

Code: Select all: <body> ... <img id="img" src='#'> ... </body>

by **neha_kulkarni777** on Tue Nov 18, 2008 3:04 am

panzer wrote:You *may* be able to try something like

Code: Select all
function validateField() { var docs = document.getElementById("img"); docs.setAttribute("src", "gif_path"); ... // other code }

Code: Select all
<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]

by **flabbyrabbit** on Tue Nov 18, 2008 10:35 am

You could try something like:

Code: Select all: <img id="img" src='#' style="display:none">

and

Code: Select all: function validateField() { var docs = document.getElementById("img"); docs.setAttribute("src", "gif_path"); docs.style.display = 'block'; ... // other code }

Hope that helps,
Flabby Rabbit

by **rangana** on Tue Nov 18, 2008 1:57 pm

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

This part is erroneous:

Code: Select all: docs.style.display = 'solid';

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

by **flabbyrabbit** on Tue Nov 18, 2008 4:21 pm

I meant "block", sorry.

Edited post.

Flabby Rabbit

by **panzer** on Tue Nov 18, 2008 11:33 pm

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: Select all: <img id="img" src="" border="0">

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: Select all: function validateField() { var docs = document.getElementById("container"); docs.innerHTML = "<img src="gif_path">; ... // other code } ... <body> <div id="container"></div> ...

Hope that helps.

by **rangana** on Wed Nov 19, 2008 12: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: Select all: 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