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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to toggle pictures with only javascript?

    I'm trying to do this with javascript instead of jquery. I want to click on a picture then the picture will have borders but if I click on it again then the border will be gone. don't have much idea how it's done anyone can give me a hand?


    Code:
    allImages = document.getElementsByTagName("img");
    
        for(i=0;i<allImages.length;i++)
    {
        allImages[i].onclick=function()
        {
        this.style.borderColor="red";
        this.style.borderStyle="solid";
        }
    }

  • #2
    Regular Coder
    Join Date
    Mar 2011
    Posts
    148
    Thanks
    0
    Thanked 20 Times in 20 Posts
    Hi
    Try this script:
    Code:
    <script type="text/javascript">
    allImages = document.getElementsByTagName("img");
    var border_s = 'solid';
    
    for(i=0;i<allImages.length;i++) {
      allImages[i].onclick=function() {
        if(this.style.borderStyle == border_s) this.style.border = 'none';
        else {
          this.style.borderColor = "red";
          this.style.borderStyle = border_s;
        }
      }
    }
    </script>


  •  

    Tags for this Thread

    Posting Permissions

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