previousSibling 관련......

국내에 웹 사이트들이 웹 표준을 지키고 OS나 브라우저와 관계 없이 접근성을 향상 시키기 위한 사이트 버그 신고 및 문제 해결을 위한 게시판입니다.
Post Reply
손님213

previousSibling 관련......

Post by 손님213 »

갤러리를 쓸 페이지인데요

그림이 화면 가운데 오도록 합니다.
만약 그림이 크면 화면 크기에 맞게 자동으로 줄어듭니다.
세로정렬도 가운데로 됩니다.

마우스 왼쪽클릭 이전그림 으로 갑니다
마우스 오른쪽 클릭 다음 그림 으로 갑니다.

이미 IE에서는 다 잘돌아갑니다.
제가 실력이 짧아서 그런지 파이어폭스에서는 화면이 아예 안나옵니다.

오직 마우스 왼쪽클릭, 오른쪽 클릭만 인식합니다.
그런데 제일 중요한것~! 자신의 이전개체랑 다음개체(previousSibling,nextSibling)이 전혀 안먹습니다.

너무 머리가 아픕니다. IE에서는 잘되는데 파이어 폭스에서도 잘되게 하는방법 없을까요?

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Gallery </TITLE>
<style>
body {margin:0; background-color:#000; color:#0f0;}
.v100 {position:relative; width:100%; height:100%; overflow:hidden; text-align:center;}
</style>
</HEAD>

<BODY>
<div></div>
<div class="v100" onmousedown="javascript:mousehandler(this,event,'previous_page_URL');"><IMG SRC="../Pictures/이죽일놈의사랑(1467).jpg" WIDTH="400" HEIGHT="533" BORDER="0" ALT="그림-1" name="target_resize_image[]"> </div>
<div class="v100" onmousedown="javascript:mousehandler(this,event);"><IMG SRC="../Pictures/사진051127_46(5627).jpg" WIDTH="200" HEIGHT="200" BORDER="0" ALT="그림-2" name="target_resize_image[]"> </div>
<div class="v100" onmousedown="javascript:mousehandler(this,event);"><IMG SRC="../Pictures/이죽일놈의사랑(1467).jpg" WIDTH="400" HEIGHT="533" BORDER="0" ALT="그림-3" name="target_resize_image[]"> </div>
<div class="v100" onmousedown="javascript:mousehandler(this,event);"><IMG SRC="../Pictures/sexy-2/11___________________케.jpg" WIDTH="400" HEIGHT="601" BORDER="0" ALT="그림-4" name="target_resize_image[]"> </div>
<div class="v100" onmousedown="javascript:mousehandler(this,event,'next_page_URL');"><IMG SRC="../Pictures/이죽일놈의사랑(1467).jpg" WIDTH="400" HEIGHT="533" BORDER="0" ALT="그림-5" name="target_resize_image[]"> </div>
<div></div>

<script language="JavaScript">
// HTML 로 넘어온 <img ... > 태그의 폭이 테이블폭보다 크다면 테이블폭을 적용한다.
function resize_image()
{
    var target = document.getElementsByName('target_resize_image[]');
    var image_width = parseInt(document.body.offsetWidth);//alert (image_width);
    var image_height = parseInt(document.body.offsetHeight);
	var image_wh = parseFloat(image_width / image_height);//alert(image_wh);

    for(i=0; i<target.length; i++) { 
        // 원래 사이즈를 저장해 놓는다
        target[i].tmp_width  = target[i].width;//alert(target[i].tmp_width);
        target[i].tmp_height = target[i].height;
		target[i].tmp_wh = parseFloat(target[i].width / target[i].height);//alert(target[i].tmp_wh);
        // 이미지 폭이 테이블 폭보다 크다면 테이블폭에 맞춘다
        if(target[i].tmp_wh > image_wh) {
			if(target[i].width > image_width){
				target[i].width = image_width;//alert(image_width);
				target[i].height = parseInt(image_width / target[i].tmp_wh);//alert(target[i].height);
			}
			target[i].style['margin'] = parseInt((image_height - target[i].height) / 2) + ' 0';
            //image_height = parseFloat(target[i].width / target[i].height)
            //target[i].width = image_width;
            //target[i].height = parseInt(image_width / image_height);
        }else{
			if(target[i].height > image_height) {
				target[i].height = image_height;
				target[i].width = parseInt(image_height * target[i].tmp_wh);
			}else{
				target[i].style['margin'] = parseInt((image_height - target[i].height) / 2) + ' 0';
			}
		}
    }
}
window.onload = resize_image;

//첫번째 div 뺀 나머지 div 가림
function classChange() {
  var divall = document.getElementsByTagName("div");
  var divfirst = 0;
  for (i=0;i<divall.length; i++) {
    if (divall.item(i).className == "v100"){
	  if(divfirst>=1){
      divall.item(i).style.display = "none";
      }
	  divfirst++;
	  //return false;
    }
  }
}
document.onload = document.onload;
setTimeout('classChange()',1);

//왼쪽 클릭:이전, 오른쪽 클릭:다음
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
var EnableRightClick = 0;
if(isNS) 
document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);

function mischandler(){
  if(EnableRightClick==1){ return true; }
  else {return false; }
}

function mousehandler(t,e,site){
  if(EnableRightClick==1){ return true; }
  var myevent = (isNS) ? e : event;
  var eventbutton = (isNS) ? myevent.which : myevent.button;
  if((eventbutton==1)) {//alert('left click');
    if(t.previousSibling.className == 'v100'){
      t.previousSibling.style.display = 'block';
      t.style.display = 'none';
    }else {
      alert(site);//self.location = 'http://' + site;
    }
    return false;
  }else{//alert('right click');
    if(t.nextSibling.className) {
      t.nextSibling.style.display = 'block';
      t.style.display = 'none';
    }else{//alert('right-click');
      alert(site);//self.location = 'http://' + site;
    }
    return false;
  }
}

function keyhandler(e) {
  var myevent = (isNS) ? e : window.event;
  if (myevent.keyCode==96)
    EnableRightClick = 1;
  return;
}

document.oncontextmenu = mischandler;
//document.onkeypress = keyhandler;
//document.onmousedown = mousehandler;
//document.onmouseup = mousehandler;

</script>
</BODY>
</HTML>
Top
손님213

제가 그냥 수정해보니 되는군요..Sibling

Post by 손님213 »

제가 그냥 수정해보니 되는군요..Sibling을 안썼습니다.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
body {margin:0; font-size:0.8em;}
.v100 {background-color:#000; color:#0f0; position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; text-align:center;}
.s100 {padding-left:1em; margin-top:0.5em; position:absolute; left:0; top:0; height:1.4em; font-size:1em; line-height:130%; color:#0f0;}
</style>
</HEAD>

<BODY>

<div id="menu">
 <div class=v100 onmousedown=zoom1(0,event);>
  <IMG SRC="../Pictures/0512_012828_8FNT88T1EP_1.jpg" WIDTH="1920" HEIGHT="1200" BORDER="0" ALT="" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(1,event);>
  <IMG SRC="../Pictures/fx8.jpg" WIDTH="240" HEIGHT="146" BORDER="0" ALT="" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(2,event);>
  <IMG SRC="../Pictures/sexy-1/12.jpg" WIDTH="646" HEIGHT="900" BORDER="0" ALT="" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(3,event);>
  <IMG SRC="../Pictures/11253613.jpg" WIDTH="764" HEIGHT="534" BORDER="0" ALT="" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(4,event);>
  <IMG SRC="../Pictures/051127_46(5627).jpg" WIDTH="200" HEIGHT="200" BORDER="0" ALT="" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(5,event);>
  <IMG SRC="../Pictures/sexy-2/11___________________케.jpg" WIDTH="400" HEIGHT="601" BORDER="0" ALT="그림-4" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(6,event);>
  <IMG SRC="../Pictures/이죽일놈의사랑(1467).jpg" WIDTH="400" HEIGHT="533" BORDER="0" ALT="그림-1" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(7,event);>
  <IMG SRC="../Pictures/사진051127_46(5627).jpg" WIDTH="200" HEIGHT="200" BORDER="0" ALT="그림-2" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(8,event);>
  <IMG SRC="../Pictures/sexy-2/11___________________케.jpg" WIDTH="400" HEIGHT="601" BORDER="0" ALT="그림-4" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(9,event);>
  <IMG SRC="../Pictures/이죽일놈의사랑(1467).jpg" WIDTH="400" HEIGHT="533" BORDER="0" ALT="그림-1" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(10,event);>
  <IMG SRC="../Pictures/사진051127_46(5627).jpg" WIDTH="200" HEIGHT="200" BORDER="0" ALT="그림-2" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(11,event);>
  <IMG SRC="../Pictures/sexy-2/11___________________케.jpg" WIDTH="400" HEIGHT="601" BORDER="0" ALT="그림-4" name="target_resize_image[]">
 </div>
</div>



<SCRIPT LANGUAGE="Javascript">
<!--
var site1 = '';
var site2 = '';

var isNS = (navigator.appName == "Netscape") ? 1 : 0;
var EnableRightClick = 0;
if(isNS) document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);

function mischandler(){
  if(EnableRightClick==1){ return true; }
  else {return false; }
}
document.oncontextmenu = mischandler;

function zoom1(s,e){
  if(T==0) alert('이미지 로딩 중입니다.');
  var myevent = (isNS) ? e : event;
  var eventbutton = (isNS) ? myevent.which : myevent.button;
  if(eventbutton==1){
    if(s==0) { (site1!='')?self.location='http://'+site1:alert('제일 처음 이미지입니다.'); return false;
	} else { for(var i=0;i<T;i++){ P[i].style.display=(i==s-1)?"block":"none"; } }
  }
  if((eventbutton==2)||(eventbutton==3)){
    if(s==(T-1)) { (site2!='')?self.location='http://'+site2:alert('더이상 이미지가 없습니다.'); return false; 
	} else { for(var i=0;i<T;i++){ P[i].style.display=(i==s+1)?"block":"none"; } }
  }
}

var T = 0;
function divhidden(){
    P = document.getElementById("menu").getElementsByTagName("div");
    T = P.length;
    for (var i=0;i<T;i++){
        x=i+1+".";
        if(x.length<3)x="0"+x;
        P[i].innerHTML = '<span class=s100>'+x+' / '+T+'</span>'+P[i].innerHTML;
        P[i].style.display = (i==0)?"block":"none";
    }
}

// HTML 로 넘어온 <img ... > 태그의 폭이 테이블폭보다 크다면 테이블폭을 적용한다.
function my_resize_image(){
var ns=(document.layers);
var ie=(document.all);
var w3=(document.getElementById && !ie);
if (ie){
  documentWidth  =document.body.offsetWidth;
  documentHeight =document.body.offsetHeight;
} else if (ns){
  documentWidth=window.innerWidth;
  documentHeight=window.innerHeight; 
} else if (w3){
  documentWidth=self.innerWidth;
  documentHeight=self.innerHeight;
}

var my_target = document.getElementsByName('target_resize_image[]');
var my_image_width = parseInt(documentWidth);
var my_image_height = parseInt(documentHeight);
var my_image_wh = parseFloat(my_image_width / my_image_height);

for(i=0; i<my_target.length; i++) { 
	// 원래 사이즈를 저장해 놓는다
	my_target[i].tmp_width  = my_target[i].width;
	my_target[i].tmp_height = my_target[i].height;
	my_target[i].tmp_wh = parseFloat(my_target[i].width / my_target[i].height);
	// 이미지 폭이 테이블 폭보다 크다면 테이블폭에 맞춘다
	if(my_target[i].tmp_wh > my_image_wh) {
		if(my_target[i].width > my_image_width){
			my_target[i].width = my_image_width;
			my_target[i].height = parseInt(my_image_width / my_target[i].tmp_wh);
		}
		my_target[i].style['margin'] = parseInt((my_image_height - my_target[i].height) / 2) + ' 0';
	}else{
		if(my_target[i].height > my_image_height) {
			my_target[i].height = my_image_height;
			my_target[i].width = parseInt(my_image_height * my_target[i].tmp_wh);
		}else{
			my_target[i].style['margin'] = parseInt((my_image_height - my_target[i].height) / 2) + ' 0';
		}
	}
}

}

document.onload = document.onload;
setTimeout('my_resize_image();divhidden();',1);
//-->
</script>



</BODY>
</HTML>
Top
손님213

다시 수정했습니다 몇가지 기능추가

Post by 손님213 »

다시 수정했습니다 몇가지 기능추가

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
body {margin:0; font-size:0.8em;}
.v100 {background-color:#000; color:#0f0; position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; text-align:center;}
.s100 {text-align:left; padding-left:1em; margin-top:0.5em; position:absolute; left:0; top:0; height:1.4em; font-size:1em; line-height:130%; color:#0f0;}
</style>
</HEAD>

<BODY>

<div id="menu">
 <div class=v100 onmousedown=zoom1(0,event);>
  <IMG SRC="../Pictures/0512_012828_8FNT88T1EP_1.jpg" WIDTH="1920" HEIGHT="1200" BORDER="0" ALT="" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(1,event);>
  <IMG SRC="../Pictures/fx8.jpg" WIDTH="240" HEIGHT="146" BORDER="0" ALT="" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(2,event);>
  <IMG SRC="../Pictures/sexy-1/12.jpg" WIDTH="646" HEIGHT="900" BORDER="0" ALT="" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(3,event);>
  <IMG SRC="../Pictures/11253613.jpg" WIDTH="764" HEIGHT="534" BORDER="0" ALT="" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(4,event);>
  <IMG SRC="../Pictures/051127_46(5627).jpg" WIDTH="200" HEIGHT="200" BORDER="0" ALT="" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(5,event);>
  <IMG SRC="../Pictures/sexy-2/11___________________케.jpg" WIDTH="400" HEIGHT="601" BORDER="0" ALT="그림-4" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(6,event);>
  <IMG SRC="../Pictures/이죽일놈의사랑(1467).jpg" WIDTH="400" HEIGHT="533" BORDER="0" ALT="그림-1" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(7,event);>
  <IMG SRC="../Pictures/사진051127_46(5627).jpg" WIDTH="200" HEIGHT="200" BORDER="0" ALT="그림-2" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(8,event);>
  <IMG SRC="../Pictures/sexy-2/11___________________케.jpg" WIDTH="400" HEIGHT="601" BORDER="0" ALT="그림-4" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(9,event);>
  <IMG SRC="../Pictures/이죽일놈의사랑(1467).jpg" WIDTH="400" HEIGHT="533" BORDER="0" ALT="그림-1" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(10,event);>
  <IMG SRC="../Pictures/사진051127_46(5627).jpg" WIDTH="200" HEIGHT="200" BORDER="0" ALT="그림-2" name="target_resize_image[]">
 </div>
 <div class=v100 onmousedown=zoom1(11,event);>
  <IMG SRC="../Pictures/sexy-2/11___________________케.jpg" WIDTH="400" HEIGHT="601" BORDER="0" ALT="그림-4" name="target_resize_image[]">
 </div>
</div>
<div id="view">
sdsfklsdjflsdkjl dsjlfkdjslfs dksfjdslfj
sdsfklsdjflsdkjl dsjlfkdjslfs dksfjdslfj
sdsfklsdjflsdkjl dsjlfkdjslfs dksfjdslfj
sdsfklsdjflsdkjl dsjlfkdjslfs dksfjdslfj
sdsfklsdjflsdkjl dsjlfkdjslfs dksfjdslfj
</div>


<SCRIPT LANGUAGE="Javascript">
<!--
var site1 = '';
var site2 = '';

var isNS = (navigator.appName == "Netscape") ? 1 : 0;
var EnableRightClick = 0;
if(isNS) document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);

function mischandler(){
  if(EnableRightClick==1){ return true; }
  else {return false; }
}
document.oncontextmenu = mischandler;

var EnableView = 0;
function keyhandler(e) {
  var myevent = (isNS) ? e : window.event;
  if ((EnableView==0)&&(myevent.keyCode==13)) {
    EnableView = 1;
	document.getElementById('menu').style.display = 'none';
	document.getElementById('view').style.display = 'block';
  }
  if ((EnableView==1)&&(myevent.shiftKey)&&(myevent.keyCode==13)) {
    EnableView = 0;
	document.getElementById('menu').style.display = 'block';
	document.getElementById('view').style.display = 'none';
  }
  return;
}
document.onkeypress = keyhandler;

function zoom1(s,e){
  if(T==0) alert('이미지 로딩 중입니다.');
  var myevent = (isNS) ? e : event;
  var eventbutton = (isNS) ? myevent.which : myevent.button;
  if(eventbutton==1){
    if(s==0) { (site1!='')?self.location='http://'+site1:alert('제일 처음 이미지입니다.'); return false;
	} else {
	  P[s].style.display = "none";
	  P[s-1].style.display = "block";
	}
  }
  if((eventbutton==2)||(eventbutton==3)){
    if(s==(T-1)) { (site2!='')?self.location='http://'+site2:alert('더이상 이미지가 없습니다.'); return false; 
	} else { 
	  P[s].style.display = "none";
	  P[s+1].style.display = "block";
	}
  }
}

var T = 0;
function divhidden(){
    P = document.getElementById("menu").getElementsByTagName("div");
    T = P.length;
    for (var i=0;i<T;i++){
        x=i+1+".";
        if(x.length<3)x="0"+x;
        P[i].innerHTML = '<span class=s100>'+x+' / '+T+' &nbsp; "엔터"를 누르면 글보기 화면으로 넘어감("쉬프트+엔터"를 누르면 다시 이미지 보기 화면으로 돌아옴)</span>'+P[i].innerHTML;
        P[i].style.display = (i==0)?"block":"none";
    }
}

// HTML 로 넘어온 <img ... > 태그의 폭이 테이블폭보다 크다면 테이블폭을 적용한다.
function my_resize_image(){
var ns=(document.layers);
var ie=(document.all);
var w3=(document.getElementById && !ie);
if (ie){
  documentWidth  =document.body.offsetWidth;
  documentHeight =document.body.offsetHeight;
} else if (ns){
  documentWidth=window.innerWidth;
  documentHeight=window.innerHeight; 
} else if (w3){
  documentWidth=self.innerWidth;
  documentHeight=self.innerHeight;
}

var my_target = document.getElementsByName('target_resize_image[]');
var my_image_width = parseInt(documentWidth);
var my_image_height = parseInt(documentHeight);
var my_image_wh = parseFloat(my_image_width / my_image_height);

for(i=0; i<my_target.length; i++) { 
	// 원래 사이즈를 저장해 놓는다
	my_target[i].tmp_width  = my_target[i].width;
	my_target[i].tmp_height = my_target[i].height;
	my_target[i].tmp_wh = parseFloat(my_target[i].width / my_target[i].height);
	// 이미지 폭이 테이블 폭보다 크다면 테이블폭에 맞춘다
	if(my_target[i].tmp_wh > my_image_wh) {
		if(my_target[i].width > my_image_width){
			my_target[i].width = my_image_width;
			my_target[i].height = parseInt(my_image_width / my_target[i].tmp_wh);
		}
		my_target[i].style['margin'] = parseInt((my_image_height - my_target[i].height) / 2) + ' 0';
	}else{
		if(my_target[i].height > my_image_height) {
			my_target[i].height = my_image_height;
			my_target[i].width = parseInt(my_image_height * my_target[i].tmp_wh);
		}else{
			my_target[i].style['margin'] = parseInt((my_image_height - my_target[i].height) / 2) + ' 0';
		}
	}
}

}

document.onload = document.onload;
setTimeout('my_resize_image();divhidden();',1);
//-->
</script>



</BODY>
</HTML>
Top
Post Reply

Return to “Mozilla 웹 표준 포럼”



Who is online

Users browsing this forum: Bing [Bot] and 0 guests