반응형
|
자바스크립트(Javascript) 에디터 박스에 링크된 이미지 URL 정보출력하기 |
|
개발환경 : window 7 64bit, Chrome 30.2 |
이미지를 클릭하게 되면 텍스트 상자에 해당하는 URL 이
표시 되게 된다. 배너, 로고, 그래픽등 다른사람이 참고
하고자 할 때 주소를 나타내주면 복사해서 사용하기
편할 것이다.
스크립트 함수는 다음과 같다. 이 함수에 넘기는 파라미터 값은
this.src 이다. This 객체는 <img> 객체가 되고 src 는 그 주소값이
될 것이다. onMouseDown="showAddress(this.src)" 같이 마우스를
클릭했을 때 넘기게 되는 것이다.
넘어온 이미지 주소값을 텍스트 객체인 document.Which.Where.value
에 넣고 있다.
function showAddress(What){
if (isReady){
document.Which.Where.value = What;
document.Which.Where.focus();
document.Which.Where.select();
}else{
alert("This page is not fully loaded yet...\nPlease wait for the page to finish loading.");
}
}
전체 소스는 다음과 같다.
<HEAD>
<script>
function selectCode(f){
document.forms[f].elements[0].focus();
document.forms[f].elements[0].select();
}
</script>
<script language="JavaScript">
var isReady = false;
function showAddress(What){
if (isReady){
document.Which.Where.value = What;
document.Which.Where.focus();
document.Which.Where.select();
}else{
alert("This page is not fully loaded yet...\nPlease wait for the page to finish loading.");
}
}
function clearAddress(){
if (isReady){
document.Which.Where.value = '';
}else{
alert("This page is not fully loaded yet...\nPlease wait for the page to finish loading.");
}
}
</script>
</HEAD>
<BODY onLoad="isReady=true">
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#6E6650">
<tr>
<td>
<table border="0" cellpadding="10" cellspacing="0" bgcolor="#282828" background="main.bg.dots.gif" width="608">
<tr>
<td width="100%" align="center">
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#6E6650">
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" bgcolor="#000000">
<tr>
<td bgcolor="#000000" align="center">
<img src="slideshow1_3.jpg"
width="130"
height="130"
border="0"
onMouseDown="showAddress(this.src)">
</td>
<td bgcolor="#000000" align="center">
<img src="autosize_saturn.jpg"
width="240"
height="99"
border="0"
onMouseDown="showAddress(this.src)">
</td>
<td bgcolor="#000000" align="center">
<img src="Image007.jpg"
width="130"
height="104"
border="0"
onMouseDown="showAddress(this.src)">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="7" cellspacing="0" bgcolor="#000000" background="main.bg.dots.gif">
<tr>
<td align="center" valign="top">
<font face="Arial" size="2" color="#00FF00">
<img border="0" src="main.1x1.trans.gif" width="1" height="4"><br>
Image URL:
</font>
</td>
<td align="center" valign="top">
<form name="Which">
<input type="text" size="60" name="Where">
</form>
</td>
<td align="center" valign="top">
<font face="Arial" size="1">
<a href="#" onClick="clearAddress()" class="js">
Clear</a></font>
</td>
</tr>
</table>
반응형
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트(Javascript) print 함수를 이용해 웹페이지 인쇄하기 (0) | 2014.10.14 |
|---|---|
| 자바스크립트(Javascript) 라벨기능을 사용하여 반복문의 흐름 제어하기 (0) | 2014.09.29 |
| 자바스크립트(Javascript) IF… Else 구분 사용하기 (0) | 2014.09.22 |
| 자바스크립트(javascript) for 반복문 사용법 (0) | 2014.09.20 |
| 자바스크립트(Javascript) 속도관계 변환, 시속, 분속, 초속, 피트, 노트 계산기 (0) | 2014.08.25 |
| 자바스크립트(Javascript) 입력된 문자열을 암호화 복호화 하기 (1) | 2014.08.24 |
| 크롬에서 자바스크립트(Javascript) 코딩하기 (2) | 2014.08.06 |
| Jquery 로 tab(탭) 구현하기 (5) | 2014.06.08 |
