반응형

오픈마켓 새창띄우기 8

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

나모웹에디터를 이용한 새창띄우기 기초인 롤오버 이미지 만들기입니다. 먼저 아래와 같이 두개의 이미지를 만듭니다. 첫번째 이미지를 1번, 두번째 이미지를 2번이라 칭하겠습니다. 위와 같이 두개의 이미지를 만들었다면 나모웹에디터를 실행합니다. 여기부터는 나모웹에디터에서 롤오버이지 만드는 방법입니다. 아래 그림과같이 새페이지를 만들고 오른쪽마우스를 클릭하여 그림 넣기(I)를 클릭합니다. 그림 넣기를 클릭하면 아래와같이 창이 뜹니다. 창이 뜨면 그림경로에 1번이미지(기본적으로 보여질 이미지)를 넣고 하단에 롤오버 만들기(R)를 클릭합니다. 롤오버 만들기 버튼을 클릭하면 또다시 새창이 뜨는데 새창이 뜨면 일반적으로 보이는 그림경로에 1번 이미지를 넣고 마우스를 올리면 보이는 그림의 경로에 2번 이미지를 넣어줍니다..

오픈마켓 정말 간단한 롤오버 이미지 만들기

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

오픈마켓 외부링크 차단, HTML, 새창띄우기, 상세페이지, 아이프레임, 팝업

외부링크가 차단된 오픈마켓에서 새창띄우기 새창띄우기는 보통 제품이 많아서 소비자들에게 좀더 효율적으로 보여주기 위한 방법입니다. 예를들어 30개의 제품이 있는데 이 30개 제품의 상세페이지를 그대로 나열한다면 소비자들은 무한로딩에 인내심을 테스트해야 되고 컴퓨터 사양이 낮으면 페이지가 열리다가 멈추는 지경까지 오게됩니다.;; 당연히 페이지는 버벅이게되고 소비자는 창을 닫거나 뒤로가기 버튼을 누르겠죠.. 그래서 대략적인 상품정보는 보여주되 좀더 자세한 상품정보는 클릭하면 볼 수 있게 만들면 판매자 입장에서는 트래픽이 적게 먹어 좋고 소비자는 좀더 쾌적하게 쇼핑을 즐길 수 있어 좋습니다. 그냥 새창띄우기는 간단합니다. 아래와 같이 이미지에 링크 속성을 "_blank"로 주면 됩니다. 여기서 "제품이미지주소...

반응형