How to insert images using javascript

Thursday 10 June 2004 12:37:37 am

----------------------------------------------------------------------------------------
Re: How to insert images using javascript
First of all, please dont start a new thread to continue an existing thread. People like myself will have already set their notifications on that thread so you risk losing contact with the people from the original thread. Also, please dont quote the original thread in your new one, it doesnt read correctly. Again this is confusing.

Can you give an example of the final javascript you want to create? It isnt clear exactly what javascript statements you need? From that we can deduce how to create it within eZ.

paul

-------------------------------------------------------------------------------------
Sorry for the trouble Mr.Paul My acual coding is :

Coding:(javascript)

function fnBuildTopMenu(cIn)
{
var myImg = "/images/";
var cTemp = "";
cTemp = cTemp + "<TD><IMG SRC=" + myImg + "_03.jpgWIDTH=155 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC=" + myImg + "_04.jpg WIDTH=155 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC=" + myImg + "_05.jpg WIDTH=154 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC=" + myImg + "_06.jpg WIDTH=155 HEIGHT=107></TD>";
}

How to insert the ezPublish codings to display the images which is in design/news/images in ezPublish ,but the myImg declared is done by other party which was in javascript.
Please help me and sorry for the trouble.Thank You.

Thursday 10 June 2004 2:29:55 am

Hello again Balaji.

I have replied to the posting you made earlier. And as I was about to reply to this I saw that you had edited your original post as an answer to Paul's reply.

While this probably might be convenient for you, it does mess a bit with the concept of threads and makes it harder for other people than Paul to chip in with some comments. Just my advice :-)

Anyway, as far as I can see from the provided Javascript when this is run in a browser, the final value of the cTemp variable is:

"<TD><IMG SRC=/images/_03.jpg WIDTH=155 HEIGHT=107></TD>
<TD><IMG SRC=/images/_04.jpg WIDTH=155 HEIGHT=107></TD>
<TD><IMG SRC=/images/_05.jpg WIDTH=155 HEIGHT=107></TD>
<TD><IMG SRC=/images/_06.jpg WIDTH=155 HEIGHT=107></TD>"

First of all I would like to point out that the attribute values in the IMG tag lacks " or ' around their values. Now I don't now which version of HTML you're using but I do believe that you should put the attribute values in either " or ' to be sure that most browsers can view your HTML.

When it comes to the problem of how to use JavaScript inside an eZ template there's two ways. First is to use {literal}{/literal} to make eZ write the { and } characters between those "tags" correctly, or you could write "{ldelim}" instead of "{" and "{rdelim}" instead of "}" in all your Javascripts.

So to put your Javascript inside an eZ template, here's what I would do:

<script type="text/javascript" language="Javascript">
{literal}
function fnBuildTopMenu(cIn)
{
var cTemp = "";
cTemp = cTemp + "<TD><IMG SRC="{/literal}{_03.jpg|ezimage}{literal}" WIDTH=155 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC="{/literal}{_04.jpg|ezimage}{literal}" WIDTH=155 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC="{/literal}{_05.jpg|ezimage}{literal}" WIDTH=154 HEIGHT=107></TD>";
cTemp = cTemp + "<TD><IMG SRC="{/literal}{_06.jpg|ezimage}{literal}" WIDTH=155 HEIGHT=107></TD>";
}
{/literal}

This uses the ezimnage template operator to insert the design/yoursiteaccess/images to path to all your image names.

This would also put " around the source attribute of your img tag, if you still can't see any images then it's probably the resulting image source that is wrong and you should update your javascript to make sure it puts the correct image name in the src attribute.

best regards
trondåge

trondåge

Thursday 10 June 2004 3:20:06 am

Hi Balaji

Ok, it doesn't work, you say.

I what way does it not work, do you get any error messages? What does the source code in your HTML page say? (To show this, just click Source code in the View menu)

If you can explain what you are trying to do, what output you expect and what output you get, etc it would be much easier to help you.

best regards
trondåge

trondåge

Friday 11 June 2004 2:15:27 am

Ok, I will try to sum up a bit just to make sure I've understood you correctly. Please correct me if I'm wrong.

You have a finished, static website. You want to convert this to a dynamic eZ publish site, right.

You have managed to display a news article dynamically on the website, but the images in the news article does not display.

You have transfered all the images in design/news/images. Does that mean that all your news images are now found in design/news/images? Or have you transferred them from design/news/images to somewhere else on your server?

And where does the "about" come from? Is the name of the image that ends with _03.jpg actually about_03.jpg? What are the names of the other images? That is those that ends with _04.jpg, _05.jpg and _06.jpg?

The javascript you mention has a function that accepts an argument called cIn. But as far as I can see it is not used inside the function. Do you know why?

Also the javascript only stores the needed HTML-code to display the images in a variable called cTemp. Does the contents of this variable ever get written into the document?

If you could please answer these questions, I'll try to help to the best of my abilities.

trondåge

Friday 11 June 2004 5:23:40 am

OK, now I understand (I hope)

I presume that you have tested the page so you know it works when it is static, right.

Oh and by the way, when the function fnBuildTopMenu is called what parameter/argument do you pass? In other words what are the value of cIn? "about"?

Anyway I have two suggestions for you:

1. change the line
var myImg = "/images/" + cIn; to
var myImg = "news/images/" + cIn;

2. If that doesn't work remove the {literal} and {/literal} tags around your script and use "{ldelim}" instead of "{" and "{rdelim}" instead of "}" in your scripts.

best regards
trondåge

trondåge

Thursday 17 June 2004 1:57:37 am

Hi Balaji!

Good to see that you managed to fix it, well done :-)

I thought I'd just chip in with a nice JavaScript tip, which you might find useful. I see that you write your cTemp statements like:

cTemp = cTemp + "<TD>................

You can achieve the same result with

cTemp += "<TD>................

Which is a bit shorter to write. :-)

Best regards
trondåge

trondåge