SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Seattle
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing Image Information

    Javascript newbie.

    I have a slew of list items like the following:

    <li><a href="fax-coversheet.doc">Fax Coversheet</a><img
    alt="Word Document" src="../images/word.gif"
    class="filetype"></li>

    I'd like to automate the definition of the img information with a function that looks at the filetype of the href and uses it to write/rewrite the "src="../images/XXX" and alt="" html clauses at initial page rendering. For example, a "file.doc" href would get "word.gif" whereas a "file.xls" href would get "excel.gif"

    Is this kind of thing possible/advisable with javascript? and if so, 1) how do I get the href filename (I know how to get the "doc" portion from a string); and 2) how do I inject characters new characters into the html output?

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I cant try this at the moment but somthing like

    PHP Code:
    <html>
    <
    head>
    <
    script>

    function 
    SetImages(){
     
    Imgs=document.getElementsByTagName('BODY')[0].getElementsByTagName('IMG');
     for (
    i=0;i<Imgs.length;i++){
      if (
    Imgs[i].getAttribute('setimg')){
       
    Parent=Imgs[i].parentNode;
       
    AObj=Parent.firstChild
       Type
    =AObj.href.substring(AObj.href.lastIndexOf('.')+1,AObj.href.length)
       if (
    Type=='doc'){
        
    Imgs[i].src='http://www.vicsjavascripts.org.uk/StdImages/One.gif';
        
    Imgs[i].alt='Word Dodument';
       }
       if (
    Type=='xls'){
        
    Imgs[i].src='http://www.vicsjavascripts.org.uk/StdImages/Two.gif';
        
    Imgs[i].alt='Excel Document';
       }
      }
     }
    }
    </script>
    </head>

    <body onload="SetImages();" >
    <ul>
    <li>
    <a href="fax-coversheet.doc" >Fax Coversheet</a>
    <img setimg='yes' alt="Word Document" src="../images/word.gif"
    class="filetype">
    </li>
    <li>
    <a href="fax-coversheet.xls" >Fax Coversheet</a>
    <img setimg='yes' alt="Word Document" src="../images/word.gif"
    class="filetype">
    </li>

    </ul>

    </body>

    </html> 
    should work

    dont quite undestand 2) but will have another look tonight
    & will try the code I posted

    Edited to sortout the typos but it does work

    I used the setimg attibute in case there are more images on the page.
    Last edited by vwphillips; Dec 22, 2004 at 09:36.

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jbossert
    2) how do I inject characters new characters into the html output?
    If you mean how do you append data to the link url when it is called

    <a href="#'' onclick="javascript:Link('MyURL.htm');" >whatever</a>


    <script>
    MyDataVariable='whateveryouwant';
    function Link(lk){
    window.top.location=lk+'?'+MyDataVariable;
    }
    </script>

  4. #4
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Seattle
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Works with Firefox, not IE6

    Thanks for the response. The following works in Firefox:

    function setImages() {

    imgs = document.getElementsByTagName('BODY')[0].getElementsByTagName('IMG');
    for (i=0; i<imgs.length; i++) {
    if (imgs[i].getAttribute('dynImg')) {
    parent = imgs[i].parentNode;
    aobj = parent.firstChild;
    type = aobj.href.substring(aobj.href.lastIndexOf('.')+1, aobj.href.length);
    switch (type) {
    case 'doc':
    imgs[i].src = '/images/word.gif';
    imgs[i].alt = 'Word Document';
    break;
    case 'xls':
    imgs[i].src = '/images/excel.gif';
    imgs[i].alt = 'Excel Spreadsheet';
    break;
    case 'pdf':
    imgs[i].src = '/images/acrobat.gif';
    imgs[i].alt = 'Acrobat Document';
    break;
    case 'vsd':
    imgs[i].src = '/images/visio.gif';
    imgs[i].alt = 'Visio Document';
    break;
    default:
    break;
    }
    }
    }
    }

    but in IE6, it pukes at "parent = imgs[i].parentNode;". parentNode claims to be null (src is set to a pathname, so I'm pretty sure the DOM is getting setup.)

    Is there a need to handle this in a browser-specific fashion? Thanks for the help!

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tested this with IE6 and it worked for me but will have another look later

    edit

    tried the code I posed with IE5 and that works

    operating systems used ME-IE6 and
    Win2000 - IE5

  6. #6
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Seattle
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My stupidity.

    Had a typo - was referencing "dynimg" in the pages but using dynImg in the function. Thanks for the eyeballs.

    Was confused by the error thrown - "Error: not implemented" on the
    "parent = imgs[i].parentNode;" line. Add it to the lessons learned...

    Thanks for the help.


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
  •