Can an image URL be created using split and join on button click and then displayed?

[jamesshall]

I have about 60 images that I would like to display along some discriptive text.
My goal is set up some sort of controller (a set of buttons or links or whatever) for each image.
Each would then have an ID that would be their filename, but NOT the entire URL that most galleries have. It would be the filename only - not even the .jpg at the end!

I ran across some code and maodified it a little to get thus far -

function image(path)
{
  var paths = path.split('/');
  paths[paths.length-1] = 'IMAGENAME'+paths[paths.length-1];
  return paths.join('/');
}

document.write(image('http://www.site/imagefolder/.jpg'));

All it does is displays http://www.site/imagefolder/IMAGENAME.jpg on the screen
It looked promising, although I'm not sure if it will be able to do what I need.

I'm now stuck with two problems.
1 - When I click on the button, how do I pass the id or name from the button and have it in place of IMAGENAME?
2 - How to I display the image using this new url?


Anyone have some idea of how this can be done?

[jscheuer1]

A little new to javascript? Anyways, you cannot document.write once the page is loaded without overwriting the page, wiping out everything else. I'm not sure what part an array needs to take in this either, though that part seems workable, just that I think it can be accomplished with strings, and that there is no real advantage in using an array(s). I'm not even certain I 100% understand what you want, but I'm pretty sure I get most of it.

You say you have links or buttons with id's that represent the image's filename minus both the path and extension. If all images are in the same folder and all have the same extension, strings will suffice for adding that information. You can setup a container with an image in it, the src attribute can be either a blank image or one that you would like loaded when the page first loads, ex:

<div><img id="displayImage" src="blank.gif"></div>

You could have a button:

<input type="button" id="neat_picture" onclick="idisplay(this);">

Say the path to your images is /images/show_2/ and they are all .jpg:

function idisplay(el){
document.getElementById('displayImage').src='/images/show_2/'+el.id+'.jpg';
}

That will load:

/images/show_2/neat_picture.jpg

into the id="displayImage'" img tag. You can have as many of those buttons as you like, each with a different id corresponding to a different image.

The main problem with this is that it is inaccessible to folks without javascript enabled. You cannot make it accessible to those folks without one of the following:

1. Server side code
2. A link that contains the full path to the image as its href.

[jamesshall]

You are right - I have not been scripting for much time at all!
I have taken some programming courses for other languages a while back so I can sort of read and understand a lot of the Java code, but I'm still pretty clueless on costucting my own stuff.

I'm not really interested in having the world use this code at the moment. My wife recently started a small eBay business and I am trying to set up a simple way to sort through images and have pertanant infomation come up as well. None of the java gallerys I found on the web handled this very well - all seemed overly complicated and required full URLs for every image (unless PHP was used). The HTML bloated up fast and didn't seem very friendly to make updates.

Thanks for the code BTW - it does EXACTLY what I was looking for!

Ttoday I going to hack around with it some more and see if I can somehow get the button click to execute another JAVA function to maybe use innerHTML to change the description text for the images.

[jamesshall]

OK - So the plot thickens.

The button currently code looks like
<input type="button" id="10002-1" value="10002-1" onclick="idisplay(this);">

I figured how it would be even slicker to get rid of the button id and just have the script use the button value.
The Java code uses getElementById and unfortunately there isn't such thing as getElementByValue

I modified a little bit of code that can grab the value and returns it in a form
HEAD CODE
<script type="text/javascript">
function check(buttonvalue)
{
document.getElementById("answer").value=buttonvalue;
}
</script>

BODY CODE
<input type="button" value="10002" onclick="check(this.value)"><br />
<input type="button" value="10003" onclick="check(this.value)"><br />
<br />
<form>
<input type="text" id="answer" size="20">
</form>


Is is possible to pass the value from that 'check' function to use it where 'el.id ' is?
function idisplay(el){
document.getElementById('DispImg').src='http://ImageURL/'+el.id+'.jpg';
}

[jamesshall]

Blaaah... figured out how to get the effect I wanted

function check(buttonvalue)
{
document.getElementById("answer").value=buttonvalue;
document.getElementById('DispImg').src='http://ImageURL/'+buttonvalue+'.jpg';
}

I tried keeping the functions seperate and just replacing the el.id with check.buttonvalue, but that didn't work. I tried just check, but that put the entire function into the URL.

I'd still like to know how to pass the information between seperate functions though.