Skip to content

Instantly share code, notes, and snippets.

@mrobinson537

mrobinson537/box-shadow-hover-resize.js

Created November 5, 2013 20:46
Download ZIP

Revisions

  1. Matterful created this gist Nov 5, 2013.
    106 changes: 106 additions & 0 deletions box-shadow-hover-resize.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,106 @@
    <!DOCTYPE html>
    <head>
    <style>
    body {
    background:#e2e2e2;
    color:#1c1c1c;
    font-size:2em;
    }
    article {
    width:1200px;
    margin:0 auto;
    height:800px;
    padding:20px;
    background:#FAFAFA;
    }
    header {
    margin-bottom:50px;
    }

    </style>

    <title>Hello</title>

    </head>



    <body>
    <script>

    //this demonstrates what you can do in the case of an alert to produce a character turn


    //the line below gives us the screen width and height
    //document.write("Screen Height: " + screen.height + "<br /> Width:" + screen.width);

    //the line below gives us the screen width and height as well, using escape character
    //alert("Screen Height: " + screen.height + "\n Width:" + screen.width);


    //this gives us the location of the current page
    //alert(window.location);


    //the line below performs a redirect
    // window.location = "http://www.microsoft.com";


    //this changes the document title on the top tab
    //document.title = ("Here is the title.");


    //this deals with the first image

    function imageLarge()
    {
    var myimage = document.getElementById("picture").height="500";
    myimage = document.getElementById("picture").width="1200";
    myimage = document.getElementById("picture").border="1";


    }

    function imageSmall()
    {
    var myimage = document.getElementById("picture").height="300";
    myimage = document.getElementById("picture").width="1200";
    myimage = document.getElementById("picture").border="0";

    }

    //this deals with the second image

    function imageShadow()
    {
    var myimage = document.getElementById("picture2");
    myimage.style.boxShadow = "0 5px 10px black";

    }

    function imageNone()
    {
    var myimage = document.getElementById("picture2");
    myimage.style.boxShadow = "none";

    }



    </script>

    <article>
    <header>
    <img src="images/header-image3.png" id="picture" onclick="imageLarge()" onmouseout="imageSmall()">
    </header>



    <img src="images/header-image2.png" id="picture2" onmouseover="imageShadow()" onmouseout="imageNone()">


    </article>

    </body>

    </html>