Question

update:

#div1 img   { float: left; clear: left; margin: 10px; }    
#div2 img  { float: right; clear: right; margin: 10px; }

i have three divs and three radiobuttons
rb1, rb2, rb3 and divs div1, div2, div3

when the user hover over the radiobutton1 then displays div1 … radiobutton2 then displays div2 etc…

the below code works fine.

my question is:

how can i use a single <div> containing the text and images (instead of three copies) and simply apply a CSS style to it depending on which radio button is hovered.?

<div id="div1">      
<img class="align-left" src="image.gif" /> 
some test.....div1
</div>

<div id="div2">      
<img class="align-right" src="image.gif" /> 
some test.....div2
</div>    

<div id="div3">      
<img class="align-left" src="image.gif" /> 
<img class="align-right" src="image1.gif" /> 
some test.....div3
</div>


$('#_rbl').hover(              
    function (){         
     $('#div1').dialog('open');     
});

$('#_rb2').hover(              
    function (){         
     $('#div2').dialog('open');     
});

$('#_rb3').hover(              
    function (){         
     $('#div3').dialog('open');     
});

Answer 1

How about:

<div id="theDiv">      
<img class="align-left" src="image.gif" /> 
some test.....div1
</div>

$('#_rbl').hover(              
    function (){         
     $('#theDiv').removeClass("rb1 rb2 rb3").addClass("rb1").dialog('open');
});

$('#_rb2').hover(              
    function (){         
     $('#theDiv').removeClass("rb1 rb2 rb3").addClass("rb2").dialog('open');     
});

$('#_rb3').hover(              
    function (){         
     $('#theDiv').removeClass("rb1 rb2 rb3").addClass("rb3").dialog('open');     
});

UPDATE (create the classes like so):

.rb1 img { float: left; clear: left; margin: 10px; }    
.rb2 img { float: right; clear: right; margin: 10px; }