정보는 공유되어야 한다

이미지 맵(image map)이 뭘까요? 이미지 맵이란 이미지를 링크하는 방법 중 하나로 이미지의 특정 영역에만 링크를 할 수 있는 기능입니다. 오늘은 이 이미지 맵을 이용한 새창띄우기를 하려고 합니다. 어려운게 아니니 쉽게 접근할 수 있을겁니다. 나모웹에디터의 기능중에 하나인 이미지 맵은 "하나의 이미지에 여러개의 링크"를 걸때 사용합니다. 각각 개별이미지로 만들어 링크하는 것보다 시간이 많이 절약됩니다. 쇼핑몰,오픈마켓,옥션,지마켓,11번가,새창띄우기,팝업 아래는 샘플 이미지구요.. 미리보기 먼저 나모웹에디터를 실행시켜 이미지를 불러옵니다. 아래 그림과 같이 빈문서에서 마우스 오른쪽버튼을 눌러 "그림 넣기(I)"를 선택해서 불러오면 됩니다. 한개의 통 이미지에 그림과 같이 새창 링크1, 새창 링크2 ..

새창띄우기 두번째 방법입니다. html에서 자바스크립트로 새창을 띄우려면 window.open 이라는 명령어를 줍니다. 아래도 마찬가지로 window.open을 이용한 새창띄우기 소스 입니다. 새창의 크기를 가로 800픽셀, 세로 1,000픽셀, 스크롤바와 주소창이 보이게 하려면 아래와 같습니다. 링크를 클릭하면 새창이 뜨게하는 방법 새창띄우기 웹접근성 평가기준에 의거 onclick (마우스 이벤트) 와 onkeypress (키보드 이벤트)를 함께 사용해야힙니다.(중요) 중간에 "small"은 상황에 맞게 변경 가능하며, 문자열속성으로 글씨를 작게합니다. 그렇다면 이미지에 링크를 걸어 새창을 띄우려면 어떻게 해야될까요? 이미지를 넣는 방법은 입니다. 이 소스를 위 소스 마지막줄에 새창띄우기 글씨자리에 넣..

옥션,지마켓에서 제품을 클릭하면 메뉴바나 상태바 없이 새창이 뜨는걸 본적이 있을겁니다. 가로세로 사이즈도 일정하구요. 단순히 링크만으로는 그렇게 할 수 없겠죠.. 오픈마켓 새창띄우기는 단순 링크가 아닌 자바스크립트를 사용하여 새창을 띄웁니다. 그렇다면 자바스크립트란 뭘까요? 자바스크립트는 객체 지향 스크립트 언어로 HTML문서 사이에 직접 들어가 사용자가 마우스를 클릭하거나, 키보드를 입력하는 것과 같은작업을 즉시 처리할 수 있도록 도와주는 언어입니다. 예를들어 회원가입이 끝나면 나타나는 "회원가입을 축하합니다!" 라는 작은 창이라던지, 비밀번호를 잘못 입력했을때 "비밀번호가 틀렸습니다."의 문구등이 자바스크립트로 만들어졌습니다. 자바스크립트의 여러가지 용도가 있겠지만.. 여기서는 자바스크립트를 이용한 ..

위 두개의 이미지에 마우스를 갖다 대면 이미지가 바뀌게끔 만드는 방법 입니다. 두개의 이미지가 한개의 이미지처럼 보이면서 마우스의 움직임에 따라 서로 교차되면서 보여지는 효과 입니다. 먼저 1번 이미지와 2번 이미지를 준비합니다. 이미지 제작시 "1번 이미지"와 "2번 이미지"의 사이즈는 같게 만들어 줍니다. 서로 교차되면서 보여지기 때문에 사이즈가 다르면 이상하겠죠?? 이미지를 롤오버하기 위해 보통 자바스크립트를 쓰게 되는데, 자바스크립트를 사용하지 않고 깔끔하게 이미지 태그만으로 이미지를 롤오버 할 수 있습니다. 실제 작성시 사용되는 소스는 다음과 같습니다. 위 소스처럼 img 태그에 name 를(을) 정하고 링크태그에서 onMouseOver, onMouseOut을 호출하면 하면 됩니다. 새창으로 띄..