LINUX-HTML TIPS


  (2011-07-16 11:56:33, Hit : 1986, Vote : 512
 j/s로 href 흉내내기(2)

정말 힘든 시간이었다. a:visited 의 색을 변화시키는 것인데 여러방법을 시도하다가 결국 쿠키를 쓸 수 밖에 없었는데
(1)이 자바스크립트 쿠키는 사용해보지 않아서(주로 PHP cookie 사용) 이번에 큰 고생을 했다.
    현재 익스플로러 8.0에서 가능하나 구글 크롬에서는 안된다. 이를 모르고(크롬을 사용... HTML 표준화를 위해) 고생만 했다. 크롬에서 쿠키르 허용해도 되지 않는다. 이는 다음에 알아보기로하고....
(2)getElementsByName() 은 크롬에선 되나 익스플로러에선 안된다. 이것도 고생 고생... ByName도 HTML-DOM 표준으로 알고 있다.
(3)따라서 할 수 없이 익스플로러 8.0에서 getElementsByTagName()을 사용하여 getElementsByClassName() 의 함수를 사용하였다(타 사이트에서 찾아온).
(4) 클릭하면 무조건 쿠키를 만들었는데(a:active 확인 용) 이미 만들어졌으면 지나가도록 하는 것이 좋겠다)

(5)크롬 웹브라우저는 로칼에선 쿠키가 안된다. 즉, 실제 웹서버에 올려놓고 시행하면 쿠키 시험을 할 수 있다. 이걸 알려주는 데가 없다.

<html>
<head>
<style type="text/css">
.href_m {
color:blue;
text-decoration:underline;
}
</style>
<script>
window.onload = function() {
visited_color();
}
function visited_color() {
   var v_c=getElementsByClassName("href_m");
   for (var i=0;i<=v_c.length;i++) {
   var source=v_c[i].getAttribute("src");
   var c_name=getCookie(source);
      if (c_name==source)  {
        v_c[i].style.color="#880088";
      }
  }
}
function getElementsByClassName(classname, node)  {
   if(!node) node = document.getElementsByTagName("body")[0];
   var a = [];
   var re = new RegExp('\\b' + classname + '\\b');
   var els = node.getElementsByTagName("*");
   for(var i=0,j=els.length; i<j; i++)
       if(re.test(els[i].className))a.push(els[i]);
   return a;
}
function mover(t) {
t.style.cursor="hand";
var source=t.getAttribute("src");
window.status=source;}
function mout(t) {
window.status="";
}
function oclick(t) {
var source=t.getAttribute("src");
setCookie(source,source,30);
window.open(source,"_self");
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
  {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
var aaa=c_name + "=" + c_value;
}
</script>
</head>
<body>
<a href="http://www.earthlove.co.kr">지구사랑</a>
<br><br>
<div class="href_m" src="http://www.earthlove.co.kr" onmouseover="mover(this)" onmouseout="mout(this)" onclick="oclick(this)">지구사랑
</div>
</body>
</html>

document.getElementsByname() 은 W3 표준이며 거의 모든 브라우저에서 잘 동작된다. 따라서 위의 getElementByClassName() 함수 대신에 이를 바로 쓰면 편하다. 물론 name="href_m"을 넣어줘야 한다.

function visited_color() {

var v_c=document.getElementsByName("href_m");
for (var i=0;i<=v_c.length;i++) {
   var source=v_c[i].getAttribute("src");

   var cook_v=getCookie(source);
   if (cook_v=="y")
     {
        v_c[i].style.color="#880088";
     }
}  

}




JavaScript로 HTML IMG 흉내내기
HTML href 를 JavaScript 로 흉내내기(mimic)

Copyright 1999-2019 Zeroboard / skin by zero