웹마스터 팁

  2. Support
  3. 웹마스터 팁

1.0.3 오토링크(autolink) 디자인 수정본

2008.05.18 18:35

위드파트너

링크에 마우스를 올리면 새창, 현재창 선택할 수 있도록 뜨는, 애드온 오토링크(autolink) 디자인을 약간 변경하였습니다.
필요하신 분들은 참고해서 사용하세요.
(매번 제로보드에서 도움만 받아가서 부끄러움을 무릅쓰고 소스를 약간 수정해서 올려봅니다)

* 적용예제링크. http://adsenser.co.kr/zbxe/42028



    <script type="text/javascript">
    // <![CDATA[
        var url_regx = new RegExp("(http|https|ftp|news)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)","gi");  function replaceHrefLink(obj) {  while(obj) {  if(obj.nodeType == 3) {  var text = obj.data;  if(url_regx.test(text)) {  var html = text.replace(url_regx,"<a href=\"$1://$2\" onclick=\"window.open(this.href); return false;\">$1://$2</a>");  var dummy = xCreateElement('span');  xInnerHtml(dummy, html);  obj.parentNode.insertBefore(dummy, obj);  obj.parentNode.removeChild(obj);  }  }  if(obj.firstChild) replaceHrefLink(obj.firstChild);  obj = obj.nextSibling;  }  } function addUrlLink() {   var objs = xGetElementsByClassName('xe_content');  if(objs.length<1) return;  for(var i=0;i<objs.length;i++) {   replaceHrefLink(objs[i].firstChild);  xAddEventListener(objs[i], 'mouseover', showUrlOpener);  }  }  function showUrlOpener(e) {   var evt = new xEvent(e);  var obj = evt.target;  var layer = xGetElementById('zbXEUrlOpener');  if(!layer) {   layer = xCreateElement('div');  layer.style.position = 'absolute'+ '+ ';  layer.style.border = '1px solid #666';  layer.style.backgroundColor = '#cf6';  layer.style.padding = '5px';  layer.style.visibility = 'hidden';  layer.style.lineHeight = '1.6';  layer.setAttribute('id','zbXEUrlOpener');  document.body.appendChild(layer);  }  if(obj && obj.nodeName == 'A' && obj.getAttribute('href') && !/#/.test(obj.getAttribute('href'))) {   var href = obj.getAttribute('href');  if(href.length>40) href = href.substr(0,40)+'...';  var html = ''+   '<a href="'+obj.getAttribute('href')+'" onclick="window.open(this.href); return false;" style="text-decoration:none; color:#000; font-weight:bold">'+href+' <img src=../../img/new_window.gif style="vertical-align: middle"></a> &nbsp;<img src=../../img/gray_line.gif style="vertical-align: middle"> '+  '<a href="'+obj.getAttribute('href')+'" style="text-decoration:none; color:#555;">{$open_cur_window} <img src=../../img/cur_window.gif style="vertical-align: middle"></a>'+   '';  xInnerHtml(layer, html);  xLeft(layer, evt.pageX-20);  xTop(layer, evt.pageY-10);  layer.style.visibility = 'visible';  } else {   layer.style.visibility = 'hidden';  }  }   xAddEventListener(window,'load', addUrlLink);
    // ]]>
    </script>

원본 소스에서 볼드체 부분을 바꾸었고,
그리고 노란색 배경 부분은 전체적으로 바뀌었으니 원본 소스와 비교하여 통째로 대체해주시면 되겠습니다.
수정에 사용된 아이콘을 다운로드 받아서 본인 계정에 업로드 한 후 사용해주세요.

p.s> 수정본이 본인의 사이트 디자인과 어울리지 않을 수도 있으니 적절히 변경하여 사용해주시면 더욱 좋겠죠.^^
태그 연관 글
  1. [2015/09/19] 묻고답하기 AutoLink 애드온에서 새창으로 열기 어떻게 하나요? by 가을풍경 *3
  2. [2015/09/07] 묻고답하기 misol's mobile board skin에서 이미지 확대 by yool
  3. [2015/03/23] 포럼 이메일 주소 제공자를 제한하는 모듈 1개, 랜덤 게시글 애드온 1개 by misol *4
  4. [2014/05/23] 묻고답하기 1.7.4 부터 트랙백 엮인글 차단 애드온이 필요없다고 되어 있던데... by nado0124 *2
  5. [2014/04/15] 묻고답하기 애드온 설정파일을 작성할 때 by 애니즌 *2
, , , 이 게시물을
좋아요(+3)
목록
제목 글쓴이 날짜
인증메일 안가는 문제- 완전 간단 해결 꿈섬 2014.07.27
짧은 주소를 가능 하게 하는 서버(아파치, httpd) 설정 [3] 꿈섬 2014.07.27
사이트 디자인 설정에서 레이아웃 저장이 안될시 고치는 방법 [1] LoteM대한천자 2014.07.28
MySQL Replication 사용중 Binary Log 삭제 하기 박희망찬삶 2014.07.29
Bind 설정하기 뚱녀파파 2014.07.30
자주 쓰지 않지만, 알아두면 좋은 명령어들.. SIN 2014.08.06
비밀번호 변경시 비밀번호 재입력 생략하기 Summer 2014.08.06
특정 도메인 가입 않되게 (인증메일 관련) 컴박살 2014.08.06
XE 설치 시 안전한 폴더권한 설정하기 (chown 사용) 컴토피아 2014.08.07
코어 수정하지 않고 게시물 첨부 파일 사용제한 Happyphp 2014.08.07
UX를 편리하게 하기 위한 7 CSS 팁 gamgak2895 2014.08.07
첨부파일 제한 등을 1M 이하인 K 단위로 제한할 수 있게 설정 [1] sejin7940 2014.08.07
룰셋을 폼 필터처럼 Ajax로 사용하기 Lansi 2014.08.08
카카오톡으로 보내기(깔끔한 뷰) [4] seyriz 2014.08.11
F12개발자도구를 열었을때 IE버젼이 낮게 나온다면 pezex 2014.08.11
한글지원하는 글자수 자르기 함수 [3] pezex 2014.08.11
관리자설정-> 관리자 메뉴설정 에서 삭제가 안 되는 현상 수정하는 방법 [1] sejin7940 2014.08.11
외부 페이지 작업시 페이징 작업 함수 Happyphp 2014.08.12
메뉴에 새 글 표시 모듈 사용 시 new 아이콘이 보이지 않는 버그 수정 [8] 퍼니엑스이 2014.08.12
게시판의 관리자가 최고관리자의 글을 지울 수 없도록 하기 [1] file BJ람보 2014.08.18
태그 쓰기