Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Help --- image hyerlink

    Ok so below is my code and I can not for the life of me remember how to use an image for they hyperlink instead of text... Can someone help me please!!!!

    This javascript is to an additional file upload and limits it to three... The hyerlink in reference is to remove the additional line.

    Thanks in advance.

    Code in particular is

    l.setAttribute("href", "javascript:removeFileInput('f"+upload_number+"');");l.className = 'remove-btn'; l.appendChild(document.createTextNode(' '))

    Entire code:

    <script type="text/javascript">
    var upload_number = 2; function addFileInput() { if(upload_number > 3) { alert('Sorry you can only upload 3 files'); exit(0); }



    var d = document.createElement("div"); var l = document.createElement("a"); var file = document.createElement("input"); file.setAttribute("type", "file"); file.setAttribute("name", "attachment"+upload_number); l.setAttribute("href", "javascript:removeFileInput('f"+upload_number+"');");l.className = 'remove-btn'; l.appendChild(document.createTextNode(' ')); d.setAttribute("id", "f"+upload_number); d.appendChild(file); d.appendChild(l); document.getElementById("moreUploads").appendChild(d); upload_number++; var i = document.createElement("IMG");
    i.setAttribute("src","pics/one.png");c.appendChild(i);}

    function removeFileInput(i) { var elm = document.getElementById(i); document.getElementById("moreUploads").removeChild(elm); upload_number = upload_number - 1; }// decrement the max file

    </script>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,799
    Thanks
    78
    Thanked 4,411 Times in 4,376 Posts
    The old-fashioned works in every browser way is to just wrap it with the <A> tag:

    <a href="..."><img ...></a>

    But nowadays, you could just do
    <img ... onclick="...">

    I'll let you translate that to your funky JS code.

    p.s.: Did you consider simply creating all three upload spots ahead of time and then just setting them to
    style="display: none;"
    until they are needed? Or turning one back to no display when it is cancelled?

    If you were using dynamic code to generate 137 of the things, doing it as you do would make eminent sense. But for only 3??

  • #3
    Regular Coder
    Join Date
    Aug 2008
    Location
    Northern Ireland
    Posts
    167
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by Old Pedant View Post
    But nowadays, you could just do
    <img ... onclick="...">
    This method is terrible for SEO and accessibility. I would suggest using <a><img /></a>.


  •  

    Posting Permissions

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