웹마스터 팁
1.0.3 오토링크(autolink) 디자인 수정본
2008.05.18 18:35
필요하신 분들은 참고해서 사용하세요.
(매번 제로보드에서 도움만 받아가서 부끄러움을 무릅쓰고 소스를 약간 수정해서 올려봅니다)
* 적용예제링크. 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> <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> 수정본이 본인의 사이트 디자인과 어울리지 않을 수도 있으니 적절히 변경하여 사용해주시면 더욱 좋겠죠.^^
- [2015/09/19] 묻고답하기 AutoLink 애드온에서 새창으로 열기 어떻게 하나요? *3
- [2015/09/07] 묻고답하기 misol's mobile board skin에서 이미지 확대
- [2015/03/23] 포럼 이메일 주소 제공자를 제한하는 모듈 1개, 랜덤 게시글 애드온 1개 *4
- [2014/05/23] 묻고답하기 1.7.4 부터 트랙백 엮인글 차단 애드온이 필요없다고 되어 있던데... *2
-
[2014/04/15]
묻고답하기
애드온 설정파일을 작성할 때
*2
댓글 6
-
sugarkane
2008.05.18 23:39
-
여초
2008.05.19 13:12
오우~!
굿입니다 -
띵야
2008.05.20 13:46
이런 건 바로바로 추천해 줘야 하거든요...^^
사용자들의 의견을 물어 지금의 디자인을 이걸로 바꾸는 걸 고려해봐도 좋을 듯한데요...
(저는 개인적으로 이 쪽이 더 마음에 들기 때문에...^^) -
winter548
2008.05.22 08:26
경로와 대상 파일이 적혀있지 않아서 왕초보인 저같은 경우에는 적용하기 어렵습니다.
경로와 대상 파일을 명시해주시면 감사하겠습니다... -
SM3
2008.05.27 16:58
파일위치 : root/addons/autolink/autolink.addon.php
해당 파일 소스를 보시면 아래와 비슷한 부분이 있습니다. 그걸 아래거로 대체하세요.
그리고 이미지 파일은 같은 폴더에 업로드 하시면 됩니다.
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=./addons/autolink/new_window.gif style="vertical-align: middle"></a> <img src=./addons/autolink/gray_line.gif style="vertical-align: middle"> '+ '<a href="'+obj.getAttribute('href')+'" style="text-decoration:none; color:#555;">{$open_cur_window} <img src=./addons/autolink/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); -
나이스
2008.05.22 14:20
짱입니다 그런데 싸이트 썸네일도 뜨면 금상첨화일듯
좋군요. 추천합니다. ^^