ansaurus

Question

Increase size of image of click.

Answer 1

A:

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

Zed 2009-08-20 00:19:27

Answer 2

+1 A:

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

zalew 2009-08-20 00:22:19

This works kinda right except I need it to be animated and when I click it the logo image dissapears

Keiron Lowe 2009-08-20 00:32:17

by the way I dont mean I wont the logo to dissapear, I mean it does dissapear

Keiron Lowe 2009-08-20 00:33:42

the toggle("slow") should animate, look at the examples provided in the link. the first dissapears, the second appears, isn't it what the question was? small image toggles with big image.

zalew 2009-08-20 00:56:39

This is what happens, its different from what I explained before but still not working properlyhttp://www.keironlowecreative.x10hosting.com/

Keiron Lowe 2009-08-20 01:10:01

Oh and by the way, ive changed them from images to div's, with the images as the background image

Keiron Lowe 2009-08-20 01:17:02

The problem now is that I cant close it again and the way the 2 boxes kind of merge at the end of the animation

Keiron Lowe 2009-08-20 01:30:54

because you assigned the click action to one button instead to all img (or div if u want) objects in the container. replace img in my code with div and #what with #wrapper

zalew 2009-08-20 02:41:05

Both img in the code?Or #what > img or $("img")

Keiron Lowe 2009-08-20 09:01:09

I changed the images to square rectangles instead of rounded ones and it fixed the merging issue but is there a way to make it grow only right instead of down and right?

Keiron Lowe 2009-08-20 10:02:01

Answer 3

A:

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.

Steve Brewer 2009-08-20 05:29:01

I cant get this to work, i entered the styles into the css and it doesnt work.

Keiron Lowe 2009-08-20 08:55:37

ansaurus

tags:

views:

answers:

Increase size of image of click.

related questions