Get img src by getElementById and applying it throughout

JavaScript
1

hi guys,

My first post yes. Thanks for all the nice posts and threads in this forum - great stuff.

Now, here’s my question:

First off, the url : http://catfish.businesscatalyst.com/bcimg.htm

When you get there an alert of the div/img name in question appears. It splits and grabs the ‘name’ from images/name.jpg.

If you look at the source, this value is set to var = bb.

My problem now is to apply this throughout this little script(s). What I want to do is take this var ‘bb’, and concatenate a ‘_back’ to it so its something like ‘name_back.jpg’. You see something similar in the script source ( toggleDisplay() function).

What this does is swap the ‘view back’/‘view front’ image of a swimsuit, and i want it to grab ‘preloaded’ image (by a CMS) hence the var bb, then be able to pull the name_back.jpg image when you swap it in the script.

For some reason when I replace toggleDisplay(‘look_in_source_for_name_here’) with ‘bb’, it doesn’t work. I’m pretty terrible with JS.

I’d much appreciate the help - thanks for taking the time to read this.

Cheers

Mike

2

Some changes ypu ned in your script:

  1. imgDir you declared in javascript can’t be used later to toggle so use hidden element in html.

  2. call findImgPath() from within toggleDisplay() function to get current name of image displayed.

  3. Further if u want make it more flexible or reuasble pass div id to toggleDisplay() function and from that to findImgPath() function to dynamically retrieving image name.


<body onload="javascript: toggleDisplay();">

<script language="javascript">
function findImgPath(){
	var bgImg = document.getElementById('product_normal').getElementsByTagName('img')[0].src;
	
	var a = bgImg.split("/");
	var a_length = a.length-1;
	var aa = a[a_length];

	var b = aa.split(".");
	var b_length = b.length;
	var bb = b[0];
	
	var c = bb.split("_back");  // when _back is included in file name
	var c_length = c.length;
	var cc = c[0];
	return cc;
}

function toggleDisplay(){
<!--
	var imgDir = document.getElementById('imgDir').value;
	var src1=findImgPath();
	var element = document.getElementById('product_normal').style;
	var bcImg = document.getElementById('product_normal').getElementsByTagName('img')[0].src;

		if (element.display=='none') {
			element.display='block';
			} else {
				element.display='block';
					}
 if (imgDir=='front')
 	{
		document.getElementById('swapImg').src='bcimg_files/view_back.gif';
		document.getElementById('imgDir').value='back';
		document.getElementById('product_normal').innerHTML = "<a href=\\"bcimg_files/"+src1+".jpg\\" target=\\"_blank\\"><img src=\\"bcimg_files/"+src1+".jpg\\" border=\\"0\\"></a>";
			}
 else {
		document.getElementById('swapImg').src='bcimg_files/view_front.gif';
		document.getElementById('imgDir').value='front';
		document.getElementById('product_normal').innerHTML = "<a href=\\"bcimg_files/"+src1+"_back.jpg\\" target=\\"_blank\\"><img src=\\"bcimg_files/"+src1+"_back.jpg\\" border=\\"0\\"></a>";
		}
	}
	
//->
</script>
<input type="hidden" id="imgDir" value="front" />
<a href="javascript:toggleDisplay();"><img src="bcimg_files/view_back.gif" id="swapImg" border="0"></a>
<div style="display: block;" id="product_normal"><a href="bcimg_files/cf_single_blue_med.jpg" target="_blank"><img src="bcimg_files/cf_single_blue_med.jpg" border="0"></a></div>
</body>
3

You are a champion ashishmat1979!

It was the 3rd split that was stuffing me up and other bits and pieces like the hidden element with the imgDir front set.

Thanks heaps for that, you’ve saved me ALOT of time as you can tell by my coding, i’m pretty new at this. You probably took 5 seconds to see what was wrong where as I spent the whole day!

I think now that this part is solved, I can do things like having the ‘image_back’ preload, etc.

Thanks again ashishmat1979 - I really appreciate this. I’ll post my final script when its done.

Cheers

Mike