마우스 오버, 클릭시 특정 div에 이미지와 설명 변경하기 > 웹개발팁

 
<style> 
#mainImg{width:100%;height:395px;position:relative;} 
#mainImg img{width:100%;height:100%;object-fit:cover;} 
#imgList{width:100%;margin:0;padding:0;} 
 
#imgList li {float:left;width:14.2857142857%;height:56px;margin:0;padding:0;} 
#imgList li img{width:100%;height:100%;object-fit:cover;border:1px solid #333;} 
#imgList li img:hover {border:1px solid #FE0F17;} 
#text1 {position:absolute;bottom:10px;left:10px;background:#444;color:#999;padding:5px 10px;} 
#mark {position:absolute;bottom:65px;right:10px;background:#444;padding:3px 5px;color:#999;font-size:0.88em !important;} 
</style> 

 
<script type="text/javascript"> 
$(function(){ 
$("#imgList li>img").hover(function(){ 
$("#mainImg img").attr('src', $(this).attr('src')); 
$("#text1").text($(this).attr('data')); 
}); 
}); 
</script> 

 
<script type="text/javascript"> 
$(function(){ 
$("#imgList li>img").on("click", function(){ 
$("#mainImg img").attr('src', $(this).attr('src')); 
$("#text1").text($(this).attr('data')); 
}); 
}); 
</script> 

 
<div style="position:relative;width:470px;height:453px;border:1px solid #ddd;"> 
  <div id="mainImg"> 
    <img src="1 이미지주소"> 
    <div id="text1">1 이미지 설명</div> 
  </div> 
  <ul id='imgList'> 
    <li><img src='1 이미지주소' data="1 이미지 설명" style="cursor:pointer;"></li> 
    <li><img src='2 이미지주소' data="2 이미지 설명" style="cursor:pointer;"></li> 
    <li><img src='3 이미지주소' data="3 이미지 설명" style="cursor:pointer;"></li> 
    <li><img src='4 이미지주소' data="4 이미지 설명" style="cursor:pointer;"></li> 
    <li><img src='5 이미지주소' data="5 이미지 설명" style="cursor:pointer;"></li> 
    <li><img src='6 이미지주소' data="6 이미지 설명" style="cursor:pointer;"></li> 
    <li><img src='7 이미지주소' data="7 이미지 설명" style="cursor:pointer;"></li> 
  </ul> 
</div>