Egloos 728x90

구글 애널리틱스


2010/05/06 14:56

[ Java Script ] <img>와 Image ▷ Java Script



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> &lt;img&gt;와 Image </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="별소리">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
 //## 현재 이미지 정보
 function showCurrentImage()
 {
  var v_img = document.images['currentImage'];
  var v_text = "현재 이미지"
   + "\n  width : "+ v_img.width
   + "\n  height : "+ v_img.height
   + "\n  src : "+ v_img.src;
  alert(v_text);
 }


 //## 새 Image 개체 생성
 function getNewImage()
 {
  var v_img = new Image("333", "222"); //width와 height를 지정하지 않으면 그 이미지 자체의 크기
  v_img.src = "http://pds13.egloos.com/pds/200810/25/10/e0045010_49026d131c2ca.gif";
  var v_text = "새 이미지"
   + "\n  width : "+ v_img.width
   + "\n  height : "+ v_img.height
   + "\n  src : "+ v_img.src;
  alert(v_text);

  return v_img;
 }


 //## 새로 생성한 Image 개체로 바꾸기
 function changeImage()
 {
  var v_img = document.images['currentImage'];

  var v_img_new = getNewImage();

  v_img.width = v_img_new.width;
  v_img.height = v_img_new.height;
  v_img.src = v_img_new.src;
 }


 //## 새로 생성한 Image 개체 쓰기
 function writeImage()
 {
  var v_img = document.images['currentImage'];

  var v_img_new = getNewImage();

  document.getElementById("newImageSpace").innerHTML = v_img_new.outerHTML;
 }
//-->
</SCRIPT>
</HEAD>

<BODY>

<button onclick="showCurrentImage();">현재 이미지 정보 보기</button>&nbsp;
<button onclick="changeImage();">이미지 개체 바꾸기</button>&nbsp;
<button onclick="writeImage();">이미지 개체 쓰기</button><br/>

<IMG name="currentImage" src = "http://pds15.egloos.com/pds/200912/11/10/e0045010_4b212a6387717.jpg"/>

<div id="newImageSpace"></div>

덧붙여서 IE에서는 이미지 파일(bmp, gif, jpg, jpeg, png, xbm) 뿐만 아니라, avi, emf, mov, mpg, mpeg, wmf도 Image 개체 생성으로 사용 가능하다고 합니다.<br/>
※ 참고 : <a href="http://koxo.com/" target="_blank">KoXo 자바스크립트 매뉴얼</a>

</BODY>
</HTML>


img_Image.html

  그런데 솔직히 말해서 이미지는 <img src="">만 쓸 줄 알면 그 이상의 정보는 그다지 쓸 일이 없죠. 저 위의 코드처럼 복잡한 스크립트 써서 이미지 출력하는 건 말 그대로 시간과 기력의 낭비일 뿐...

  하지만 저런 방법을 알아야 하는 이유는..., 이미지 출력보다는 다른 꽁수를 쓰기 위해서인 경우가 많아서겠죠....


덧글

댓글 입력 영역

애드센스336x280

알라딘TTB-Egloos(하단-일반)



이 이글루를 링크한 사람 (블랙)

36