// =================================================================
// Flash 없이 이미지를 Rotate하는 프로그램
// 기능
// - Image Roate
// - Image별 Link 처리
// -----------------------------------------------------------------
// Author : Lee Hyun Seung
// Make Date : 2010.06.08
// E-Mail : lhs0619@gmail.com
// =================================================================
var ims_fade_in_hold = true, ims_fade_out_hold = true;
var ims_cur_sel = 0, ims_idx = 2, ims_is_rotate = true;
var ims_rtimeout;
var ims_ie_opacity_max = 100, ims_noie_opacity_max = 1;
var ims_ie_step = 20; ims_noie_step = 0.2; // fade-in, fade-out 증가치
var ims_fade_out_idx = 0; ims_fade_in_idx = 1; // fade-in, fade-out객체번호
var ims_cur_fade_out_obj = "main_image", ims_cur_fade_in_obj = "main_image_buf";
// =================================================================
// 이미지 정보
// =================================================================
var img_list = new Array();
//img_list[0] = "url('/new_ims/img/flash_004.jpg')";
//img_list[2] = "url('/new_ims/img/sokbo.jpg')";
//img_list[4] = "url('/new_ims/img/flash_005.jpg')";
img_list[3] = "url('/new_ims/img/flash_003.jpg')";
img_list[2] = "url('/new_ims/img/flash_002.jpg')";
//img_list[0] = "url('/new_ims/img/flash_006.jpg')";
img_list[0] = "url('/new_ims/img/tim_seoul.png')";
img_list[1] = "url('/new_ims/img/newletters.png')";
//img_list[0] = "url('/new_ims/img/sokbo.jpg')";
//img_list[1] = "url('/new_ims/img/sokbo.jpg')";
// =================================================================
// Link 정보
// =================================================================
var link_list = new Array();
//link_list[0] = "";
//link_list[2] = "";
//link_list[4] = "";
link_list[3] = "";
link_list[2] = "";
link_list[0] = "";
link_list[1] = "";
//link_list[0] = "";
//link_list[1] = "";
// =================================================================
// Sleep 처리함수 (일정시간 대기처리)
// =================================================================
function f_sleep(delay_sec)
{
var start_tm = new Date().getTime();
var curr_tm = start_tm;
while (curr_tm - start_tm < delay_sec)
{
curr_tm = new Date().getTime();
}
}
function f_rotate()
{
// ===========================================
// 총 이미지 건수를 확인한다.
// ===========================================
//alert(ims_idx); alert(img_list.length);
if (ims_idx >= img_list.length)
{
ims_idx = 0;
}
// ===========================================
// 이미지 Rotate처리
// ===========================================
//var img_obj = document.getElementById("main_image");
var img_obj = document.getElementById(ims_cur_fade_in_obj);
img_obj.style.backgroundImage=img_list[ims_idx];
img_obj.style.backgroundRepeat="no-repeat";
//alert(ims_idx);
//alert(ims_cur_fade_out_obj);
//alert(img_obj.filters.alpha.opacity);
// ===========================================
// 현지 보여지는 이미지 번호
// ===========================================
ims_cur_sel = ims_idx;
// ===========================================
// Next 이미지 처리
// ===========================================
ims_idx++;
}
// ===========================================================
// 어떤 특정객체의 위치정보를 가져온다.
// ===========================================================
function f_get_object_info(obj_name, inq_type)
{
var obj_x, obj_y, obj_width, obj_height;
var ims_search_word_obj = document.getElementById(obj_name);
var obj_info = ims_search_word_obj.getBoundingClientRect();
if (obj_info.left != undefined)
{
obj_x2 = obj_info.left + (document.documentElement.scrollLeft || document.body.scrollLeft);
obj_y = obj_info.top + (document.documentElement.scrollTop || document.body.scrollTop);
obj_width = obj_info.right - obj_info.left;
obj_height = obj_info.bottom - obj_info.top;
}
else
{
ims_search_word_obj = document.getBoxObjectFor(obj_name);
obj_x = ims_search_word_obj.x;
obj_y = ims_search_word_obj.y;
obj_width = ims_search_word_obj.width;
obj_height = ims_search_word_obj.height;
}
// ==========================================
// 조회 유형을 확인한다.
// ==========================================
if (inq_type == "x" || inq_type == "X")
{
return obj_x;
}
else if (inq_type == "y" || inq_type == "Y")
{
return obj_y;
}
else if (inq_type == "width" || inq_type == "WIDTH")
{
return obj_width;
}
else if (inq_type == "height" || inq_type == "HEIGHT")
{
return obj_height;
}
return 0;
}
// ===========================================================
// 어떤 특정객체의 위치정보를 가져온다.
// ===========================================================
function f_set_object_info(obj_name, inq_type, val)
{
var ims_search_word_obj = document.getElementById(obj_name);
var obj_info = ims_search_word_obj.getBoundingClientRect();
if (obj_info.left != undefined)
{
if (inq_type == "x" || inq_type == "X")
{
obj_info.left = val;
}
if (inq_type == "y" || inq_type == "Y")
{
obj_info.top = val; //obj_info.top + (document.documentElement.scrollTop || document.body.scrollTop);
}
if (inq_type == "width" || inq_type == "WIDTH")
{
obj_info.right = val; //obj_info.right - obj_info.left;
}
if (inq_type == "height" || inq_type == "HEIGHT")
{
obj_info.bottom = val; //obj_info.bottom - obj_info.top;
}
}
else
{
if (inq_type == "x" || inq_type == "X")
{
ims_search_word_obj.x = val;
}
if (inq_type == "y" || inq_type == "Y")
{
ims_search_word_obj.y = val;
}
if (inq_type == "width" || inq_type == "WIDTH")
{
ims_search_word_obj.width = val;
}
if (inq_type == "height" || inq_type == "HEIGHT")
{
ims_search_word_obj.height = val;
}
}
return 0;
}
// ===========================================================
// Fade-Out 처리한다.
// ===========================================================
function f_fade_out_start()
{
var img_obj = document.getElementById(ims_cur_fade_out_obj);
// ============================
// 브라우져 확인
// ============================
if (typeof(img_obj.filters) == "undefined")
{
// IE 아님. ㅋ
if (img_obj.style.opacity > 0)
{
img_obj.style.opacity -= ims_noie_step;
if (img_obj.style.opacity == 0.2)
{
f_fade_in_start("just");
}
f_fade_out();
}
else
{
img_obj.style.opacity = 0;
ims_fade_out_hold = true;
f_fade_in();
f_num_over(ims_idx);
var img_obj1 = document.getElementById("main_image_buf");
img_obj1.innerHTML = link_list[ims_idx - 1];
}
//alert(img_obj.filters.alpha.opacity);
}
else
{
// IE임.ㅋ
//alert(img_obj.style.opacity);
if (img_obj.filters.alpha.opacity > 0)
{
img_obj.filters.alpha.opacity -= ims_ie_step;
if (img_obj.filters.alpha.opacity == 20)
{
//alert("1111");
f_fade_in_start("just");
}
f_fade_out();
}
else
{
img_obj.filters.alpha.opacity = 0 ;
ims_fade_out_hold = true;
f_fade_in();
f_num_over(ims_idx);
var img_obj1 = document.getElementById("main_image_buf");
img_obj1.innerHTML = link_list[ims_idx-1];
}
}
//img_obj.style.opacity = 0.6;
//img_obj.filters.alpha.opacity = 60;
}
function f_fade_out()
{
// ===========================================
// Timer 설정처리
// ===========================================
if (ims_is_rotate == true)
{
//alert(ims_fade_in_hold);
if (ims_fade_out_hold == true)
{
ims_fade_out_hold = false;
ims_rtimeout = setTimeout(new Function("f_fade_out_start()"), 4000);
}
else
{
ims_rtimeout = setTimeout(new Function("f_fade_out_start()"), 150);
}
}
}
// ===========================================================
// Fade-In 처리한다.
// ===========================================================
function f_fade_in_start(action_tp)
{
var img_obj = document.getElementById(ims_cur_fade_in_obj);
// ============================
// 브라우져 확인
// ============================
if (typeof(img_obj.filters) == "undefined")
{
// IE 아님. ㅋ
if (img_obj.style.opacity < ims_noie_opacity_max)
{
//img_obj.style.opacity = img_obj.style.opacity + 0.2;
img_obj.style.opacity = 1;
//alert(ims_noie_step);
if (action_tp != "just")
{
f_fade_in();
}
}
else
{
img_obj.style.opacity = ims_noie_opacity_max;
// ======================================
// Fade In/ Out 객체 변경처리
// ======================================
if (ims_cur_fade_in_obj == "main_image")
{
ims_cur_fade_in_obj = "main_image_buf";
ims_cur_fade_out_obj = "main_image";
}
else
{
ims_cur_fade_in_obj = "main_image";
ims_cur_fade_out_obj = "main_image_buf";
}
// ======================================
// 다음이미지를 읽어놓는다. (깜박임 방지.)
// ======================================
//var img_obj = document.getElementById(ims_cur_fade_out_obj);
f_rotate();
ims_fade_in_hold = true;
f_fade_out();
}
//alert(img_obj.filters.alpha.opacity);
}
else
{
// IE임.ㅋ
//alert(img_obj.style.opacity);
if (img_obj.filters.alpha.opacity < ims_ie_opacity_max)
{
img_obj.filters.alpha.opacity += ims_ie_step;
//alert(ims_ie_opacity_max);
//Alert(img_obj.filters.alpha.opacity );
if (action_tp != "just")
{
f_fade_in();
}
}
else
{
img_obj.filters.alpha.opacity = ims_ie_opacity_max;
// ======================================
// Fade In/ Out 객체 변경처리
// ======================================
if (ims_cur_fade_in_obj == "main_image")
{
ims_cur_fade_in_obj = "main_image_buf";
ims_cur_fade_out_obj = "main_image";
}
else
{
ims_cur_fade_in_obj = "main_image";
ims_cur_fade_out_obj = "main_image_buf";
}
// ======================================
// 다음이미지를 읽어놓는다. (깜박임 방지.)
// ======================================
f_rotate();
ims_fade_in_hold = true;
//alert(ims_fade_in_hold);
f_fade_out();
}
}
}
function f_fade_in()
{
// ===========================================
// Timer 설정처리
// ===========================================
//if (ims_fade_in_hold == true)
//{
// ims_fade_in_hold = false;
// ims_rtimeout = setTimeout(new Function("f_fade_in_start('void')"), 2500);
//}
//else
//{
ims_rtimeout = setTimeout(new Function("f_fade_in_start('void')"), 150);
//}
}
// ===========================================================
// Number Over
// ===========================================================
function f_num_over(idx)
{
var img_obj;
var tb_obj;
for (idx_i = 0; idx_i < img_list.length; idx_i++)
{
tb_obj = "bg_" + idx_i;
img_obj = document.getElementById(tb_obj);
img_obj.style.backgroundColor="#ffffff";
img_obj.style.fontWeight = "normal";
}
//alert(idx - 1);
if ((idx - 1) > img_list.length)
{
idx = 0;
}
var idx_sel = 0;
if (idx == 0)
{
idx_sel = idx;
tb_obj = "bg_" + (idx);
}
else
{
idx_sel = idx - 1;
tb_obj = "bg_" + (idx - 1);
}
var img_obj = document.getElementById(tb_obj);
img_obj.style.backgroundColor="#f0f0f0";
img_obj.style.fontWeight = "bold";
}
// ===========================================================
// 이미지별 번호에서 In 되었을 때처리.
// ===========================================================
function f_over(str_idx, idx)
{
var tb_obj;
for (idx_i = 0; idx_i < img_list.length; idx_i++)
{
tb_obj = "bg_" + idx_i;
img_obj = document.getElementById(tb_obj);
img_obj.style.backgroundColor="#ffffff";
img_obj.style.fontWeight = "normal";
}
tb_obj = "bg_" + str_idx;
var img_obj = document.getElementById(tb_obj);
img_obj.style.backgroundColor="#f0f0f0";
img_obj.style.fontWeight = "bold";
// ===========================================================
// 이미지 고정처리
// ===========================================================
var img_obj = document.getElementById("main_image");
var img_obj1 = document.getElementById("main_image_buf");
// ============================
// 브라우져 확인
// ============================
if (typeof(img_obj.filters) == "undefined")
{
// all browser except IE
img_obj.style.opacity = ims_noie_opacity_max;
}
else
{
// ie
img_obj.filters.alpha.opacity = ims_ie_opacity_max;
}
img_obj.style.backgroundImage=img_list[idx];
//img_obj.innerHTML = link_list[idx];
img_obj1.innerHTML = link_list[idx];
ims_idx = idx;
// ===========================================================
// suspend a image Roate.
// ===========================================================
ims_is_rotate = false;
clearTimeout(ims_rtimeout);
}
// ===========================================================
// 이미지별 번호에서 Out되었을 때처리.
// ===========================================================
function f_out(str_idx, idx)
{
// ===========================================================
// 변수초기화
// ===========================================================
ims_cur_fade_out_obj = "main_image";
ims_cur_fade_in_obj = "main_image_buf";
ims_fade_in_hold = true;
ims_fade_out_hold = true;
ims_is_rotate = true;
// ===========================================================
// Opacity 초기화
// ===========================================================
var img_obj1 = document.getElementById("main_image");
var img_obj2 = document.getElementById("main_image_buf");
// ============================
// 브라우져 확인
// ============================
if (typeof(img_obj1.filters) == "undefined")
{
// all browser except IE
img_obj1.style.opacity = ims_noie_opacity_max;
img_obj2.style.opacity = 0;
}
else
{
// ie
img_obj1.filters.alpha.opacity = ims_ie_opacity_max;
img_obj2.filters.alpha.opacity = 0;
}
var tb_obj = "bg_" + str_idx;
ims_idx = idx + 1;
var img_obj = document.getElementById(tb_obj);
img_obj.style.backgroundColor = "#ffffff";
img_obj.style.fontWeight = "normal";
}
// ===========================================================
// 좌표에 의한 이벤튼 처리추가
// ===========================================================
function f_event_position()
{
// ===========================================
// 이미지에 따른 처리를 시작한다.
// -------------------------------------------
// ※ 이미지추가 또는 변경시 수정해야함.
// ===========================================
var obj_info = document.getElementById(ims_cur_fade_out_obj);
//alert(obj_info.style.backgroundImage);
//alert(obj_info.style.backgroundImage.search("flash"));
if (obj_info.style.backgroundImage.search("flash_005.jpg") > 0)
{
// 정착안내
//alert(window.event.clientX+","+window.event.clientY);
// 캐나다정착안내
window.location.href="http://www.visaims.com/new_ims/contents/ims_contents.php?menu_gb_c=lan&menu_knd_c=set&menu_nm=sub1&menu_idx=1";
}
}
// ===========================================================
// Image Rotate처리 Start
// 위에것들은 처리함수들이니깐.. 복잡한것 좋아하면 위에것 봐도됨.
// ===========================================================
function f_run()
{
ims_is_rotate = true;
f_rotate();
f_fade_out();
}
// ===========================================================
// Image Roate 처리 시작
// -----------------------------------------------------------
// Image Rotate처리 도입부이며, Rotate처리 시작전 필요사항이
// 있으면, 이부분을 수정하면됨.(LHS)
// ===========================================================
function f_rotate_start()
{
var img_obj = document.getElementById("main_image");
img_obj.style.backgroundImage = img_list[0];
img_obj.style.backgroundRepeat ="no-repeat";
//ims_chg_image();
var x = f_get_object_info("main_image", "x");
var y = f_get_object_info("main_image", "y");
var img_buf = document.getElementById("main_image_buf");
img_buf.style.backgroundImage = img_list[1];
img_buf.style.backgroundRepeat ="no-repeat";
// =====================================
// Event 추가
// =====================================
if (img_buf.addEventListener)
{
// NoIE
img_buf.addEventListener("onclick", f_event_position);
}
else
{
// Just IE
img_buf.attachEvent("onclick", f_event_position);
}
//img_buf.style.left = x;
//img_buf.style.top = y;
//alert(x + ", " + y);
var b_x = f_get_object_info("main_image_buf", "x");
var b_y = f_get_object_info("main_image_buf", "y");
//alert(b_x + ", " + b_y);
f_fade_out();
// =====================================
// 이미지 NUMBER 설정
// =====================================
var num_obj = document.getElementById("img_number");
html_num = "";
html_num += "";
html_num += "| 1 | ";
html_num += "2 | ";
html_num += "3 | ";
html_num += "4 | ";
//html_num += "4 | ";
//html_num += "5 | ";
//html_num += "6 | ";
html_num += "
";
html_num += "
";
num_obj.innerHTML = html_num;
}