images in HTML/JSP

[Simon Ingram]

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]

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.

[Simon Ingram]

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]

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:

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

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 ]

[Simon Ingram]

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]

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

[Ulf Dittmer]

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]

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]

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]

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]

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]

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]

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]

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]

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:

request.setAttribute( "cards", arrayOfCardNames );    

In JSP:

<c:forEach items="${cards}" var="cardName">
  <img src="${cardName}.jpg"/>
</c:forEach>
    

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]

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?