jquery 이미지 클릭 시 좌표 위치 얻기 + 태그 등록 2

여러분들의 모든 말씀이 옳습니다. 많이 가르쳐 주세요...!

 

작업 내용

• 1. 이미지가 존재하는 DIV가 있다
• 2. 해당 이미지를 클릭하였을 경우 이미지에 대한 위치정보를 가져온다 - (어제썼음)
• 3. 필요한 값을 별도의 입력폼으로 입력받아 해당 위치에 플로팅한다. - (이번 내용)
• 4. 플로팅된 리스트를 나열하여 수정 OR 삭제가 되도록 한다. - (나중에써야징)

 

1번글을 통해 간단히 img tag를 클릭하였을 시 좌표를 반환하는 것을 만들었었는데

좀 더 심화해서 이미지 클릭 > 태그 입력폼 보여주기 > 입력버튼을 통하여 태그 플로팅 하기 기능을 만들어봤당.

 

어제의 html 태그 아래 입력폼을 간단히 만들어준다. ( inputArea )

이미지 클릭 시 좌표 위치 얻기 + 태그 등록 2 HTML

클릭하기 전에 입력폼이 나와있으면 안되니까 기본적으로 inputArea Class에는 display:none 속성을 줘서 숨기기

이미지 클릭 시 좌표 위치 얻기 + 태그 등록 2 CSS

만들어둔 click event에, 이미지 click시 inputArea를 보여준다. 당연히 태그입력을 받고 나서는 숨길 예정임...
또한 입력버튼인 button에 click 이벤트를 바인딩 했다. 

입력버튼을 누르는 순간 css를 통해 이미지 위에 태그를 플로팅 하여야 하므로 x좌표 및 y좌표값 이 필요하다. 

전역변수를 통해 필요한 몇가지 변수를 선언을 해두었다.

이미지 클릭 시 좌표 위치 얻기 + 태그 등록 2 script

button을 클릭하는순간 input에 저장된 내용을 tag변수에 저장하고,

tagFloatingDiv 변수를 통해 tag가 표시될 div를 생성한다. 클래스는 tagDiv

동적생성된 tagFloatingDiv에 append를 통해 tag변수의 값을 넣어주고 css를 이용해 top, left 속성으로 클릭시 저장된

x와 y값을 px처리 하였다.

완성된 tagFloatingDiv값을 targetImg에 append하고 확인을 해보자면....

이미지 클릭 시 좌표 위치 얻기 + 태그 등록 2 Result

잘올라간다.  ( tagDiv 와 대상이되는 #selectImage는 position을 통해 각각 absolute, relative 주는걸 잊지말자 )

 

CSS와 함께 소스 첨부..!

이미지 클릭 시 좌표 위치 얻기 + 태그 등록 2 Css

소스

 

 

2023.02.06 - [웹개발] - jquery 이미지 클릭 시 좌표 위치 얻기 + 태그 등록 1