JavaScript [RESOLVED] Flip a picture
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 4 of 4

Thread: [RESOLVED] Flip a picture

  1. #1
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,090

    [RESOLVED] Flip a picture

    OK, the title is a tad misleading.

    I have this script :

    Main.js
    PHP Code:
    // wave sub objects
    function WSubObj(numimgobjectiwidthiheight){
        
    this.num;
        var 
    document.createElement("span");
        
    o.style.overflow "hidden";
        
    o.style.width iwidth "px";
        
    o.style.height iheight "px";
        
    o.style.top = (num-1) + "px";
        var 
    oI document.createElement("img");
        
    oI.src img.src;
        
    oI.style.left "0px";
        
    oI.style.top = (-iheight num) + "px";
        
    oI.style.width iwidth "px";
        
    oI.style.height iheight "px";
        
    o.appendChild(oI);
        
    document.getElementById("wave_zone").appendChild(o);
        
    this.spa o.style;
        
    this.ddx 0
        this
    .PX  0
        this
    .x   0
        
    if (num 0this.prev object[num 1];
    }

    WSubObj.prototype.main = function(power){
        var 
    x0 = (this.== 0) ? Math.random() * power this.prev.x;
        
    this.this.PX += (this.ddx += ( (x0 this.PX this.ddx) * ) / 2.8) / 1.4;
        
    this.spa.left Math.round(this.x) + "px";
    }

    // wave effect object
    var weff = {
        
    // variables
        
    power 2.2,

        
    // inner variables
        
    object : new Array(),
        
    simg null,
        
    iwidth  0,
        
    iheight  0,

        
    // initialization function
        
    init : function() {
            for (var 
    0this.iheighti++)
                
    this.object[i] = new WSubObj(ithis.simgthis.objectthis.iwidththis.iheight);
        },

        
    // main loop function of water effect
        
    run : function() {
            var 
    0o;
            while (
    weff.object[i++]) o.main(weff.power);
            
    setTimeout(weff.run100);
        }
    };

    // on page load
    window.onload = function() {
        
    weff.simg document.getElementById("source_img");
        
    weff.iwidth weff.simg.width;
        
    weff.iheight weff.simg.height;

        
    // set necessary width and height for wave zone element
        
    var css document.getElementById("wave_zone").style;
        
    css.height weff.iheight "px"//(weff.iheight/4 - 1) + "px";
        
    css.width  weff.iwidth "px";

        
    weff.init();
        
    weff.run();

    With this CSS file :

    Main.css
    PHP Code:
    #main_object {
        
    positionrelative;
    }
    #main_object img {
        
    displayblock;
    }
    #main_object #wave_zone img {
        
    position:absolute;
        
    left:-9999px;
    }
    #main_object span {
        
    position:absolute;
        
    font-size:0px;
    }
    #main_object #wave_zone {
        
    position:relative;
        
    display:block;
        
    overflow:hidden;
        
    background-color:#000;

    Together they give a nice watery, wavy effect for one of my pictures. Problem is: The picture got flipped upside down. I have tried to play around with the script to see if I can identify the flipping part. I am unable to.

    Can anyone help identify the part where the picture gets flipped upside down?

  2. #2
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,860

    Re: Flip a picture

    What does the HTML look like to match it? I would guess something like the following...but what is main_object?

    Code:
    <span id="wave_zone">
      <img src="http://www.google.com/logos/2012/bram-stoker-2012-hp.jpg" id="source_img" alt="" />
    </span>
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  3. #3
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,090

    Re: Flip a picture

    Yes, that is basically it. I just have some CSS inside as well as call to a JS function :

    Code:
            <div id="main_object" align="center">
               	<img id="source_img" border="0" src="images/cornerblock.png" width="288" height="172" style="position:absolute; top:-626;left:370;overflow:hidden" showOnTop(this); >
                <div id="wave_zone" style="position:absolute; top:-626;left:370;overflow:hidden;background-color: transparent" 
       onmouseover="showOnTop(this)"></div>
            </div>

  4. #4
    Join Date
    Jul 2001
    Location
    Sunny South Africa
    Posts
    11,090

    Re: Flip a picture

    Ah, I fixed it. I edited my Main.CSS file to include the CSS Transformations, like this :

    PHP Code:
    #main_object #wave_zone {
        
    position:relative;
        
    display:block;
        
    overflow:hidden;
        
    background-color:#000;
        
    -moz-transformscaleY(-1);
        -
    webkit-transformscaleY(-1);
        -
    o-transformscaleY(-1);
        
    transformscaleY(-1);
        -
    ms-filterflipv/*IE*/
        
    filterflipv/*IE*/

    Thanx for your help anyways!

Posting Permissions

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


Azure Activities Information Page

Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center