creating var in javascript and then access in html code

**PT Exorcist** · Sep 26th, 2003, 06:49 PM

i am creating a bigg page that will have lots of images that will have the same url..my idea to turn the page size smaller is to put at the top of the page a var with the url of the images and then just put in the images 'src' tag the var , this way by each image i get like less 50 chars(in let's say 100 images i am gettin 5000 chars and it will be a lot more than that!)

so how can i do that?

i put at the top of the code:
<script language="javascript">
var myPic = "http://............."
</script>

and now

<img src="what here?">

**Chroder** · Sep 26th, 2003, 07:04 PM

You have to go back into javascript and use it to print it out.

Code:

<script language="javascript">
document.write('<img src="' + myPic + '">');
</script>

**PT Exorcist** · Sep 26th, 2003, 07:07 PM

isnt there a easier way? doin that i gain nothing and only turns my code into something more complicated :S

**Chroder** · Sep 26th, 2003, 07:13 PM

I don't think so... what's made in javacript is kept in javascript, I don't think there's a way just to "pop" the value of a javascript variable into HTML.

**PT Exorcist** · Sep 26th, 2003, 07:14 PM

hmmmm then how to explain that like <body onload="javascript:myfunction()"? its not into javascript lol

**Chroder** · Sep 26th, 2003, 07:19 PM

onload, onclick, onmouseover etc. are all javascript, they're javascript event's. Once x event is fired, then do y javascript.

I was thinking, possibly you could do something like this.

Code:

<script language="javascript">
function doimg(url, image)
{
    image.src = 'http://my/url/prefix/' + url;
}
</script>

<img onload="doimg('myimage.jpg', this)">

Only if there was a "when_parsed" type thing in javascript, that might work...

**PT Exorcist** · Sep 26th, 2003, 07:20 PM

hmm ill check that

tks anyways

**PT Exorcist** · Sep 26th, 2003, 10:03 PM

the code u wrote doesnt work..i tried just like u've put and it damn dont work :S

**jeffmott** · Oct 4th, 2003, 05:53 PM

onload, onclick, onmouseover etc. are all javascript, they're javascript event's. Once x event is fired, then do y javascript

Actually onload, onclick, onmouseover, etc. are all HTML attributes for binding a certain event with a script action, which is not necessarily written in JavaScript.

the code u wrote doesnt work..i tried just like u've put and it damn dont work

Note that some of the values in that script (e.g., URL and the image's file name) need to be customized.

Code:

<img src="" alt="" onload="this.src = 'http://www.site.com/path/pic'">

**PT Exorcist** · Oct 6th, 2003, 02:00 PM

Originally posted by jeffmott
Actually onload, onclick, onmouseover, etc. are all HTML attributes for binding a certain event with a script action, which is not necessarily written in JavaScript.Note that some of the values in that script (e.g., URL and the image's file name) need to be customized.

Code:

<img src="" alt="" onload="this.src = 'http://www.site.com/path/pic'">

try the code u just typed by urself. it won't work.

**jeffmott** · Oct 6th, 2003, 02:08 PM

hmm, indeed. this also explains why chroder's also did not work. the onload event is never triggered, probably because initially there is nothing to load. so we can fix this by putting the event handler in the body rather than the image itself.

Code:

<body onload="document.getElementById('ImgID').src = 'http://www.site.com/path/pic'">

<img id="ImgID" src="" alt="">

</body>

**PT Exorcist** · Oct 6th, 2003, 02:13 PM

yep working! tks!

**honeybee** · Oct 10th, 2003, 04:43 AM

I just found out about another way of using a variable in JavaScript in the HTML code.

HTML Code:

<html>
<head>
<title>Using the JavaScript entities.</title>
<script language="JavaScript"><!--
linkTo="http://www.jaworski.com/javascript"
// -->
</script>
</head>
<body>
<a href="&{linkTo};">Click here.</a>
</body>
</html>

I haven't yet tried that part, but it's verbatim from "Mastering JavaScript" by James Jaworski (BPB Publication) Page 40.

NOPE, IT AIN'T WORKIN' !!!

.

**phpman** · Oct 10th, 2003, 05:47 PM

Originally posted by PT Exorcist
yep working! tks!

so you would rather put 100 images in the body tag instead of the img tag. I don't see the point as it doesn't gain you anything.

Code:

<body onload="document.getElementById('ImgID').src = 'http://www.site.com/path/pic'">

<img id="ImgID" src="" alt="">

</body>

hmm 132 characters compared to 81 ???

Code:

<body>

<img id="ImgID" src="http://www.site.com/path/pic" alt="">

</body>

seems the old fashion way is a lot better.

but if all you want to do is break it down some then just do this

<img id="ImgID" src="pic.jpg" alt="">

but if they are on a different server than you would be hotlinking and most hosts don't like that. so if they are on your server than I don't see any reason to add the url.

**PT Exorcist** · Oct 10th, 2003, 06:01 PM

lol

all the images have the same url so i just have to create a var in javascript with the url and then just put the thing = to the var

thats why i turn it a lot smaller......

**phpman** · Oct 10th, 2003, 09:46 PM

LOL..... no, you didn't answer my question. are they on your server? and no you didn't make it smaller, I already proved that.

**CornedBee** · Oct 12th, 2003, 08:32 AM

There's another problem: you loose all benefits you might gain from parallel downloading. All images are forced to load AFTER the main page, which means that the browser must wait until all HTML, stylesheets, external JavaScripts, images you don't load via JS, objects etc. are loaded before it can download the images.

**CornedBee** · Oct 12th, 2003, 08:33 AM

Why do all the images have the same URL anyway? Are those spacer gifs *stern look*.

Bad boy, go and learn CSS

**PT Exorcist** · Oct 12th, 2003, 08:52 AM

hmmmm what could i do with css? the thing is my page is a file lister page so in front of each file it has a file/folder image..u see?

**phpman** · Oct 12th, 2003, 10:49 AM

think you img in your sig is big enough

**PT Exorcist** · Oct 12th, 2003, 10:51 AM

actually there are sigs a lot bigger than mine in this forum but if i really have to change it i will

**CornedBee** · Oct 12th, 2003, 11:03 AM

You could get dir of spacer gifs if you have any.

And you can set the list bullet icon to an image, so you don't need all those <img> tags.

**PT Exorcist** · Oct 12th, 2003, 11:13 AM

good ideia! that seems to work like a charm!

**PT Exorcist** · Oct 12th, 2003, 11:19 AM

but how can i set to a whole table that every text in it to be with that bullet style? i dont want to have to put in each row a

Code:

<ul imagesrc="http://..............">
<li>text</li>

**phpman** · Oct 12th, 2003, 11:19 AM

you could also use css to put the path to the image and just call a class to all 100 list items. and then you only use 1 url.

**phpman** · Oct 12th, 2003, 11:29 AM

in between your head tags or in an external file (preferred way) add this

ul { list-style-image: url("http://site.com/file.jpg") }

then in the body

<ul>
<li>text</li>
</ul>

that is all.

**PT Exorcist** · Oct 12th, 2003, 11:33 AM

hmmmm i am not very good with html..how do i do that?
i tried putting:

Code:

<script>
ul { list-style-image: url("http://site.com/file.jpg") }
</script>

and then

Code:

<ul>
<li>text</li>
</ul>

but that doesnt seem to work

**phpman** · Oct 12th, 2003, 12:15 PM

that is because it is a style not a script.

<style type="text/css">
ul { list-style-image: url("http://site.com/file.jpg") }
</style>

**PT Exorcist** · Oct 12th, 2003, 12:17 PM

hmmmmm it was a typo, in the html page i typed style and not script..what u just typed doesnt work :S

**phpman** · Oct 12th, 2003, 12:33 PM

did you change the url to match yours?

**PT Exorcist** · Oct 12th, 2003, 01:05 PM

ah as with that "wrong" url it showed the normal bullets i though it wouldnt work even with my pic

tks!

**PT Exorcist** · Oct 12th, 2003, 01:12 PM

one more thing,
it seems like the tables ignore that formatting, how do i put so they obey to it?

**phpman** · Oct 12th, 2003, 01:22 PM

what tables ignore what formatting?

seems like you need to read up on css

go here and enjoy

http://www.w3.org/TR/REC-CSS2/

**PT Exorcist** · Oct 12th, 2003, 01:31 PM

hmm the thing its known as a table "feature"(read it as bug) that if u apply some kind of style to the body of a page it wont affect the table, so how to do it?

**phpman** · Oct 12th, 2003, 01:50 PM

Originally posted by PT Exorcist
hmm the thing its known as a table "feature"(read it as bug) that if u apply some kind of style to the body of a page it wont affect the table, so how to do it?

what?? I have no idea what you are talking about. you are not applying a style to the page but to a list. it has nothing to do with a table.

can you show us what you are talking about?

**PT Exorcist** · Oct 12th, 2003, 02:07 PM

edit: never mind..did it!

tks a lot!

Thread: creating var in javascript and then access in html code

Thread Tools

Display

creating var in javascript and then access in html code

Well ...

Posting Permissions