Grab img src value, then do lots of stuff!

mhd · #1 05-21-2007, 10:04 PM

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

mhd · #2 05-22-2007, 12:29 AM

Thought i'd paste in the code - thanks.

Code:

<BODY>
<script language="javascript">

	//preset toggleDisplay()
	imgDir='front';

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];

	//alert(bgImg); //full bgImg string
	//alert(a); //elements in array of bgImg string
	//alert(aa); //full image name
	alert(bb); //image name without filetype
}

function toggleDisplay(src){
<!--
	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='images/view_back.gif';imgDir='back';
		document.getElementById('product_normal').innerHTML = "<a href=\"images/womens/sale/large/"+src+".jpg\" target=\"_blank\"><img src=\"images/womens/sale/"+src+".jpg\" border=\"0\"></a>";
			} else {
				document.getElementById('swapImg').src='images/view_front.gif';imgDir='front';
				document.getElementById('product_normal').innerHTML = "<a href=\"images/womens/sale/large/"+src+"_back.jpg\" target=\"_blank\"><img src=\"images/womens/sale/"+src+"_back.jpg\" border=\"0\"></a>";
				}
	}
//->
</script>
</head>
<body onLoad="javascript: findImgPath(); toggleDisplay('cf_single_blue_med');">

  <a href="javascript:toggleDisplay('cf_single_blue_med');"><img src="images/view_back.gif" border="0" id="swapImg"/></a>

<div style="display:block;" id="product_normal"><img src="images/womens/sale/cf_single_blue_med.jpg" border="0"></div>

</body>

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)