How To Add Radio Buttons To Rollover Functionality

I have the following markup for when the user hovers over img1, img2 appears below img1. Also when hovering over img3, img4 appears in the same place as img2. What I would like to

Solution 1:

I hope this is exactly what you needed

$(document).ready(function(){
        $("img[id='img2']").css('display', 'none');
        $("img[id='img4']").css('display', 'none');
        
        $("img[id='img1']").click(function(){
            $("img[id='img2']").show();
            //this will do the radio button's job for clicked value i.e to keep track of when last img1 was clicked and remove from img3
            $("img[id='img1']").attr("click_checker", "yes");
            $("img[id='img3']").removeAttr("click_checker");
            $("img[id='img4']").hide();
        });
        $("img[id='img3']").click(function(){
            $("img[id='img4']").show();
            //this will do the radio button's job for clicked value i.e to keep track of when last img3 was clicked and remove from img1
            $("img[id='img3']").attr("click_checker", "yes");
            $("img[id='img1']").removeAttr("click_checker");
            $("img[id='img2']").hide();
        });
        
        $("img[id='img1']").mouseover(function(){
            $("img[id='img2']").show();
            $("img[id='img4']").hide();
        });
        $("img[id='img1']").mouseleave(function() {
            var img3_check = $("img[id='img3']").attr("click_checker");
            var img1_check = $("img[id='img1']").attr("click_checker");
            if (img3_check == 'yes') {
                //when mouse leaves we check if img3 has click_checker still on, then we show img4 if not both img2 and img4 will be hidden
                $("img[id='img2']").hide();
                $("img[id='img4']").show(); 
            } elseif (img1_check == 'yes') {
                $("img[id='img2']").show();
            } else {
                 $("img[id='img2']").hide();
                 $("img[id='img4']").hide();
            }
         });

         $("img[id='img3']").mouseover(function(){
             $("img[id='img2']").hide();
             $("img[id='img4']").show();
         });
         $("img[id='img3']").mouseleave(function() {
             var img3_check = $("img[id='img3']").attr("click_checker");
             var img1_check = $("img[id='img1']").attr("click_checker");
             if (img1_check == 'yes') {
                   //when mouse leaves we check if img1 has click_checker still on, then we show img2 if not both img2 and img4 will be hidden
                 $("img[id='img2']").show();
                 $("img[id='img4']").hide(); 
             } elseif (img3_check == 'yes') {
                $("img[id='img4']").show();
             } else {
                 $("img[id='img2']").hide();
                 $("img[id='img4']").hide();
             }
         });

    });

#img2, #img4 {
  width: 100px;
  height:100px;
 }

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><ul><li><imgid="img1"src="http://www.julienlevesque.net/preview/google-smile-preview.jpg"><imgid="img2"src="http://metroui.org.ua/images/2.jpg"><imgid="img3"src="http://www.julienlevesque.net/preview/google-smile-preview.jpg"><imgid="img4"src="http://metroui.org.ua/images/4.jpg"></li></ul>