안녕하세요. Mentor(멘토) 입니다.
다름이 아니라 재가 필요 해서 찾아 보다가 좋은 정보를 나눠 보고 싶어서 팁으로 올립니다.
게시판에 응용 해보시면 좋을만한 팁 이네요.
많이 모자라지만 팁 써보겠습니다.
많은 태클 걸어 주시면 감사하겠습니다 --*
1. css
<style>
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
</style>
border , backgornd , padding 등등 자신의 입맛에 맞게 적당히 설정해 줍니다.
2. js
<script>
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#screenshot").remove();
});
$("a.screenshot").mousemove(function(e){
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
screenshotPreview();
});
</script>
위 2개의 css 와 js 는 파일로 만드시면 좋을듯 합니다
3. 구현 예제
<a href="이동 주소" class="screenshot" rel="오버 이미지">오버할 텍스트</a>
<a href="이동 주소" class="screenshot" rel="오버 이미지"><img src="오버할 이미지"></a>
<a href="이동 주소" class="screenshot" rel="오버 이미지" title="오버시 하단 타이틀">
이런식으로 만들어 주시면 됩니다.
게시판에 적용 하시려면
ㄱ. 텍스트 형태
<a href="<?=$list[$i][href]?>" class="screenshot" rel="오버할 이미지"><?=$list[$i][subject]?></a>
ㄴ. 갤러리 형태
<a href="<?=$list[$i][href]?>" class="screenshot" rel="오버할 이미지">불러올 thumb 주소</a>
오버할 이미지에 해당 게시판의 list안의 저장된 이미지 주소를 지정해주시면 될듯 합니다.
이런식으로 적용 해 보시면 좋을듯 싶습니다.
링크에 저희 사이트 실제 적용 예시 걸어 놓았습니다.
추석이 다가오네요
맛있는 것들 많이 먹으시고, 친척들 또는 가족과 좋은 시간 되셨으면 합니다.^^
게시글 목록
| 번호 | 제목 |
|---|---|
| 34021 | |
| 33994 | |
| 33922 | |
| 33895 | |
| 33889 | |
| 33882 | |
| 33868 |
최신글
최신글 함수 개량
11
|
| 33863 | |
| 33859 | |
| 33857 | |
| 33849 | |
| 33842 | |
| 33835 | |
| 33830 | |
| 33828 | |
| 33807 | |
| 33797 | |
| 33796 | |
| 33791 | |
| 33786 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기