Question

I want to display a rounded corner image on mouse over on a div.. The div content is dynamic.. So I need to increase the height of the image accordingly.. How to do this..? please help

Answer 1

If I understood correctly and you want to round a divs corners on mouse over you can do it like this.

Put 4 divs with the corner images as background.

css:

d1, d2, d3, d4

{

   position:absolute;
   display:none;

}

d1
{

   background-image:url('cornertop.extension');
   top:0px;
   left:0px;

}

etc. for all

html:

<div id="yourid" onmouseover="roundCorners();" onmouseout="deRoundCorners()">
content
</div>

javascript:

function roundCorners()
{

   document.getElementById('d1').style.display=block;
   document.getElementById('d2').style.display=block;
   document.getElementById('d3').style.display=block;
   document.getElementById('d4').style.display=block;

}

function deRoundCorners()
{

   document.getElementById('d1').style.display="none";
   document.getElementById('d2').style.display="none";
   document.getElementById('d3').style.display="none";
   document.getElementById('d4').style.display="none";

}

If I understood correctly that should do it… if not… give more details pls.