오픈마켓 나모웹에디터를 이용한 롤오버 이미지 만들기

나모웹에디터를 이용한 새창띄우기 기초인 롤오버 이미지 만들기입니다.
먼저 아래와 같이 두개의 이미지를 만듭니다.
첫번째 이미지를 1번, 두번째 이미지를 2번이라 칭하겠습니다.

위와 같이 두개의 이미지를 만들었다면 나모웹에디터를 실행합니다.

여기부터는 나모웹에디터에서 롤오버이지 만드는 방법입니다.
아래 그림과같이 새페이지를 만들고 오른쪽마우스를 클릭하여 그림 넣기(I)를 클릭합니다.

그림 넣기를 클릭하면 아래와같이 창이 뜹니다. 창이 뜨면 그림경로에 1번이미지(기본적으로 보여질 이미지)를 넣고 하단에 롤오버 만들기(R)를 클릭합니다.

롤오버 만들기 버튼을 클릭하면 또다시 새창이 뜨는데 새창이 뜨면 일반적으로 보이는 그림경로에 1번 이미지를 넣고 마우스를 올리면 보이는 그림의 경로에 2번 이미지를 넣어줍니다.

이미지를 모두 넣고 마침 버튼을 눌러주면 아래와 같이 이미지가 나타납니다.
여기까지 했다면 롤오버 이미지는 완성입니다.
그러나 롤오버 이미지를 클릭하면 넘어갈 수 있는 링크도 만들어야 겠지요.

롤오버될 이미지를 클릭하고 마우스 오른쪽 버튼을 눌러 하이퍼링크 속성(H)을 클릭합니다.

하이퍼링크 속성을 클릭하면 아래와같이 창이 뜨는데
주소(URL)에 클릭했을때 넘어가는 페이지 주소를 적어줍니다.

마지막으로 확인버튼을 누르면 롤오버 이미지에 링크까지 모든 작업이 끝났습니다.
하단에 미리보기를 클릭해서 롤오버와 링크가 제대로 됐는지 확인합니다.

미리보기

적용예제 보기
마우스를 갖다 대보세요~

[새창띄우기 기초] 오픈마켓 외부링크 차단, HTML, 새창띄우기, 상세페이지, 아이프레임, 팝업
[새창띄우기 기초] 오픈마켓 정말 간단한 롤오버 이미지 만들기
[새창띄우기 기초] 오픈마켓 옥션,G마켓,11번가 아이프레임(iframe) 높이(세로) 자동조절
[새창띄우기 기초] 자바스크립트를 이용한 오픈마켓 html 새창띄우기(window.open) 1탄
[새창띄우기 기초] 자바스크립트를 이용한 오픈마켓 html 새창띄우기(window.open) 2탄