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:


<style type="text/css">

<script type="text/javascript" src="/C:/Users/ng/Documents/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
  $('#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');
<table border="1">
        <img id='contextual-action-icon' align='top' src='/C:/Users/ng/Documents/Unnamed Site 1/core/images/tables/ipopglyph_sm_qualifier.png' title='More...'/>

I have attached screenshots of the output.

Thanks in Advance,

i need this immediately. can anyone help me ?


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:

    width: 50px;
    height: 30px;
    margin: 3px;
    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).