CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Keiron Lowe
Keiron Lowe

Reputation: 63

Increase size of image of click

Its pretty simple to see what I mean if you look at the image, which I also need to shrink back if you click it again, it needs to be animated as well:

The image link http://www.keironlowecreative.x10hosting.com/Help.png

Upvotes: 1

Views: 1105

Answers (3)

Steve Brewer
Steve Brewer

Reputation: 2100

Excuse the inline styles... Pixels aren't exact. Use the same image twice, one div on top of the other:

<div id="wrapper" style="position:relative; height:20px;">
  <div id="top" style="background:url(...) top left no-repeat; position:absolute; height: 20px; width:18px; top:0; left:0; z-index:2;"></div>
  <div id="under" style="background:url(...) top right no-repeat; position:absolute; height:20px; width:20px; top:0; left:2px; z-index:1;"></div>
</div>

So the top div is showing the plus and the left corner. The bottom div is showing the right corner - over two pixels so it's not showing under the corners of the top element. If the image is opaque, this doesn't matter...

Animate the width of the under div to get the effect. No fading, only one image. Should be small and quick to animate.

Upvotes: 0

zalew
zalew

Reputation: 10311

jquery

$(document).ready(function(){        
   $("#what > img").click(function () {
      $("img").toggle("slow");
   });    
});

html

<div id="what">
  <img src="small_img" />
  <img src="big_img" style="display: none" />
</div>

toggle

Upvotes: 1

Zed
Zed

Reputation: 57658

You could use one of the horizontal accordion plugins for this.

Upvotes: 0

Related Questions