쇼핑몰 이미지 클릭하면 해당 페이지로 넘어가는 html 소스
쇼핑몰을 운영하다 보면 배너를 많이 쓰시죠. 보통 배너는 특별한 이벤트가 있을 때 많이 사용하기 때문에 배너 화면만 사용하는 경우는 거의 없습니다. 배너를 통해서 이벤트 페이지로 이동하게 만드는 것이 목적이죠. 배너를 클릭해서 이벤트 페이지로 넘어가게 하기 위해서는 따로 html 작업이 필요합니다. 알면 간단한 쇼핑몰에서 배너 이미지를 클릭하면 원하는 페이지로 넘어가게 하는 html 소스를 알려 드립니다.
이미지를 클릭해서 이동하는 방법은 2가지가 있습니다.
1. html로 만드는 방법
<center>
<a href="http://이벤트 페이지" target="_blank"><img src="http://배너 이미지 경로.jpg" border="0"></a>
</center>위 아래에 있는 center 코드는 배너를 가운데로 정렬시켜주는 역할을 합니다.
"이벤트 페이지" 란에 페이지 주소를 적어주시면 됩니다.
target은 클릭했을 때 창을 띄우는 방식을 말하는데 _blank 를 주면 새 창으로 띄워집니다. (참고로 아무것도 안 적거나 self로 바꿔주면 새 창 말고 보고 있는 화면이 바뀌게 됩니다.)
"배너 이미지 경로"에 이미지가 들어있는 ftp 경로를 적어주시면 됩니다.
2. 자바스크립트로 만드는 방법
<center>
<img onmouseup="window.open('http://이벤트 페이지')" src="http://배너 이미지 경로.jpg" style="cursor:pointer;">
</center>자바스크립트로 만들면 더 간단합니다. 위 코드 내에 적혀있는 "이벤트 페이지"에 이벤트 페이지 링크를 넣고 "배너 이미지 경로"에 배너 이미지 경로를 적어 넣으면 끝납니다. 클릭하면 새 창이 뜨고 이벤트 페이지로 이동하는 코드입니다. 그대로 쇼핑몰 상품페이지 html 내에 붙여 넣기 하시면 됩니다.
단, 자바스크립트로 만들면 단점이 있는데 스마트스토어 같은 경우에는 제이쿼리나 자바스크립트 코드를 허용하고 있지 않습니다. 코드를 입력해도 자동으로 적용이 해제가 됩니다. 개인 쇼핑몰이나 옥션, 지마켓, 11번가, 인터파크 등 대부분 오픈마켓에서는 사용이 가능합니다.
그리고 html 코드나 자바스크립트나 오픈마켓에서는 사용하실 때 주의하실 점이 있습니다. 링크를 거실 때는 외부 링크는 허용이 안 된다는 점! 옥션에서 사용한다면 옥션 상품으로 링크를 거셔야 하며 11번가에서 사용한다면 11번가 상품에 링크를 거셔야 합니다. 11번가에서 옥션 상품으로 링크를 걸거나 개인 쇼핑몰로 링크를 걸면 제제가 걸리니 오픈마켓 내부에서 링크를 거셔야 합니다.
댓글