클릭하면 상세페이지 팝업 링크 뜨는 HTML 강의

클릭하면 상세페이지 팝업 링크 뜨는 HTML 강의

안녕하세요 EGG입니다

오늘은 HTML 강의를 하나 해보려구요

 

 

오픈마켓 쇼핑을 하시다가 보면 해당 이미지를 클릭하면 상세페이지가 뜬다는 안내문구를 보신적있죠?

해당 이미지를 클릭하면 짜자잔 하고 큰 상세페이지가 뜨고요

그런 HTML 태그를 오늘은 간단히 알려드리려고 해요

어렵지 않으니 잘 따라오세요

 

 

해당강좌는 HTML 어느정도 사용해보신분과 웹 FTP를 이용해보신분들만 이해가 되실거에요

그부분에 대해서 자세한 강의는 재차 올리도록할게요 ㅎ

 

 

준비해야할것은

작은 이미지 (클릭할이미지)의 웹 링크 주소 [A라고칭하겠습니다.]

큰 이미지 (클릭해서 팝업으로 나올 이미지)의 웹 링크주소  [B라고칭하겠습니다.]

 

 

저는 A와 B주소를

아래와 같이 준비했습니다 [회사에서 사용되는 이미지인데 예제용으로 소스오픈 ;ㅋ 혼나도 난몰라요 몰라 휘릭]

A 의 해당주소 - http://lbeshop.img.or.kr/a.jpg

B 의 해당주소 - http://lbeshop.img.or.kr/b.jpg

 

1.메모장을 열고 아래와 같이 적어주세요

 

 

소스본문이에요 빨간글씨를 바꿔주시면 되구요 검정글씨는 건드리면안되요 파란글씨는 설명글이니 무시하세요

메모장에는 제목으로 나올 글과 크게보일 클릭해서 보이게될 팝업에 뜰 큰 이미지 주소만 적어주게됩니다

즉 A이미지는 여기서 사용하지않습니다

 

<title> 이곳에는 팝업창의 제목이될 글을 적어주는겁니다 특수문자 한글 전부 허용됩니다 </title>

<img src="http://lbeshop.img.or.kr/b.jpg">

 

 

위 주소는 B이미지 주소입니다. 크게보일 주소를 적어주시면 됩니다

이미지가 여러개라면 <img src="해당주소">를 복사해서 주소만 바꾸어 써줍니다.

 

이렇게 되셨으면 저장을 해주시는데

저장은 꼭 영어이름으로 해주시고 .html 을 적어주세요

 

 

 

이렇게 해서 저장해주시면 메모장 아이콘이 아닌 인터넷익스플로러 아이콘으로 저장된 파일을 보실수있답니다.

 

 << 이렇게 저장이 된답니다 클릭해서 보시면 인터넷창에 B이미지가 뜨는걸 보실수있어요

 

그렇다면 해당 본인의 웹 FTP에 접속하여 방금 저장한 메모장 html 파일을 업로드 시켜줍니다

[이부분을 설명하자면 강의가 길어지므로 이에대한 강의또한 차후에 올릴게요 일단 아신다는 정의하에 PASS]

 

html 파일을 올리셨으면 해당 경로를 가져옵니다.

이미지파일링크 가져오신것처럼요

제가 가져온 해당링크입니다

http://gksrnrlb.dothost.co.kr/lbeshop/popup/07/name.html

 

 

이제 인터넷 태그로 A를 눌렀을때 B가 열리게 이어주는것만 남았쬬

name.html이 B를 보이게끔 도와준다고 생각하시면 되요

 

해당페이지 태그를 적을 HTML 게시판에 아래와 같이 적어줍니다

아래역시 빨간글씨만 바꿔주시면 됩니다.

 

<img style="cursor: pointer;" onclick="window.open('http://gksrnrlb.dothost.co.kr/lbeshop/popup/07/name.html', 'window', 'width=800; height=6000; scrollbars=yes');" src="http://lbeshop.img.or.kr/a.jpg" border="0" complete="complete"/>

 

빨간부분 설명 차례로 드릴게요

http://gksrnrlb.dothost.co.kr/lbeshop/popup/07/name.html - name.html 올린경로입니다 즉 이미지B를 열어주는 주소죠

800 - 이미지 B의 넓이 px 치수 입니다 (픽셀)

6000- 이미지 B의 높이 px 치수 입니다 (픽셀)

http://lbeshop.img.or.kr/a.jpg - 이미지A의 링크경로입니다

 

이부분 바꿔주시면 짜잔 A를 누르면 B가 팝업이 되어 나타납니다

 

아래가 완성한 이미지링크입니다 누르시면 팝업이 나타나요 ^ㅡ^

 

 ▼ 예제 완성입니다 이미지 클릭해보세요 ▼

 

  

 

제 첫 강의인데 어렵게 설명한듯해서 죄송하네요

 

ㅠㅠ 제설명이 여기까지가 최선이네요 하지만 모르시는거 있으시면댓글 남겨주심 성심성의껏 알려드리겠습니다

다음번에 더 유익한 강의로 찾아뵐게요

 

읽어주셔서 감사