trafnar/gist:364107

## gistfile1.html
<style type="text/css">
  img{display:none;}
</style>

<script type="text/javascript" charset="utf-8">

  $('.link').hover(function(){


    // first make sure all the images are hidden
    $('img').hide();


    // check which of the 3 links was hovered over,
    // show the corresponding image

    if($(this).hasClass('first'))
    {
      $('#one').show();
    }

    if($(this).hasClass('first'))
    {
      $('#two').show();
    }

    if($(this).hasClass('first'))
    {
      $('#three').show();
    }


  });

</script>

<html>

  <a href="#" class="link first">first</a>
  <a href="#" class="link second">second</a>
  <a href="#" class="link third">third</a>


  <img src="one.jpg" id="one" />
  <img src="two.jpg" id="two" />
  <img src="three.jpg" id="three" />

</html>
	<style type="text/css">
	img{display:none;}
	</style>

	<script type="text/javascript" charset="utf-8">

	$('.link').hover(function(){


	// first make sure all the images are hidden
	$('img').hide();


	// check which of the 3 links was hovered over,
	// show the corresponding image

	if($(this).hasClass('first'))
	{
	$('#one').show();
	}

	if($(this).hasClass('first'))
	{
	$('#two').show();
	}

	if($(this).hasClass('first'))
	{
	$('#three').show();
	}


	});

	</script>

	<html>

	<a href="#" class="link first">first</a>
	<a href="#" class="link second">second</a>
	<a href="#" class="link third">third</a>


	<img src="one.jpg" id="one" />
	<img src="two.jpg" id="two" />
	<img src="three.jpg" id="three" />

	</html>