제이쿼리를 이용해 썸네일 이미지에 마우스 오버시 큰 이미지가 뜨도록 설정해 봤습니다.



큰 이미지는 뜨는데, 문제는 해당 페이지의 a href 링크가 걸린 모든 이미지가 오버되는 맹점이 있습니다.

지정한 이미지만 오버 효과를 주고 싶은데, 어떻게 해야할까요. 아래는 해당 소스입니다.

이거 같은 경우는 href값이 포함된, attr() 함수를 조절하면 될꺼 같은데 그 이상을 모르겠네요..;;;





========================================================================



<script src="/Comm/_inc/jquery-1.7.2.min.js" type="text/javascript"></script>
 <style type="text/css">
 a img {
  border: none;
 } #largeImage {
  position: absolute;
  padding: .5em;
  background: #e3e3e3;
  border: 1px solid;
 }
</style>
<script type="text/javascript">
 $(function(){
  var offsetX = 20;
  var offsetY = 10;
 
  $('a').hover(function(e){
  //mouse on
  var href = $(this).attr('href');
  $('<img id="largeImage" src="' + href + '" width="500">').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX).appendTo('body');
  }, function(){
  //mouse off
  $('#largeImage').remove();
  });
 
  $('a').mousemove(function(e){
  $('#largeImage').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
  })
 
 });
</script>

제이쿼리를 이용해 썸네일 이미지에 마우스 오버시 큰 이미지가 뜨도록 설정해 봤습니다.







큰 이미지는 뜨는데, 문제는 해당 페이지의 a href 링크가 걸린 모든 이미지가 오버되는 맹점이 있습니다.



지정한 이미지만 오버 효과를 주고 싶은데, 어떻게 해야할까요. 아래는 해당 소스입니다.



이거 같은 경우는 href값이 포함된, attr() 함수를 조절하면 될꺼 같은데 그 이상을 모르겠네요..;;;











========================================================================







<script src="/Comm/_inc/jquery-1.7.2.min.js" type="text/javascript"></script>

 <style type="text/css">

 a img {

  border: none;

 } #largeImage {

  position: absolute;

  padding: .5em;

  background: #e3e3e3;

  border: 1px solid;

 }

</style>

<script type="text/javascript">

 $(function(){

  var offsetX = 20;

  var offsetY = 10;

  

  $('a').hover(function(e){

   //mouse on

   var href = $(this).attr('href');

   $('<img id="largeImage" src="' + href + '" width="500">').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX).appendTo('body');

  }, function(){

   //mouse off

   $('#largeImage').remove();

  });

  

  $('a').mousemove(function(e){

   $('#largeImage').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);

  })

  

 });

</script>