Share » Forums » Developer » How to insert images using javascript

How to insert images using javascript

How to insert images using javascript

Thursday 10 June 2004 12:37:37 am - 10 replies

Modified on Thursday 10 June 2004 2:00:20 am by Balaji Ramachandran

Author Message

Paul Forsyth

Thursday 10 June 2004 12:57:21 am

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

--
http://www.visionwt.com

Trond Åge Kvalø

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

Balaji Ramachandran

Thursday 10 June 2004 2:59:06 am

Thanks a lot for ur reply but i tried ur coding it is not working i could'nt find out the correct reason for this.Sorry for the trouble and thanks for your reply sir .

Trond Åge Kvalø

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

Balaji Ramachandran

Thursday 10 June 2004 3:41:47 am

Sir actually iam trying to convert a finshed web site in ezpublish .See what iam trying to do is i wanted the news article to be placed dynamically in the finished website. ihave done but the images what they are displaying is not coming in ezpublish.I have transfered all the images in design/news/images.but they have kept in some local folder called images So that myImg var is under confusion how to solve this whther to take the myImg variable and place original name of the jpg as about_03.jpg ezpublish style or how to do .but in all methods i have tried it is displaying a plain page or else it is diplaying the page without images when we keep that (myImg="/images/";)local folder name is images dont confuse.

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>";
}
Please help me ,in which way to solve this problem.

Trond Åge Kvalø

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

Balaji Ramachandran

Friday 11 June 2004 4:29:46 am

Hi Trond,

I have a finished static website and I am converting it to dynamic using Ez Publish. Right now, I have not handled any images from the article. I am trying to display the images in the html page layout like the top banner. Those images are present in news/images. This is the full script from the static webpage. I have enclosed the full javascript inside {literal}.

function fnBuildTopMenu(cIn)
{
var myImg = "images/" + cIn;
var cTemp = "";
cTemp = "<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>";
cTemp = cTemp + "<TR><TD WIDTH=100% BGCOLOR=#E2E1E6 HEIGHT=25 ALIGN=RIGHT>";
cTemp = cTemp + "<a href='http://www.domain.com/index.html' target='_blank' class=TopMenu>Home</a> <font face=arial size=2 color=#FFB12B><b> |  </b></font>";
cTemp = cTemp + "<a href='http://www.domain.com/kghAdmitProcess.html' target='_blank' class=TopMenu>Patient Information</a> <font face=arial size=2 color=#FFB12B><b> |  </b></font>";
cTemp = cTemp + "<a href='http://www.domain.com/kghPhysicianSname.html' target='_blank' class=TopMenu>Physician Listing</a> <font face=arial size=2 color=#FFB12B><b> |  </b></font>";
cTemp = cTemp + "<a href='http://www.domain.com/kghDonation.html' target='_blank' class=TopMenu>Donation</a> <font face=arial size=2 color=#FFB12B><b> |  </b></font>";
cTemp = cTemp + "<a href='http://www.domain.com/kghMediNews.html' target='_blank' class=TopMenu>News & Events</a> <font face=arial size=2 color=#FFB12B><b> |  </b></font>";
cTemp = cTemp + "<a href='http://www.domain.com/kghCareers.html' target='_blank' class=TopMenu>Careers</a>   ";
cTemp = cTemp + "</TD></TR>";
cTemp = cTemp + "<TR><TD width=100% bgcolor=#BABABA><img src='images/spacer.gif' height=1></TD></TR>";
cTemp = cTemp + "<TR><TD WIDTH=100%>";
cTemp = cTemp + "<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>";
cTemp = cTemp + "<TR><TD><a href='http://www.domain.com/index.html' target='_blank'><IMG SRC='images/inner-ban-mid_01.jpg' WIDTH=154 HEIGHT=107 BORDER='0'></a></TD>";
cTemp = cTemp + "<TD background='images/inner-ban-mid_02.jpg' WIDTH=100% HEIGHT=107><img src='images/spacer.gif'></TD>";
cTemp = cTemp + "<TD><IMG SRC=" + myImg + "_03.jpg WIDTH=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>";
cTemp = cTemp + "</TR></TABLE></TD></TR>";
cTemp = cTemp + "<TR><TD width=100% bgcolor=#BABABA><img src='images/spacer.gif' height=1></TD></TR>";
cTemp = cTemp + "<TR><TD WIDTH=100% BGCOLOR=#E2E1E6 HEIGHT=25 ALIGN=RIGHT>";
cTemp = cTemp + "<a href='http://www.domain.com/DrGBProfile.html' target='_blank' class=TopMenu>Dr. GB Profile</a> <font face=arial size=2 color=#FFB12B><b> |  </b></font>";
cTemp = cTemp + "<a href='http://www.domain.com/kghPersonality.html' target='_blank' class=TopMenu>Personality In Focus</a> <font face=arial size=2 color=#FFB12B><b> |  </b></font>";
cTemp = cTemp + "<a href='http://www.domain.com/kghPspeak.html' target='_blank' class=TopMenu>Patient Speak</a> <font face=arial size=2 color=#FFB12B><b> |  </b></font>";
cTemp = cTemp + "<a href='http://www.domain.com/kghEducation.html' target='_blank' class=TopMenu>Educational Initiatives</a>   ";
cTemp = cTemp + "</TD></TR></TABLE>";

document.write(cTemp);
}
I am not able to use "|ezimage" for displaying the image. Any help is appreciated.

Thanks
Balaji

Trond Åge Kvalø

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

Balaji Ramachandran

Tuesday 15 June 2004 8:17:50 am

Hi,

I achieved it with this code

cTemp = cTemp + "<TD><IMG SRC=" + {/literal} {'about_03.jpg'|ezimage} {literal} + " WIDTH=155 HEIGHT=107></TD>";

Thanks a lot.

Trond Åge Kvalø

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

You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu