이미지배경의 특정지역 클릭 > 팝업창 롤링이미지 & 싱글이미지 > Javascript

사용자함수 이미지배경의 특정지역 클릭 > 팝업창 롤링이미지 & 싱글이미지

페이지 정보

작성자 너갱이
댓글 0건 조회 5,585회 작성일 15-05-15 15:10

본문

<style>

/* type_popA 공통 ( common.css 삽입 ) */
.type_popA {position:relative; width:680px; height:430px;}
.type_popA > img { position:absolute; width:680px; height:430px; padding:0; z-index:1;}
.type_popA > ul { }
.type_popA button {background-color:transparent; border:0; }
.type_popA dt > button { position:absolute; cursor:pointer; z-index:10; }

.type_popA dd { position:absolute; width:300px; background-color:#eee; padding:10px; border:2px solid #ccc; text-align:center; z-index:101; display:none;}
.type_popA dd > h5 { font-size:1em; vertical-align:middle; background-position:0 2px; padding-left:5px; margin-bottom:10px }
.type_popA dd > h5 > strong { font-weight:800;font-size:1.4em;vertical-align:middle; padding-left:5px }
.type_popA dd > button { float:right; width:26px; height:26px; }
.type_popA dd > div { position:relative; clear:both; width:300px; height:200px; margin:0; overflow:hidden; }
.type_popA dd > div > ol { position:absolute; width:980px; text-align:right; padding:0; top:5px; right:15px; }
.type_popA dd > div > ol > li { display:inline; padding:0; margin:0; }
.type_popA dd > div > ol > li > button { padding:3px; cursor:pointer; background-color:transparent; border:0;}

.type_popA dd > div > ul { margin:0; padding:0; width:1000px }
.type_popA dd > div > ul > li { float:left; margin:0; padding:0;}
.type_popA dd > div > ul > li > img, .type_popA dd > div > img { width:300px; height:200px; } /* 팝업이미지 사이즈 고정*/

.type_popA dd > div > button.btn_prev { position:absolute; left:5px; top:130px }
.type_popA dd > div > button.btn_next { position:absolute; left:260px; top:130px }

.type_popA dd > p { padding:5px 0; margin:0; text-align:justify; font-size:0.9em; line-height:1.6em;}
.type_popA dd > p.temper { border-bottom:1px dotted #777; color:#c60; font-size:1em; font-weight:800; margin:5px 0 }
.type_popA dd > p.temper > strong { font-size:1.4em; color:#f60}

/* Page별 CSS */

/* 2번째 맵 - 대한민국*/
#map_2_1 dt > button { left: 280px; top:180px; }
#map_2_1 dd { left: 100px; top:30px; }

/* 2번째 맵 - 이집트*/
#map_2_2 dt > button { left: 100px; top:205px; }
#map_2_2 dd { left: 150px; top:80px; }

/* 2번째 맵 - 남아프리카공화국*/
#map_2_3 dt > button { left: 90px; top:315px; }
#map_2_3 dd { left: 40px; top:50px; }

/* 2번째 맵 - 뉴질랜드*/
#map_2_4 dt > button { left: 365px; top:350px; }
#map_2_4 dd { left: 340px; top:20px; }

/* 4번째 맵 - 이란 루트 사막*/
#map_4_1 dt > button { left: 150px; top:200px; }
#map_4_1 dd { left: 100px; top:30px; }

/* 4번째 맵 - 오스트레일리아 퀸즈랜드*/
#map_4_2 dt > button { left: 315px; top:295px; }
#map_4_2 dd { left: 150px; top:80px; }

/* 4번째 맵 - 중국 투르판*/
#map_4_3 dt > button { left: 210px; top:160px; }
#map_4_3 dd { left: 100px; top:30px; }

/* 4번째 맵 - 리비아 엘아지지아*/
#map_4_4 dt > button { left: 85px; top:200px; }
#map_4_4 dd { left: 40px; top:50px; }

/* 4번째 맵 - 미국 데스밸리*/
#map_4_5 dt > button { left: 505px; top:180px; }
#map_4_5 dd { left: 340px; top:20px; }

/* 4번째 맵 - 튀니지 케빌리*/
#map_4_6 dt > button { left: 50px; top:200px; }
#map_4_6 dd { left: 30px; top:40px; }

/* 4번째 맵 - 리비아 가다메스*/
#map_4_7 dt > button { left: 68px; top:217px;}
#map_4_7 dd { left: 30px; top:70px; }

/* 4번째 맵 - 말리 팀북투*/
#map_4_8 dt > button { left: 35px; top:230px; }
#map_4_8 dd { left: 20px; top:70px; }

/* 4번째 맵 - 이스라엘 티라트 츠비*/
#map_4_9 dt > button { left: 120px; top:195px; }
#map_4_9 dd { left: 50px; top:50px; }

/* 4번째 맵 - 수단 와디할파*/
#map_4_10 dt > button { left: 100px; top:225px; }
#map_4_10 dd { left: 70px; top:70px; }

</style>

------------------------ JS ----------------------------------

//팝업뷰어 객체함수 인스턴스 생성
$(document).ready(function(e) {

var Act_2 = new popA($(".type_popA").eq(0),true); //2번째 콘텐츠 (popA 함수) _ 롤링이미지
var Act_4 = new popA($(".type_popA").eq(1)); //4번째 콘텐츠 (popA 함수) _ 싱글이미지

});
</script>

----------------------- HTML ---------------------------------

.....

<div class="type_popA">
<img src="images/world_map.jpg" alt="세계지도" style="border:1px solid #ccc; background-color:#ddeeff" />
<ul>
<li id="map_2_1">
<dl>
<dt><button title="대한민국"><img src="images/world_pics_out.png" class="roll_img" alt="" /></button></dt>
<dd>
<h5><strong>대한민국</strong></h5>
<div>
<ul>
<li><img src="images/e6_sc_03_video02_image01.jpg" alt="" /></li>
<li><img src="images/e6_sc_03_video02_image02.jpg" alt="" /></li>
<li><img src="images/e6_sc_03_video02_image03.jpg" alt="" /></li>
</ul>
</div>
<p>우리나라의 7월은 무더위가 기승을 부리는 여름입니다. 여름에는 비가 많이 오고, 태풍이 자주 발생하여 피해를 주기도 한답니다.</p>
<audio><source src="audio/e6_sc_03_video02_01.mp3" type="audio/mpeg"><source src="audio/e6_sc_03_video02_01.ogg" type="audio/ogg"></audio>
</dd>
</dl>
</li>

li태그 반복 ......

</ul>
</div>

.....

<div class="type_popA">
<img src="images/world_map.jpg" alt="세계지도" />
<ul>
<li id="map_4_1">
<dl>
<dt><button title="이란 - 루트 사막"><img src="images/world_pic_out.png" alt="" class="roll_img" /></button></dt>
<dd>
<h5>이란 <strong>루트 사막</strong></h5>
<div>
<img src="images/e6_sc_03_video04_image01.jpg" alt="이란 - 루트 사막" />
</div>
<p class="temper">최고 기온: <strong>70.6 ℃</strong></p>
<p>소금 호수가 말라붙어 생긴 루트 사막은 너무 더워서 박테리아조차 살 수 없는 곳이다.</p>
<audio><source src="audio/e6_sc_03_video04_01.mp3" type="audio/mpeg"><source src="audio/e6_sc_03_video04_01.ogg" type="audio/ogg"></audio>
</dd>
</dl>
</li>

li태그 반복......

</ul>
</div>

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

코딩샘플 보기

첨부파일

commonlib.js (9.9K)
62회 다운로드 | DATE : 2015-05-15 15:10:23

댓글목록

등록된 댓글이 없습니다.

Design

Programming

Community

사용자함수 이미지배경의 특정지역 클릭 > 팝업창 롤링이미지 & 싱글이미지

페이지 정보

본문

첨부파일

관련링크

댓글목록