테스트 url : http://sangmuni.hosting.paran.com/0507/rollover.html
JAVASCRIPT source : http://sangmuni.hosting.paran.com/js/rollover.js

막상 만들고 나니... 그다지 필요없을것 같은 XML 연동임..

XML의 DTD도 한번 만들어볼까? 아직 안만듬..

name 에는 HTML에서 img markup 에 들어가는 attribute중 name의 값을 적는다.
ex) <img name="rollover" src="url">   여기서는 rollover임.
url은 디렉토리나 URL을 적는다.. 보통 이미지는 한곳에 모으기 마련이므로, 디렉토리를 따로 분류하여 적기 쉽게 했다.
ex) ../image/box1.jpg  여기서는 ../image/ 이다. 또는 http://sangmuni.hosting.paran.com/image 등등..
<images> 안에는 한쌍의 <out>과<over>가 들어간다.
<out>는 마우스가 밖으로 나왔을때 보여지는 이미지의 파일명
<over>는 마우스가 그림위로 올라왔으때 보여지는 이미지의 파일명.

DTD를 만들어 볼까?
<!ELEMENT rollover (name,url,images)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT url (#PCDATA)>
<!ELEMENT images (out,over)>
<!ELEMENT out (#PCDATA)>
<!ELEMENT over (#PCDATA)>

rollover.xml
-------------------
<rollover>
 <name>rollover</name>
 <url>../image/</url>
 <images>
  <out>box1.jpg</out>
  <over>box2.jpg</over>  
 </images>
 <images>
  <out>box1.jpg</out>
  <over>box2.jpg</over>  
 </images><images>
  <out>box1.jpg</out>
  <over>box2.jpg</over>  
 </images>
</rollover>
--------------------

HTML 안에서
롤오버를 하고자 할땐.. 그냥 <img name="rollover">만 적어줘도 된다.
어차피 out이미지가 기본 이미지임으로, src를 자동으로 out 이미지로 수정해줬다.
여기서 name attribute는 xml의 name markup 에 들어있는 값과 일치해야한다.

작동은 IE와 FF에서는 정상작도하나, 크롬과 사파리는 작동하지 않는다.
xml.load라는 function이 존재하지 않는다.. 검색해보자..

HTML 소스는 위의 테스트 사이트에 들어가서 오른쪽 버튼 누르고 소스보기~

'SOURCE' 카테고리의 다른 글

이미지 슬라이더..  (0) 2011.05.03
Posted by sangmooni
,