모아보자 [기타] 마우스 오버, 클릭시 특정 div에 이미지와 설명 변경하기 웹개발팁
[기타] 마우스 오버, 클릭시 특정 div에 이미지와 설명 변경하기본문
CSS
<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>
HTML
<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>