SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: expanding image

  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,618
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    expanding image

    I have a question and I think javascript is the way to go...
    So here's what im thinking.
    I have an image of half a quys face. When the mouse goes over it, the image should expand to reveal the whole face, when the image is clicked, it will act jst like a link.
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Make the image a background image of a div. Set the div width to half the width of the image. On mouseover expand the div to the full width of the image. Use an onclick handler for your link to the other url. The background image should be positioned to (0,0) with no-repeat.

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I have put together a basic script that demonstrates this technique. At the moment it expands on mouseover and contracts on mouseout. If you want it to stay open you will need to adjust it accordingly. I have atttached the image so that you can build it and play around with the code. Clicking on the image fires an alert(), but this can be a location.href call to another page if you need it.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Background Image Click</title>
    <script type="text/javascript">
    <!--
     function init()
      { var theDiv=document.getElementById("wrap");
        theDiv.onmouseover=function(){ this.style.width="300px"; }
        theDiv.onmouseout= function(){ this.style.width="150px"; }
      }
    // -------  
     window.onload=init; 
    //-->
    </script>
    <style type="text/css">
    <!--
    #wrap { 
      width:150px;
      height:278px;
      margin:100px 0px 0px 100px; 
      background-image:url('numbers.jpg');
      background-position:0 0;
      overflow:hidden;
      clip:auto;
      cursor:pointer;
      border:1px solid #000; 
     }
    -->
    </style>
    </head>
     
    <body>
     
    <div id="wrap" onclick="alert('Clicked')">
    </div>
    <!-- end wrap -->
     
    </body>
     
    </html>
    Attached Images Attached Images

  4. #4
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,618
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    thanks, it works great.
    http://www.ontheocean.us/urturt.html
    the only thing is how do I make it so when the image/div expands, it does at a slower pace so you can see the expanding?
    Thanks.
    "Oh, and Jenkins--apparently your mother died this morning."

  5. #5
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,618
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    in that above link, how do I make the other (bottom) image start at (background-position: 300px 0) and expand toward the left?
    Thanks again...
    "Oh, and Jenkins--apparently your mother died this morning."

  6. #6
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,618
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Actually know that I've read up a bit, setInterval() and setTimeout() are not needed.
    ??Thanks anyway
    "Oh, and Jenkins--apparently your mother died this morning."

  7. #7
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,618
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I modified the page a bit to include 2 images,
    http://www.ontheocean.us/urturt.html
    How do I make the 2nd image (girl) expand to the left, so it overlaps the other image (lion) and how do I make the image (lion) overlap the image to the right (girl)
    "Oh, and Jenkins--apparently your mother died this morning."


Bookmarks

Posting Permissions

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