SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Get img src by getElementById and applying it throughout

    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. #2
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    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.

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

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

        var 
    aa.split(".");
        var 
    b_length b.length;
        var 
    bb b[0];
        
        var 
    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> 
    PHP Functions Class/Php Stuff: php-classes-functions.blogspot.com
    SMS World: sms-treasure.blogspot.com
    Finance Business India: financebusinessindia.blogspot.com
    Retail Market India: retailmarketindia.blogspot.com

  3. #3
    SitePoint Member
    Join Date
    May 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


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
  •