Jcorousal with toggle effect on every div for every Image
Hi,
I have created simple jCarousal which displays images and the info about every image.
For every image there is the link. On click of this the respective div becomes visible to show more information about the image.But the div gets overlapped by its parent div , When 'More Info' link gets clicked. Thats why all the information in the div can not be seen.
Can some 1suggest about overflow and float properties of DIV and how it will be applicable to following code ,
<div class=" jcarousel-skin-tango"><div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;"><div class="jcarousel-clip jcarousel-clip-horizontal" style="overflow: hidden; position: relative;"><ul class="mycarousel jcarousel-list jcarousel-list-horizontal" id="" style="overflow: hidden; position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 1260px;">
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="1">
<div class="keyDtl">
<div class="dvImg"><img alt="Key contacts" src="images/pictures/Keycontacts/key_contact_01.jpg"></div>
<div class="dvDtl">
<div class="libHolder"><img height="24" width="16" alt="menu" src="images/icons/menu_tooltip_blue.gif"></div>
<div class="cntLink"><a href="">
More Info</a>
<div style="position: absolute; width: 100px; height: 200px; left: 0pt; background: none repeat scroll 0% 0% red; z-index: 999;">dsfdsfds</div>
</div>
</div>
</div>
</li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="2">
<div class="keyDtl">
<div class="dvImg"><img alt="Key contacts" src="images/pictures/Keycontacts/key_contact_02.jpg"></div>
<div class="dvDtl">
<div class="Holder"><img height="24" width="16" alt="menu" src="images/icons/menu_tooltip_blue.gif"></div>
<div class="cntLink"><a href="">Key cont name</a></div>
</div>
</div>
</li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="3">
<div class="keyDtl">
<div class="dvImg"><img alt="Key contacts" src="images/pictures/Keycontacts/key_contact_03.jpg"></div>
<div class="dvDtl">
<div class="Holder"><img height="24" width="16" alt="menu" src="images/icons/menu_tooltip_blue.gif"></div>
<div class="cntLink"><a href="">Key cont name</a></div>
</div>
</div>
</li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="4">
<div class="keyDtl">
<div class="dvImg"><img alt="Key contacts" src="images/pictures/Keycontacts/key_contact_04.jpg"></div>
<div class="dvDtl">
<div class="Holder"><img height="24" width="16" alt="menu" src="images/icons/menu_tooltip_blue.gif"></div>
<div class="cntLink"><a href="">Key cont name</a></div>
</div>
</div>
</li>
</ul></div><div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="true"></div><div class="jcarousel-next jcarousel-next-horizontal" style="display: block;" disabled="false"></div></div></div>