[JS 활용]이미지맵속 내용 복사하기, 해시태그 내용 복사하기 스크립트 html

 

 

 

버튼 클릭 -> 지정한 내용 복사 (해시태그내용 복사) 

 

 

사용되는 요소 

이미지 맵  태그안에 usemap 속성 / 제이쿼리 소스  

 

 

html

<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2F0j7Nt%2FbtqQbFlWYzc%2FAAAAAAAAAAAAAAAAAAAAACaLlv9az4Nku5-MHnPlJSeIccGC-ThAtE-SCTeZ6bBj%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1769871599%26allow_ip%3D%26allow_referer%3D%26signature%3DM9A%252BmhGykc3EDnM77Y3atKAvzVU%253D" usemap="#popimg">
<map name="popimg">
  <area shape="rect" coords="222,700,676,782" href="#hashtag" class="hashtag" onfocus="this.blur()">
</map>
<input type="text" id="hashtagTxt" style="display:none;" value="#복사할 #해시태그 #내용을 #적어주기">

 

 

제이쿼리 소스

$('.hashtag').click(function(){	
	var urlAddress= $('#hashtagTxt');
	urlAddress.css('display','block').select();
	document.execCommand("Copy");
	urlAddress.css('display','none');
	alert('해시태그가 복사되었습니다');	
	return false;
});

 

 

 

 

결과 

 

 

 

 

 

일전에 이미지맵 클릭시 새창 띄우기와 함께 같이 병행해서 사용하면 좋을듯 

 

https://lionbum.tistory.com/37

이미지 맵 클릭시 새창 팝업 띄우기