Showing different icons on hover I have 30 icons, and after hover, different icons are shown. How can I write this shorter?

jQuery

$('#iconTech01').hover(
        function() {
            $('#iconTechBig01').stop(true, true).fadeIn("slow");
            $('#iconTech01 img').stop(true, true).fadeOut("slow");
        },
        function() {
            $('#iconTechBig01').stop(true, true).fadeOut("slow");
            $('#iconTech01 img').stop(true, true).fadeIn("slow");
    });

    $('#iconTech02').hover(
        function() {
            $('#iconTechBig02').stop(true, true).fadeIn("slow");
            $('#iconTech02 img').stop(true, true).fadeOut("slow");
        },
        function() {
            $('#iconTechBig02').stop(true, true).fadeOut("slow");
            $('#iconTech02 img').stop(true, true).fadeIn("slow");
    });

    $('#iconTech03').hover(
        function() {
            $('#iconTechBig03').stop(true, true).fadeIn("slow");
            $('#iconTech03 img').stop(true, true).fadeOut("slow");
        },
        function() {
            $('#iconTechBig03').stop(true, true).fadeOut("slow");
            $('#iconTech03 img').stop(true, true).fadeIn("slow");
    });

    $('#iconTech04').hover(
        function() {
            $('#iconTechBig04').stop(true, true).fadeIn("slow");
            $('#iconTech04 img').stop(true, true).fadeOut("slow");
        },
        function() {
            $('#iconTechBig04').stop(true, true).fadeOut("slow");
            $('#iconTech04 img').stop(true, true).fadeIn("slow");
    });

    $('#iconTech05').hover(
        function() {
            $('#iconTechBig05').stop(true, true).fadeIn("slow");
            $('#iconTech05 img').stop(true, true).fadeOut("slow");
        },
        function() {
            $('#iconTechBig05').stop(true, true).fadeOut("slow");
            $('#iconTech05 img').stop(true, true).fadeIn("slow");
    });


HTML

&lt;div id="iconWraper"&gt;
    &lt;div id="iconTech01" class="icon"&gt;&lt;img src="img/icons/tech/tech01.png" alt="icon 01" /&gt;&lt;/div&gt;
    &lt;div id="iconTech02" class="icon"&gt;&lt;img src="img/icons/tech/tech02.png" alt="icon 02" /&gt;&lt;/div&gt;
    &lt;div id="iconTech03" class="icon"&gt;&lt;img src="img/icons/tech/tech03.png" alt="icon 03" /&gt;&lt;/div&gt;
    &lt;div id="iconTech04" class="icon"&gt;&lt;img src="img/icons/tech/tech04.png" alt="icon 04" /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id="iconTechBig01" class="iconBig"&gt;&lt;img src="img/icons/tech/tech01Big.png" alt="ikona 01" /&gt;&lt;/div&gt;                             
&lt;div id="iconTechBig02" class="iconBig"&gt;&lt;img src="img/icons/tech/tech02Big.png" alt="ikona 02" /&gt;&lt;/div&gt;
&lt;div id="iconTechBig03" class="iconBig"&gt;&lt;img src="img/icons/tech/tech03Big.png" alt="ikona 02" /&gt;&lt;/div&gt;
&lt;div id="iconTechBig04" class="iconBig"&gt;&lt;img src="img/icons/tech/tech04Big.png" alt="ikona 02" /&gt;&lt;/div&gt;
Certainly, assign a class to each tech icon (I'm assuming they're divs), use a JQuery selector to select all DOM element with the assigned class and then use each() to step through each item. 

&lt;div class="icon" id="iconTech01"&gt;&lt;img ..../&gt;&lt;/div&gt;
&lt;div class="icon" id="iconTech02"&gt;&lt;img ..../&gt;&lt;/div&gt;
&lt;div class="icon" id="iconTech03"&gt;&lt;img ..../&gt;&lt;/div&gt;

&lt;script type="text/javascript"&gt;
$('.icon').each(function () {
    $(this).hover(
        function () {
            $(this).stop(true, true).fadeIn("slow");
        },
        function () {
            $('img', this).stop(true, true).fadeOut("slow");
        }
    );
});
&lt;/script&gt;