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

    Help for simple change on click

    I suck at javascript.
    All I wanted to do is this:

    I have a jpg. When I click that image I want it to change to a different jpg for 1 second and play a sound. After the click I want everything to turn back to normal.

    This should be really easy right?

  • #2
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by danishviking View Post
    This should be really easy right?
    Yes it is.

    Try this:

    Code:
    <script type="text/javascript">
    imgs=Array("img1.jpg","pic2.jpg","another.jpg","whee.gif","whatever.png");
    var x=0;
    
    function change() {
    document.getElementById("bob").src=imgs[++x];
    
    if (x==5) {
    x=-1;
    }
    }
    </script>
    
    <img src="img1.jpg" id="bob" alt="" onmousedown="change()">
    ^This will change the picture into another picture (as in Image "img1.jpg" will change to image "pic2.jpg" and so on.)
    Last edited by optimizer123; 11-01-2012 at 03:27 PM.

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by optimizer123 View Post
    Yes it is.

    Try this:

    Code:
    <script type="text/javascript">
    imgs=Array("img1.jpg","pic2.jpg","another.jpg","whee.gif","whatever.png");
    var x=0;
    
    function change() {
    document.getElementById("bob").src=imgs[++x];
    
    if (x==5) {
    x=-1;
    }
    }
    </script>
    
    <img src="img1.jpg" id="bob" alt="" onmousedown="change()">
    ^This will change the picture into another picture (as in Image "img1.jpg" will change to image "pic2.jpg" and so on.)
    Hey Optimizer
    Thanks for getting back so quickly.
    Does the above script turn From jpg1 to jpg 2 on click and then back to jpg 1 after the click? Also does it play a sound on click?
    Thanks for taking time to help me out, much appreciated

  • #4
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by danishviking View Post
    Does the above script turn From jpg1 to jpg 2 on click and then back to jpg 1 after the click? Also does it play a sound on click?
    Code:
    imgs=Array("img1.jpg","pic2.jpg","another.jpg","whee.gif","whatever.png");
    ^ this shows you that when you click on the image it will change to pic2.jpg.. when you click on that picture it will change to another.jpg.. if you only want 2 pictures you should do it like this:

    Code:
    imgs=Array("img1.jpg","pic2.jpg");
    Do you want it to be that when you hover your mouse over the image it plays a sound? or when you click on it?

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I only have 2 images.

    Let's say the image is of a bird (jpg1).
    When I click on the bird the beak opens (ie. jpg 2) and a small tweet sound comes out. Only on the click. When I release the click everything goes back to normal ie. jpg 1

    Does that make sense? Im terrible at explaining
    Last edited by danishviking; 11-01-2012 at 04:34 PM.


  •  

    Posting Permissions

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