CodingForums.com - can you have a image url with variables

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - can you have a image url with variables (http://www.codingforums.com/showthread.php?t=286907)

can you have a image url with variables

hello, my ultimate goal is to have this display a 8x8 grid of images (google map images)that will update based on a variable.i wanted to be able to change stuff such as zoom, starting location, styles, ect and then run it. atm i just have the single image to figure it out as i have minimal knowledge with scripting and am trying to figure it out.
this is the code i have so far.

Code:

<!DOCTYPE html>



<html>



<body>





<script>





var vzoom=15

var vsize="640x640"

var vmaptype="roadmap"





        var x1=51.363244, y1=4.847011;

        var x2=x1-10, y2=y1-10;







document.write(x1);

document.write("<p></p>");

document.write(x2);

document.write("<p></p>");

//these were for visual aid that the variables were working







//this image is the unedited link that works

document.write('<a href="http://maps.googleapis.com/maps/api/staticmap?center=52.37907,4.844264&zoom=13&format=png&sensor=false&size=640x480&maptype=roadmap&style=element:labels|visibility:off&style=feature:transit|visibility:off&style=feature:landscape|visibility:off&style=feature:administrative|visibility:off&style=feature:poi|visibility:off&style=feature:road|color:0x808080"><img src="http://maps.googleapis.com/maps/api/staticmap?center=52.37907,4.844264&zoom=13&format=png&sensor=false&size=640x480&maptype=roadmap&style=element:labels|visibility:off&style=feature:transit|visibility:off&style=feature:landscape|visibility:off&style=feature:administrative|visibility:off&style=feature:poi|visibility:off&style=feature:road|color:0x808080" border="0"> </a>')



//this is the edited link with variables that wont load properly(properties are blank from the first variable on)

document.write('<a href="http://maps.googleapis.com/maps/api/staticmap?center="x1","y1"&zoom="vzoom"&format=png&sensor=false&size="vsize"&maptype="vmaptype"&style=element:labels|visibility:off&style=feature:transit|visibility:off&style=feature:landscape|visibility:off&style=feature:administrative|visibility:off&style=feature:poi|visibility:off&style=feature:road|color:0x808080"><img src="http://maps.googleapis.com/maps/api/staticmap?center="x1","y1"&zoom="vzoom"&format=png&sensor=false&size="vsize"&maptype="vmaptype"&style=element:labels|visibility:off&style=feature:transit|visibility:off&style=feature:landscape|visibility:off&style=feature:administrative|visibility:off&style=feature:poi|visibility:off&style=feature:road|color:0x808080" border="0"> </a>')



//this is another edited version that wont load(properties show the edited text) 

document.write('<a href="http://maps.googleapis.com/maps/api/staticmap?center=x1,y1&zoom=vzoom&format=png&sensor=false&size=vsize&maptype=vmaptype&style=element:labels|visibility:off&style=feature:transit|visibility:off&style=feature:landscape|visibility:off&style=feature:administrative|visibility:off&style=feature:poi|visibility:off&style=feature:road|color:0x808080"><img src="http://maps.googleapis.com/maps/api/staticmap?center=x1,y1&zoom=vzoom&format=png&sensor=false&size=vsize&maptype=vmaptype&style=element:labels|visibility:off&style=feature:transit|visibility:off&style=feature:landscape|visibility:off&style=feature:administrative|visibility:off&style=feature:poi|visibility:off&style=feature:road|color:0x808080" border="0"> </a>')





</script>

ive been trying to get the variables working. but im new and i dont know what to do.
ive searched for hours and am tired of it. im sure someone will be able to solve this. i plan on using this to create multiple masks of the same area. thanks for any help in advance.

Well there are much more elegant ways of doing it, but this is one simple method that works. (Just tested it.)

Code:

var x1=51.363244, y1=4.847011;



myText1 = '<a href="http://maps.googleapis.com/maps/api/staticmap?center=';

myText2 = '&zoom="vzoom"&format=png&sensor=false&size="vsize"&maptype="vmaptype"&style=element:labels|visibility:off&style=feature:transit|visibility:off&style=feature:landscape|visibility:off&style=feature:administrative|visibility:off&style=feature:poi|visibility:off&style=feature:road|color:0x808080"><img src="http://maps.googleapis.com/maps/api/staticmap?center=';

myText3 = '&zoom="vzoom"&format=png&sensor=false&size="vsize"&maptype="vmaptype"&style=element:labels|visibility:off&style=feature:transit|visibility:off&style=feature:landscape|visibility:off&style=feature:administrative|visibility:off&style=feature:poi|visibility:off&style=feature:road|color:0x808080" border="0"> </a>';



myCode = myText1 + x1 + ',' + y1 + myText2 + x1 + ',' + y1 + myText3;

document.write(myCode);

im going to elaborate incase i wasnt clear on what im trying to acomplish
just open

Quote:

http://maps.googleapis.com/maps/api/...aptype=roadmap

and try changing the center=x,y and press enter. a different map will apear. so basically i wanted to have a html doc that will open and have the center x,y ect, as a variable that you could change before loading it. im new to scripting and javascript seemed like a logical way to introduce variables to html doc. but i have no idea if everything im doing is completely wrong or if my code is just written incorrectly.

Well, just for starters, you need to stop using document.write(). document.write() ceased being NEEDED when Netscape 4 replaced Netscape 3 and became even less helpful once MSIE 5 arrived. Say about 13 years ago.

And then:

Code:

<a id="maplink1"><img id="mapimg" style="border: none;"></a>

....

... 

<script type="text/javascript">

var link = document.getElementById("maplink");

var image = document.getElementById("mapimg");



var vzoom=15

var vsize="640x640"

var vmaptype="roadmap"

var x1=51.363244, y1=4.847011;

var x2=x1-10, y2=y1-10;



link.href = "http://maps.googleapis.com/maps/api/staticmap"

          + "?center=" + x1 + "," + y1

          + "&zoom=" + vzoom 

          + "&format=png"

          + "&sensor=false"

          + "&size=" + vsize 

          + "&maptype=" + vmaptype 

          + "&style=element:labels|visibility:off"

          + "&style=feature:transit|visibility:off"

          + "&style=feature:landscape|visibility:off"

          + "&style=feature:administrative|visibility:off"

          + "&style=feature:poi|visibility:off"

          + "&style=feature:road|color:0x808080";



image.src = "http://maps.googleapis.com/maps/api/staticmap"

          + "?center=" + x1 + "," + y1

          + "&zoom=" + vzoom

          + "&format=png"

          + "&sensor=false"

          + "&size=" + vsize

          + "&maptype=" + vmaptype

          + "&style=element:labels|visibility:off"

          + "&style=feature:transit|visibility:off"

          + "&style=feature:landscape|visibility:off"

          + "&style=feature:administrative|visibility:off"

          + "&style=feature:poi|visibility:off"

          + "&style=feature:road|color:0x808080";

And now that I did all that I realized the the href and src are identical, so...

Code:

<a id="maplink1"><img id="mapimg" style="border: none;"></a>

....

... 

<script type="text/javascript">

var link = document.getElementById("maplink");

var image = document.getElementById("mapimg");



var vzoom=15

var vsize="640x640"

var vmaptype="roadmap"

var x1=51.363244, y1=4.847011;

var x2=x1-10, y2=y1-10;



url = "http://maps.googleapis.com/maps/api/staticmap"

          + "?center=" + x1 + "," + y1

          + "&zoom=" + vzoom 

          + "&format=png"

          + "&sensor=false"

          + "&size=" + vsize 

          + "&maptype=" + vmaptype 

          + "&style=element:labels|visibility:off"

          + "&style=feature:transit|visibility:off"

          + "&style=feature:landscape|visibility:off"

          + "&style=feature:administrative|visibility:off"

          + "&style=feature:poi|visibility:off"

          + "&style=feature:road|color:0x808080";



link.href = url;

image.src = url;

What are x2 and y2 for??

i was going to have a grid of images not just one. and i wanted it to offset the image based on the position of the first image. not like css position but the actual map center position. so kinda like

image1=x1,y1 image2=x2,y1
image3-x1,y2 image4=x2,y2

Ahhh...got it.

Okay...so now you have the means to do so, and better than using document.write().

Can I ask what the point of the <a> is?

Since the URL is the same as that of the image, if the user clicks on it then it will just open that one image alone in the window, replacing the entire grid. Surely that's not what you are after??

you have been a huge help thank you so much. im new to scripting i didnt realize that is what <a> did. i was just reading online tutorials, that are apparently like 13 years old lol, trying to figure it out.