Member Avatar for VenusCrystal

Hi,

I have a icon which on mouseover action i'm changing to another icon little bigger and with a tooltip. This icon is placed inside a table row before the text data. When mouseover happens it moves the text data to right and new icon is displayed. I dont want the text to move to right.

Can anyone help me with this?

Below is the code that i'm using:

    <html>
<head>

<style type="text/css">
#contextual-action-icon:hover
{
    position:relative;
    bottom:12px;
    left:-3px;  
}
</style>

<script type="text/javascript" src="/C:/Users/ng/Documents/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#contextual-action-icon').live('mouseover mouseout mousedown click', function(event){
    if(event.type == 'mouseover')
        $(this).attr('src','/C:/Users/ng/Documents/Unnamed Site 1/core/images/tables/ipop_ovr.png');
    if(event.type == 'mouseout')
        $(this).attr('src','/C:/Users/ng ![Snap51](/attachments/small/3/Snap51.png "align-right") /Documents/Unnamed Site 1/core/images/tables/ipopglyph_sm_qualifier.png');
  });
});
</script>
</head>
<body>
<table border="1">
    <tr>
        <td> 
        <img id='contextual-action-icon' align='top' src='/C:/Users/ng/Documents/Unnamed Site 1/core/images/tables/ipopglyph_sm_qualifier.png' title='More...'/>
        Hi
        </td>
    </tr>
</table>
</body>
</html>

I have attached screenshots of the output.

Thanks in Advance,
VenusCrystal

Snap5.png 4.57 KB Snap6.png 5.23 KB
  • 2 Contributors
  • 4 Replies
  • 136 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by VenusCrystal
Member Avatar for VenusCrystal

i need this immediately. can anyone help me ?

Member Avatar for Airshow

VC,

You need to provide space around the small version of the icon, into which the large version will fit.

This can be done by adjusting the margins in CSS:

#contextual-action-icon
{
    width: 50px;
    height: 30px;
    margin: 3px;
}
#contextual-action-icon:hover
{
    width: 56px;
    height: 36px;
    margin: 0;
}

You may need to adjust this to get exactly what you want. The rules are simple:

  • width + horizontal margins = k_width
  • height + vertical margins = k_height

where k_width and k_height are constants (56px and 30px respectively in the example).

Airshow

Member Avatar for Airshow
Member Avatar for VenusCrystal

Thank you so much Airshow :) that helped :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.