how to load an image in a jsp

[kunal vermaa]

please tell me how to load an image inside a jsp through click of a button..

help..

[David Newton]

Do you mean via Ajax?

[kunal vermaa]

i dont know.. i am new to java.. please explain..

[Rob Spoor]

Tell us what you want to do exactly. Can the current page be replaced by the image? Do you want to open the image in a new window (or tab)? Do you want to include the image in your current page? Can the current page be refreshed?

1) use a simple &;t'a href="my_image.png">Click here for my image!
2) use a simple &;t'a href="my_image.png" target="_blank">Click here for my image!
3+4) use JavaScript (setting the src attribute of the image element) if you don't want to refresh the page, or a form with submitting if refreshing is allowed

I'm thinking the JSP part is actually irrelevant; it seems to be mostly about HTML and maybe a bit of JavaScript. Moving to the HTML / JavaScript forum.

[kunal vermaa]

i want to load the pic on the same jsp page on click of a button or when an mouse event is generated please explain how..?

[Bear Bibeault]

In the click event handler, simply create a new <img> element that references the image URL. What part has you stumped?

[kunal vermaa]

thanks a lot bro for your help.. actually i am new to java.. not very familiar with images.. can you explain how to fetch an image placed in a directory...?

[Rob Spoor]

Creating an image element on the fly may be quite hard. Not the creating itself, but the placing etc.

Instead, why not create an image element which you initially hide:

<img name="image_i_want_to_change" id="image_i_want_to_change" 
src="dont_really_care_since_were_not_using_it_anyway" style="display: none">

With JavaScript, you can then change the image source and unhide it:

var image = document.getElementById("image_i_want_to_change");
image.src = "folder_with_image/image.jpg"; // change the image source so a different image will be displayed
image.style.display = ""; // unhide

The order of these two changes is important; if you unhide it first the bogus image (or lack thereof) is shown.

Of course the image will need to be loaded so it may take sometime. Therefore, perhaps you can use an empty, transparant (GIF) image initially (instead of "dont_really_care_since_were_not_using_it_anyway"). It won't show up as a red cross (meaning image cannot be found), but still show nothing while the new image is loading.

[Bear Bibeault]

kunal vermaa wrote:actually i am new to java

This has nothing at all to do with Java.

<img name="image_i_want_to_change"

The name attribute is not legal in image elements.

can you explain how to fetch an image placed in a directory...?

No fetching is involved. Image elements reference images by URL. If you do not know HTML, that's good place to start.

[kunal vermaa]

1. <img name="image_i_want_to_change" id="image_i_want_to_change" src="dont_really_care_since_were_not_using_it_anyway" style="display: none">
2. <% var image = document.getElementById("image_i_want_to_change");
3. image.src = "C:\Documents and Settings\hp\Desktop\wall\image1.jpg;"
4. image.style.display = "";
%>



myeclipse6.5 is showing "invalid escape sequence in the line 3" i.e it is showing error in the path. but path is ok.. what should i do..? and is this code sufficient to load an image on a JSP.?

please help

[Bear Bibeault]

Why do you have the JavaScript code in a Java scriptlet? If you do not know the difference between JavaScript, Java and Java scriptlets, you need to back up a bit and learn the difference.

Nothing we are talking here needs Java. No Java scriptlets. No JSP. No java. This is all client-side JavaScript. It can appear within a JSP, but does not need any server-side mechanisms.

Perhaps this article might be helpful.

[kunal vermaa]

Thanks a lot for getting me right bro.. i got it..