20'C 흐림
서울 강남구
이미지에 마우스오버시 미리보기 이미지 툴팁(확대) 생성하는 코드입니다.
이미지만 확대하는 Preview, 이미지 확대후 캡션도 생성하는Preview 두가지 종류 입니다.
- 이미지 태그 설정 html 부분 입니다.
<table class="table border">
<thead>
<tr>
<th colspan="2"> # mouseover 시, Image Preview Gallery 생성</th>
</tr>
</thead>
<tbody>
<tr>
<th width="200px">without Caption</th>
<td>
<img src="./image/wallpaper.jpg" class="gallery" height="50px" alt="small_image" />
</td>
</tr>
<tr>
<th>with Caption</th>
<td>
<img src="./image/wallpaper.jpg" class="gallery" height="50px" data-image="window10_wallpaper" alt="small_image" />
</td>
</tr>
</tbody>
</table>
Jquery함수에서 img태그에 data-image속성값이 있으면 해당값을 Caption으로 설정하여 Preview를 생성할 것입니다.
HTML에서 원하는 엘리먼트에 "data-속성명" 을 통해 화면에는 표출되지않는 정보들을 부여할 수 있습니다.
- Preview 태그를 생성하는 자바스크립트 함수 부분입니다.
<script type="text/javascript">
$(document).ready(function() {
var xOffset = 10;
var yOffset = 30;
//마우스 오버시 preview 생성
$(document).on("mouseover",".gallery",function(e){
var image_data = $(this).data("image");
var add_caption = (image_data != undefined) ? "<br/>" + image_data : "" ;
$("body").append("<p id='preview'><img src='"+ $(this).attr("src") +"' width='400px' />"+ add_caption +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
});
//마우스 이동시 preview 이동
$(document).on("mousemove",".gallery",function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
//마우스 아웃시 preview 제거
$(document).on("mouseout",".gallery",function(){
$("#preview").remove();
});
});
</script>
1. 마우스 오버 시, 해당 이미지 미리보기태그<p id='preview'>...</p> 를 생성합니다.
(해당 이미지에 "data-image" 속성값이 있다면 해당 값을 Caption으로 생성합니다.)
2. 마우스 이동 시, 미리보기태그 위치를 변경된 마우스포인터 위치로 이동시킵니다.
3. 마우스 아웃 시, 미리보기태그를 제거합니다.
첨부파일 : 부트스트랩 라이브러리 포함된 해당 html문서 첨부파일 입니다.