How to do collapsed image with Jquery and CSS. Orkut.com implemented this concept while updating image scrap, the scrap shows image in collapsed style to reduce the webpage height. This is very simple script using mouseover, mouseout and css Jquery functions.
Download Script 
Live DemoJavascript Code
Contains javascipt and HTML code. $(".imagebox").mouseover(function(){}).mouseout(function{})- imagebox is the class name of div tag. $(".showlink").click(function(){}) - .showlink is the class name of show anchor tag. $(".hidelink").click(function(){}) - .hidelink is the class name of hide anchor tag. Using Jquery CSS function chaning the max-height:100px
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Image Area Mouseover and Mouseout
$(".imagebox").mouseover(function()
{
$(".showhide").show();
}).mouseout(function()
{
$(".showhide").hide();
});
//Show link
$(".showlink").click(function()
{
$(".imagebox").css('max-height','');
$(".showlink").hide();
$(".hidelink").show();
});
//Hide link
$(".hidelink").click(function()
{
$(".imagebox").css('max-height','100px');
$(".hidelink").hide();
$(".showlink").show();
});
});
</script>
//HTML code
<div class="imagebox" style="max-height:100px;">
<img src="image.jpg"/>
<div class="showhide" >
<a href="#" class="showlink">show</a>
<a href="#" class="hidelink">hide</a>
</div>
</div>
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Image Area Mouseover and Mouseout
$(".imagebox").mouseover(function()
{
$(".showhide").show();
}).mouseout(function()
{
$(".showhide").hide();
});
//Show link
$(".showlink").click(function()
{
$(".imagebox").css('max-height','');
$(".showlink").hide();
$(".hidelink").show();
});
//Hide link
$(".hidelink").click(function()
{
$(".imagebox").css('max-height','100px');
$(".hidelink").hide();
$(".showlink").show();
});
});
</script>
//HTML code
<div class="imagebox" style="max-height:100px;">
<img src="image.jpg"/>
<div class="showhide" >
<a href="#" class="showlink">show</a>
<a href="#" class="hidelink">hide</a>
</div>
</div>
CSS code
.imagebox
{
display:block;
position:relative;
overflow:hidden
}
.hidelink
{
display:none;
}
.showhide
{
padding:5px;
border-top:dashed 1px #333;
border-bottom:dashed 1px #333;
background:#F2f2f2 none repeat scroll 0 0;
bottom:0;
cursor:pointer;
display:block;
height:18px;
left:0;
line-height:18px;
padding-left:5px;
position:absolute;
width:100%;
}
{
display:block;
position:relative;
overflow:hidden
}
.hidelink
{
display:none;
}
.showhide
{
padding:5px;
border-top:dashed 1px #333;
border-bottom:dashed 1px #333;
background:#F2f2f2 none repeat scroll 0 0;
bottom:0;
cursor:pointer;
display:block;
height:18px;
left:0;
line-height:18px;
padding-left:5px;
position:absolute;
width:100%;
}
Once again very nice... :)
Hey Srinivas,
I am great follower of you, and now i have got stuck in a problem.
and i need your help, as everybody knows about your skill , you can help me.
i have a page where all the reporters names appears and what i want when anybody puts mouse on name,his whole profile appears in a div.
i hope ,u have got it.
my emailid-amansinha44@yahoo.co.in
@amansinha
Try with jquery tooltip plugin
Srivinas, your post really nice!
regards
very interesting concept...another good post from srinivas
so cool...
maybe its can be stylish if add
text-align:center;
on CSS side (.showhide) :P
good good
after doing the practice, it turns out good also add code ...
style="width:100%"
in writing HTML code "<img src="image.jpg"/>" to be
<img style="width:100%" src="image.jpg"/>
Hey ...Nice! Wonderful ! simple coding and very easy.Thanks for sharing so good knowledge.
this is amazing!
Thanks for this great lwsson .
How can I show the pictuer at first place with hide option available and so on .
Thanks
I mean how we can set it that by default when we open the page , the maximum size of the picture is shown and by clicking the hide link we can hide the picture .
plz let me know , I really need it .
Thanks
Rez, This problem are not solve. I am facing it. When i try to solve this problem. but next time it occurs. If you have any solution then please share with us.
thanks for the code. im thinking someway on how to use it.