wood burning stoves 2.0*
The moose likes JSP and the fly likes images in HTML/JSP Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Java » JSP
Bookmark "images in HTML/JSP" Watch "images in HTML/JSP" New topic
Author

images in HTML/JSP

Simon Ingram
Ranch Hand

Joined: Nov 30, 2003
Posts: 171
Hi folks,

This is a pretty general question and I hope I am in the appropraite forum.

In HTML one can display an image with the following code:

<img src="path/image.jpg" width = "70" height="100" />

Now, if I want to display an image in a jsp and then use some logic to redisplay a second image in the same location on the page, how do I do it? The above is hard coded. In a jsp I cannot build a string and then display it, i.e.

<% String i1 = "path/image1.jpg";
String i2 = "path/image2.jpg";

.. some logic to assign either i1 or i2 to s..

String h = "<img src=" + s + "width=/""70" ... etc;
%>

as you see, although I have built a String, the HTML bit is still text. I can't think of a way of parameterising the HTML. I thought of actually writing different images into the file located at

path/image.jpg

but this feels wrong, since in web apps generally, writing to the deployed files is not usually recommended.

So, how does one display different images on a page?

with best regards,
Simon Ingram
Ulf Dittmer
Marshal

Joined: Mar 22, 2005
Posts: 41155
    
  45
In a jsp I cannot build a string and then display it, i.e.

<% String i1 = "path/image1.jpg";
String i2 = "path/image2.jpg";

.. some logic to assign either i1 or i2 to s..

String h = "<img src=" + s + "width=/""70" ... etc;
%>


Why not? What prevents you from doing this? If the logic to decide between i1 and i2 can be decided in the server, then you can use JSP. If it depende on something on the client, or if you want to change images once the page has been generated and served to the browser, then you need to use a JavaScript solution.


Ping & DNS - my free Android networking tools app
Simon Ingram
Ranch Hand

Joined: Nov 30, 2003
Posts: 171
Hi Ulf,

the logic is on the server. the problem is not making the decision, it is the technical matter of displaying different images on a web page. Imagine the page shows some playing cards (jpeg files). Is it possible to keep the table static and use the servlet to write different images (cards) to the same location on the page? I can't see how to get round the fact that the HTML is not flexible.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60810
    
  65

I'm with Ulf in not understanding your issue. It's a pretty straight-forward type of operation that I've used many times; unless youve needlessly complicated your JSP page.

For starters:



Why one earth are you building up markup in Java strings inside a JSP? The whole purpose of a JSP is to serve as a template for markup, not generate it in code.
[ March 31, 2007: Message edited by: Bear Bibeault ]

[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Simon Ingram
Ranch Hand

Joined: Nov 30, 2003
Posts: 171
Hi guys,

Sorry if I am not making myself clear. If I want to display an image on a page then I use the following HTML

<img src="path/image.jpg" width = "70" height="100" />

which will display the image called image.jpg located at directory path. Now if I want to display a second image in the same position on the page, i.e. overlay a second image, how do I do it?

the code in my former posts simply showed how I had failed. If I define an image, then I either have to generate an entirely new page with the second image in the same place or I can overwrite the content of the file at path/image.jpg. Neither seem very good options if I am trying to play cards. I was inviting the experts to suggest a solution.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60810
    
  65

At what point do you want to replace the first image with the second?
Ulf Dittmer
Marshal

Joined: Mar 22, 2005
Posts: 41155
    
  45
If you're talking about changing the image in the browser based on some user interaction (i.e., long after the page has been generated), then this page demonstrates how that can be done using JavaScript.
Simon Ingram
Ranch Hand

Joined: Nov 30, 2003
Posts: 171
Hi there Bear and Ulf,

I am trying to construct a simple card game. The client plays the server, but I had in mind that the server would be controlling the game, so no javascript! The first step is to deal six cards to each player. The idea is to provide a page with six cards along the top (the server's cards) and six along the bottom (the client's cards). Now my page will display 12 image files called card1.jpg, card2.jpg etc. The first step is to randomly select 12 from 52 and then write the appropraite card to the page. So aceClubs.jpg goes to the card1.jpg position etc. How would I do this in a jsp? I can't hardcode (HTML) the pages until I know what the cards are and as I say, overwriting files via streams doesn't sound like the right way to do it either.

regards
Simon
William Brogden
Author and all-around good cowpoke
Rancher

Joined: Mar 22, 2000
Posts: 12761
    
    5
but I had in mind that the server would be controlling the game, so no javascript!

Lets drop back a bit and review the concept of Model - View - Controller - a handy way of looking at the separation of function.
In you case of representing a hand of cards on the user's browser and its interaction with a game, a breakdown could be:

Model: the identity of cards in the players hand - great for a server class

View: the exposed images - telling the browser to expose a certain image in a certain position is ideal for JavaScript. There really is no simpler way to do it unless you want to redraw a static page for every change. Sounds like the highly popular AJAX with XML or JSON representation (whee I got to use buzzwords!)

Controller: the logic that shows which cards interact with the game based on user input - once again the servlet side is the place for this.

Bill
Simon Ingram
Ranch Hand

Joined: Nov 30, 2003
Posts: 171
Thanks for the advise about how do design the app, but i am still in the concept stage and my question is a very simple one! If I want to display a page with a selection of images that are not known in advance and therefore cannot be coded in html

i.e.
<img src="path/file" etc

because the file name is not known, how is it done? do i specify a dummy file name and then create the file on the fly? or can I somehow dynamically create the html? I suppose I could use servlet println statements, but I feel sure the wickedly smart team would be very disappointed!

Come on, guys, I'm sure there is something simple that I am missing!
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60810
    
  65

To be quite honest, I really haven't a clue as to what your issue really is.

Originally posted by Simon Ingram:
because the file name is not known, ...


Why is it not know? When will it be known? How will it come to be known?

do i specify a dummy file name and then create the file on the fly?


Where? How?

can I somehow dynamically create the html?


Yeah, that's what JSPs do.

I'm sure there is something simple that I am missing!


I'm sure there is, because this should be butt-simple. But you're not communicating where your disconnect is very well.

For example, why are the image names not known at JSP execution time? I can't think of why and you haven't explained it in any way that enlightens me.
[ April 03, 2007: Message edited by: Bear Bibeault ]
Simon Ingram
Ranch Hand

Joined: Nov 30, 2003
Posts: 171
Hi,

Sorry I am not making myself clear. At least we agree there is a butt simple solution to this, so let me try again:

If I have image files that contain playing cards Ac.jpg = ace clubs, 2c.jpg = two clubs etc

now I want to display a screen with some cards on it. My servelt can decide which cards to display and then forwards to a jsp. But when I write the jsp i don't know the cards, they are decided at run time and this is my problem. When I write the jsp the only way I know to display an image is to use the HTML <img> tag and for this I must specify an image file. But I don't know it!

that's my problem!
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60810
    
  65

My servelt can decide which cards to display and then forwards to a jsp. But when I write the jsp i don't know the cards


The servlet should pass that data on to the JSP as scoped variables. The JSP can them dynamically fill in the src attriutes of the <img> tags.

This is very basic JSP -- in fact, this is the whole reason for JSP's being as a technology -- is this your first?
Simon Ingram
Ranch Hand

Joined: Nov 30, 2003
Posts: 171
Hi Bear,

thanks for your patience! Yes, practically my first and obviously my lack of prowess is plain to see. So, sorry to keep banging on, but how does the jsp fill in the src attributes of the img tag?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60810
    
  65

Assuming that you are using JSP 2.0 and have JSTL 1.1 set up (and if not, you should), let's assume that the servlet provides the six card names as a string array and places it as a scoped variable named cards on the request.

In servlet:

In JSP:

Again this assumes a JSP 2.0 container such as Tomcat 5.x and the use of JSTL 1.1. If you are not set up as such, now is the time. Anything else is learning old crap that you're just going to have to unlearn.
Simon Ingram
Ranch Hand

Joined: Nov 30, 2003
Posts: 171
Hi Bear,

don't want to appear ungrateful, but is there any way to do it just using java (scriptlets). I know you will tell me tags are great and intuitive and marvellous for web designers. But... can it be done without the tags?
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: images in HTML/JSP
 
Similar Threads
Scrolling Images in HTML page
image does not display on JSP page w/ Tomcat server
images in HTML/JSP
Image Display problem
preloading of images and the cache