replacing default radio with images

I am trying to achieve two things here.1: I am trying to show content on clicking the radio button2: I am trying to replace the default radio button with imagesI could have completely eliminated the idea of radio and just do a click show with images but the ultimate task is to capture the users input and send is as an email. I am excluding that part in this question. My solution works fine in chrome but in IE 8 I am not able to show content. in IE 9 it worksHere is my current attempt:JavaScript:\[code\] $(function(){ var options = $('#options').find('input'); options.click(function(){ var id = "opt" + $(this).val(); $(".optDivs").hide(); $("#" + id).show(); }); var selections = $('#selections').find('input'); selections.click(function(){ var id = "opt" + $(this).val(); $(".slctDivs").hide(); $("#" + id).show(); }); });\[/code\]Html:\[code\]<html><head> <style> #one{ position:absolute; left:-99999999; }</style></head><body> <div id="options"> <div class="opt1"> <input type="radio" name="primary" id="one" value="http://stackoverflow.com/questions/15732127/1"> <label for="one"><img width="50px" src="http://gfxlovers.com/smilies/imgs/smiling/smiling025_2.gif"></label> </div> <div class="opt2"><input type="radio" name="primary" value="http://stackoverflow.com/questions/15732127/2"> Option 1</div> <div class="opt3"><input type="radio" name="primary" value="http://stackoverflow.com/questions/15732127/3"> Option 1</div> </div> <div id="opt1" class="optDivs" style="display:none;">content option 1</div> <div id="opt2" class="optDivs" style="display:none;">content option 2</div> <div id="opt3" class="optDivs" style="display:none;">content option 3</div> <div id="selections"> <div class="opt4"><input type="radio" name="secondary" value="http://stackoverflow.com/questions/15732127/4"> Option 2</div> <div class="opt5"><input type="radio" name="secondary" value="http://stackoverflow.com/questions/15732127/5"> Option 2</div> <div class="opt6"><input type="radio" name="secondary" value="http://stackoverflow.com/questions/15732127/6"> Option 2</div> </div> <div id="opt4" class="slctDivs" style="display:none;">content option 5</div> <div id="opt5" class="slctDivs" style="display:none;">content option 6</div> <div id="opt6" class="slctDivs" style="display:none;">content option 7</div><div id="chrome_hitahintpanel" style="opacity: 0; display: none;"><input id="chrome_hitahintinput" type="text"></div><div id="chrome_hintswindow"></div><div id="chrome_linksearchpanel" style="opacity: 0; display: none;"><input id="chrome_linksearchinput" type="text"></div></body></html>\[/code\]You can see it hosted and working here.Any idea what am I missing here?
 
Back
Top