1
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.
Expand|Select|Wrap|Line Numbers
- <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 src = 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
- //var src = bb;
- //alert("src = " + src);
- }
- function toggleDisplay(){
- <!--
- var element = document.getElementById('product_normal').style;
- 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>"; alert("front " + src);
- } 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>"; alert("back " + src);
- }
- }
- //->
- </script>
- </head>
- <body onLoad="javascript:findImgPath();">
- <a href="javascript:toggleDisplay();"><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>
I'd much appreciate the help - thanks for taking the time to read this.
Cheers
Mike
