It will be fun to collapse and expand images on your web pages just like Orkut.com. Believe me its very easy task with help of jQuery. You have to dirty your hands with a bit CSS, but thats tolerable. Lets see how does it look like…:)
The complete Code:
<html>
<head>
<title>WebSpeaks.in</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript">
$(function()
{
$('#scrap').mouseover(
function()
{
$('.link').show();
}
).mouseout(function()
{
$('.link').hide();
});
$("#show").click(
function()
{
$("#scrap").css('max-height','').show();
$(this).hide();
$("#hide").show();
}
);
$("#hide").click(
function()
{
$('#scrap').css('max-height','100px');
$(this).hide();
$("#show").show();
}
);
});
</script>
<style>
#body{background:#302929 none repeat scroll 0 0;}
#scrap{
width:500px;
padding:5px;
background:#fff none repeat scroll 0 0;
display:block;
position:relative;
overflow:hidden;
}
.link{
text-align:left;
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:none;
}
</style>
</head>
<body id='body'>
<div align='center'>
<div id='scrap' style="max-height:100px;">
<img src='4.gif' id='img'>
<div class="link" >
<a href="#" id="show">show</a>
<a href="#" id="hide" style="display:none;">hide</a>
</div>
</div>
<div>
</body>
</html>
Sir, Your all articles are really wonderful, keep it up. 🙂
Brilliant work sir, keep it up. 🙂