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... :)
ReplyDeleteHey Srinivas,
ReplyDeleteI 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 [email protected]
@amansinha
ReplyDeleteTry with jquery tooltip plugin
Srivinas, your post really nice!
ReplyDeleteregards
very interesting concept...another good post from srinivas
ReplyDeleteso cool...
ReplyDeletemaybe 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 ...
ReplyDeletestyle="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.
ReplyDeletethis is amazing!
ReplyDeleteThanks for this great lwsson .
ReplyDeleteHow 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 .
ReplyDeleteplz 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.
ReplyDeletethanks for the code. im thinking someway on how to use it.
ReplyDeleteThanks for this great lesson but why i can not download this project
ReplyDelete