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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rotate div layer 180 degrees?

    is there a way to have several div id layers, each with an image inside the div, and on select you choose which div layer you want, there is only one button which allows you to rotate the selected div to 180, also that same button allows you to rotate back to the original position.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,314
    Thanks
    203
    Thanked 2,565 Times in 2,543 Posts
    Simplest is to have two versions of each image, one at 180 degrees (or upside down), then switch between them when the button is clicked.

  • #3
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    how should i do the on select function. I just want 1 (180 degree button) that can change the selected div image.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,314
    Thanks
    203
    Thanked 2,565 Times in 2,543 Posts
    Try this:-
    Code:
    <div id = "div1">
    <img name = "img1" src = "myimage1.jpg"> 
    <br><br>
    <input type = "button" value = "Rotate this image" onclick = "rotate()">
    </div>
    
    <script type = "text/javascript">
    var tally = 0;
    function rotate() {
    if (tally == 0) {
    document.images["img1"].src= "myimage2.jpg";
    tally = 1;
    return true;
    }
    else {
    document.images["img1"].src= "myimage1.jpg";
    tally = 0;
    return true;
    }
    }
    </script>
    mymage2 is simply myimage1 rotated 180 degrees.


    Label on Sainsbury's peanuts -- "Warning: contains nuts."

  • #5
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that function works, but you have that one specific (rotate) button being applied to div1 img1.

    what i need is to show only 1 (rotate button) which can be applied to several images: div1, div2, div3, div4 with the option to choose and select which div layer they want to rotate.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,314
    Thanks
    203
    Thanked 2,565 Times in 2,543 Posts
    Here you are:-


    Code:
    <div id = "div1">
    <img name = "img1" src = "image1.jpg"> 
    </div>
    <div id = "div2">
    <img name = "img2" src = "image2.jpg"> 
    </div>
    <div id = "div3">
    <img name = "img1" src = "image3.jpg"> 
    </div>
    <div id = "div4">
    <img name = "img1" src = "image4.jpg"> 
    </div>
    <br><br>
    
    <form name = "myform">
    1<input type = "radio" name = "rad1" value = "1">
    2<input type = "radio" name = "rad1" value = "2">
    3<input type = "radio" name = "rad1" value = "3">
    4<input type = "radio" name = "rad1" value = "4">
    <input type = "button" value = "Click here to rotate the selected image" onclick = "rotate()">
    </form>
    
    <script type = "text/javascript">
    
    var flip1 = 0;
    var flip2 = 0;
    var flip3 = 0;
    var flip4 = 0;
      
    function rotate() {
    for (var i =0; i < document.myform.rad1.length; i++) {
    if (document.myform.rad1[i].checked) {
    var selected = document.myform.rad1[i].value;
    }
    alert ("You must select an image to rotate! ");
    return false;
    }
    
    var imagenum = "img" + selected;
    
    if (imagenum == 1) {  
    if (flip1 == 0) {
    document.images["img1"].src = "image1R.jpg";
    flip1 = 1
    return true;
    }
    else {
    document.images[imagenum].src = "image1.jpg";
    flip1 = 0;
    return true;
    }
    }
    
    if (imagenum == 2) {
    if (flip2 == 0) {
    document.images["img1"].src = "image2R.jpg";
    flip2 = 1;
    return true;
    }
    else {
    document.images[imagenum].src = "image2.jpg";
    flip2 = 0;
    return true;
    }
    }
    
    if (imagenum == 3) {
    if (flip3 == 0) {
    document.images["img1"].src = "image3R.jpg";
    flip3 = 1;
    return true;
    }
    else {
    document.images[imagenum].src = "image3.jpg";
    flip3 = 0;
    return true;
    }
    }
    
    if (imagenum == 4) {
    if (flip4 == 0) {
    document.images["img1"].src = "image4R.jpg";
    flip4 = 1;
    return true;
    }
    else {
    document.images[imagenum].src = "image4.jpg";
    flip4 = 0;
    return true;
    }
    }
    
    }
    
    </script>

    The images are image1.jpg etc. and the rotated images are image1R.jpg etc.
    Not too easy to see the point of it .......
    Last edited by Philip M; 06-16-2008 at 11:19 PM.

  • #7
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    close but not quite, no radio buttons.

    the user selects the div layer (which has an image in it). on click the blue outline will appear around the div layer (indicating that image is selected). because the image box is highlighted, the user can rotate it.

    if no image is selected, then there is nothing to rotate.


  •  

    LinkBacks (?)

    1. 08-25-2014, 11:16 AM

    Posting Permissions

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