obtaining the relative path from image.src 1

[Billkamm]

I need to know how I can obtain the relative path when using .src with Javascript.

In this code target.src evaluates to "

http://localhost/images.collapse-gray.GIF"

which is no code for me to hardcode, because when I move it to the production server "localhost" won't work:

//Will toggle the image between collapsed and expanded
function ToggleCollExpImage( targetId ){
if (document.getElementById){
target = document.getElementById( targetId );
if (target.src == "./images/collapse-gray.GIF"){
target.src = "./images/expand-blue.GIF";
} else {
target.src = "./images/collapse-gray.GIF";
}
}
}

 

[Billkamm]

This is from view source in MSIE of my rendered web page:

<img src="./images/collapse-gray.GIF" id="imgDemographicsCollapseExpand" height="14" width="14" onclick="ToggleCollExpImage('imgDemographicsCollapseExpand');" />

 

[BillyRayPreachersSon]

Why not use "indexOf", instead? That way, you just search for the relative path and filename, rather than looking for an exact match:

if (target.src.indexOf('/images/collapse-gray.GIF') != -1) {
   // this will run if '/images/collapse-gray.GIF' appears anywhere in the image path + filename
} else {
   // this will run if it does not.
}

You might want to make sure you are using the correct case for your filenames, too. The indexOf method is case-sensitive, so make sure your GIF images do have an uppercase extension, or change your string to lowercase.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

OK... just for fun... here is another variation:

// define the names to give to each image
var collapseImage = 'collapse-gray.gif';
var expandImage = 'expand-blue.gif';

// define the path to the images
var pathToImages = '/images/';

// toggle the image between collapsed and expanded
function ToggleCollExpImage(targetId) {
  if (document.getElementById) {
    target = document.getElementById(targetId);
    if (target.src.indexOf(collapseImage) > -1) {
      target.src = pathToImages + expandImage;
    } else {
      target.src = pathToImages + collapseImage;
    }
  }
}

And if you truely wanted to have fun... you'd write it so it's hard for anyone else to be able to understand it (although to do that properly, you might not use such practical variable names)...

// toggle the image between collapsed and expanded
function ToggleCollExpImage(targetId) {
  if (document.getElementById) document.getElementById(targetId).src = pathToImages + (document.getElementById(targetId).src.indexOf(collapseImage) > -1) ? expandImage : collapseImage;
}

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094