www.webdeveloper.com
Results 1 to 6 of 6

Thread: Update subfolder in scr

  1. #1
    Join Date
    Dec 2009
    Posts
    51

    Update subfolder in scr

    Hi everyone

    What is the best way to update a subfolder name using javascript?

    I have 3 buttons (this is a quick example)

    Code:
    <ul id="menu">
    <li>button1</li>
    <li>button2</li>
    <li>button3</li>
    </ul>
    
    <ul id="nav">
    <li><img src="images/subfolder/image.jpg" alt="image"/></li>
    <li><img src="images/subfolder/image2.jpg" alt="image2"/></li>
    <li><img src="images/subfolder/image3.jpg" alt="image3"/></li>
    </ul>
    If the user clicks button1 I want to update "subfolder" to "button1" like this:
    Code:
    <ul id="nav">
    <li><img src="images/button1/image.jpg" alt="image"/></li>
    <li><img src="images/button1/image2.jpg" alt="image2"/></li>
    <li><img src="images/button1/image3.jpg" alt="image3"/></li>
    </ul>
    and if the user clicks button1 I want to update "button1" to "button2":
    Code:
    <ul id="nav">
    <li><img src="images/button2/image.jpg" alt="image"/></li>
    <li><img src="images/button2/image2.jpg" alt="image2"/></li>
    <li><img src="images/button2/image3.jpg" alt="image3"/></li>
    </ul>
    .. and so on.

    So the subfolder name changes depending on what button was clicked.

    Can anyone help me?

    Many thanks

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670
    what you mean with 'update'?

  3. #3
    Join Date
    Dec 2009
    Posts
    51
    I want to replace "subfolder" depending on which button is clicked... (i.e button1, button2... etc)

    So

    <li><img src="images/subfolder/image.jpg" alt="image"/></li>
    <li><img src="images/subfolder/image2.jpg" alt="image2"/></li>
    <li><img src="images/subfolder/image3.jpg" alt="image3"/></li>

    Becomes

    <li><img src="images/button1/image.jpg" alt="image"/></li>
    <li><img src="images/button1/image2.jpg" alt="image2"/></li>
    <li><img src="images/button1/image3.jpg" alt="image3"/></li>

    if button 1 is clicked. So button1 is the new subfolder.

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670
    try this

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>123</title>
    <style type="text/css">
    body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;padding-top:150px;}
    </style>
    <script type="text/javascript">
    function doc(id){return document.getElementById(id);}
    
    function subf(obj){
    var txt=obj.innerHTML;
    var pics=doc('nav').getElementsByTagName('img');
    for(var i=0;i<pics.length;i++){
    var adr=pics[i].src;
    pics[i].src='images/' + txt + (adr.substring(adr.lastIndexOf('/'),adr.length));
    // for checking
    pics[i].onclick=function(){alert(this.src);}
    }
    }
    
    window.onload=function(){
    var lis=doc('menu').getElementsByTagName('li');
    for(var k=0;k<lis.length;k++){lis[k].onclick=function(){subf(this);}}
    }
    </script>
    </head>
    <body>
    <ul id="menu">
    <li>button1</li>
    <li>button2</li>
    <li>button3</li>
    </ul>
    
    <ul id="nav">
    <li><img src="images/subfolder/image.jpg" alt="image"/></li>
    <li><img src="images/subfolder/image2.jpg" alt="image2"/></li>
    <li><img src="images/subfolder/image3.jpg" alt="image3"/></li>
    </ul>
    </body>
    </html>

  5. #5
    Join Date
    Dec 2009
    Posts
    51
    Thanks so very much that works great!!1

    Many thanks Padonak

    Quote Originally Posted by Padonak View Post
    try this

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>123</title>
    <style type="text/css">
    body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;padding-top:150px;}
    </style>
    <script type="text/javascript">
    function doc(id){return document.getElementById(id);}
    
    function subf(obj){
    var txt=obj.innerHTML;
    var pics=doc('nav').getElementsByTagName('img');
    for(var i=0;i<pics.length;i++){
    var adr=pics[i].src;
    pics[i].src='images/' + txt + (adr.substring(adr.lastIndexOf('/'),adr.length));
    // for checking
    pics[i].onclick=function(){alert(this.src);}
    }
    }
    
    window.onload=function(){
    var lis=doc('menu').getElementsByTagName('li');
    for(var k=0;k<lis.length;k++){lis[k].onclick=function(){subf(this);}}
    }
    </script>
    </head>
    <body>
    <ul id="menu">
    <li>button1</li>
    <li>button2</li>
    <li>button3</li>
    </ul>
    
    <ul id="nav">
    <li><img src="images/subfolder/image.jpg" alt="image"/></li>
    <li><img src="images/subfolder/image2.jpg" alt="image2"/></li>
    <li><img src="images/subfolder/image3.jpg" alt="image3"/></li>
    </ul>
    </body>
    </html>

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670
    good to hear )

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles