Results 1 to 5 of 5

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

  1. #1
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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 -
    Code:
    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?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,939
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    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:

    HTML Code:
    <div><img id="displayImage" src="blank.gif"></div>
    You could have a button:

    HTML Code:
    <input type="button" id="neat_picture" onclick="idisplay(this);">
    Say the path to your images is /images/show_2/ and they are all .jpg:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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';
    }

  5. #5
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •