​오픈마켓 새창 띄우기 소스 - 아이프레임(iframe) 활용법

[ 몽상디자인의 HTML 배우기 ]

 

 

지마켓, 옥션에서 상세페이지 이미지를 클릭하면 새창이 뜨게 하는 방법과

11번가에서 아이프레임을 활용해서 새창을 띄우는 방법을 알아보겠습니다.

 

 

★ 새창 띄우는  HTML 소스 ★

onmouseover="this.src=' 마우스 올렸을때 보이는 이미지'" onmouseout="this.src='링크 걸 이미지'" border="0">

 

 

★ 아이프레임 소스 ★

 

 

 

이베이 무료이미지호스팅을 이용한 새창 띄우기

 

01. 상세이미지와 새창 이미지 만들기

 

새창 띄우기를 실행하기 전에 상세페이지 이미지와 이미지를 클릭해서 새창이 뜨면 보여지는 상세이미지가 별도로 분리되어 있어야 합니다. 제작한 이미지들은 사이즈에 맞게 만들어서 이베이 무료호스팅 계정에 올려놓습니다.

 

02. '클릭하면 보여지는 상세이미지.html 만들기'

 

새창이 뜨면 보여지는 이미지를 htm, 또는 html 파일로 만들어야 합니다.

메모장에서 아래 소스를 넣고, 붉은 색으로 된 이미지 주소와 가로, 세로 사이즈를 바꾸어줍니다.

메모장에서 저장할 때는 모든 파일로 하고, 파일 뒤에 확장자(.html)를 붙여줍니다.

​

001.htm 파일

 

​

 

 

 

 

 

 

 

 

 

 

 

새창 이미지 파일을 '001.htm'로 저장했습니다. 이런 식으로 다른 파일도 002.htm, 003.htm.... 이런식으로 구분하기 편하게 파일이름을 만들었습니다.

 

​03. 새창 띄우는 HTML 소스 만들기

​

위에 새창 ​띄우기 소스를 참고해서 이미지 주소를 넣으면 됩니다.

첫번째는 02번에서 만든 '클릭하면 보여지는 상세이미지.html'주소를 넣고, 이미지 사이즈를 기입합니다.

두번째는 일반적으로 보여지는 이미지 주소를 넣습니다. 마우스 오버와 아웃 기능을 사용하지 않는다면 제거해도 됩니다.

저는 우선 같은 이미지를 넣었습니다. ​

​

​iframe001.htm 파일

​

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

파일명은 iframe001.htm으로 저장했습니다.

 

아래와 같이 'image_001'이라는 이미지를 클릭하면 '001.htm' 파일이 열리는 형식입니다.

지마켓, 옥션에서 아이프레임 적용이 잘 되지 않으면 새창 띄우는 HTML 소스만으로 상세페이지를 구성하면 됩니다.

 

 

 

 

 

 

​04. 아이프레임으로 새창 띄우기 

​

미리 만든 iframe001.htm, iframe002.htm.... 등 새창 띄우기 소스가 들어있는 파일을 차례대로 아이프레임 소스에 걸어주면 됩니다.

 

​

​