title 속성으로 대충 해결했는데, 그냥 궁금해서 질문해 봐요.
관련링크
본문
https://codepen.io/sinbi/pen/OJdyeLE
위 예제보면 이미지들이 많이 있어요.
이미지 허버 시 JS로 title 뜨게 간단히 처리했는데, 원래는 아래처럼 하려고 했어요.
그런데, ChatGPT가 수 없는 시행착오만 하고 제대로 구현을 못 하더라구요. ㅡㅡ;;
지적호기심 차원에서 궁금해서 문의해 봅니다.
각 이미지에 마우스 허버 시 해당 이미지 위에 검은색배경에 테두리가 약간 둥근 span 요소로 된 tooltip 창을 마우스커서 바로 위에 띄워서 해당 이미지의 클래스 속성의 속성값을 표시하되, 해당 이미지 위에서 마우스커서가 움직이면 툴팁창도 마우스커서 따라다니게 ~~
알파고를 이긴 이세돌처럼, ChatGPT보다 우수한 인간이 나타나길 바래봅니다. ㅎ
답변 3
다음과 같이 해보시는건 어떨까 합니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
background-color: red;
height: 5000px;
position: relative;
}
.box img {
width: calc(100% / 3);
height: auto;
float: left;
margin-bottom: 10px;
}
.tooltip {
display: none;
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
color: white;
border-radius: 5px;
padding: 5px;
}
.box img:hover + .tooltip {
display: block;
}
</style>
</head>
<body>
<div class="box">
<img src="https://source.unsplash.com/random" alt="이미지" class="normal">
<span class="tooltip">normal</span>
<img src="https://source.unsplash.com/random" alt="이미지" class="multiply">
<span class="tooltip">multiply</span>
<!-- 다른 이미지 및 툴팁들도 추가 -->
</div>
</body>
</html>
CSS를 사용하여 이미지의 툴팁을 숨기고 마우스가 이미지 위로 올라갈 때 툴팁을 보이게 하도록 할 수 있을 것으로 보입니다.
관심 갖고 답변 주셔서 감사합니다.
JS로 툴팁요소를 생성해 구현하는 방법을 모색 중이였습니다.
ChatGPT가 얼추 비슷한 코드를 구현해 주었네요.
https://codepen.io/sinbi/pen/NWoxWpm
아~ 그러셨군요.. 어려운 부분을 구현하셨네요.. 부럽
저는 그저 CSS로 구현하는게 쉽긴 하더라구요.. ^^
<style>
.box { position: relative; max-width: 600px; }
.box img { width: 100%; height: auto; }
.box .tooltip { position: absolute; display: none; padding: 8px 26px; background: #000; color: #fff; }
</style>
<div class="box">
<img src="https://source.unsplash.com/random" alt="이미지" class="normal" title="normal">
<span class="tooltip">이미지 툴팁</span>
</div>
<script>
$(function() {
$(document).on('mousemove','.normal',function(el) {
var outer = document.getElementsByClassName('box')[0];
var mouseAngle = document.getElementsByClassName('tooltip')[0];
var mouseX = el.clientX;
var mouseY = el.clientY;
var angleX = mouseX - outer.getBoundingClientRect().left;
var angleY = mouseY - outer.getBoundingClientRect().top;
mouseAngle.style.left = angleX + 'px';
mouseAngle.style.top = angleY + 'px';
$('.tooltip').show();
});
});
</script>
이런 식일까요?
오~ 이런 방법도 있었군요..
예. 제가 궁금해하던 방식이네요. 관심 갖고 답변주셔서 감사합니다.
뒷북입니다. 아래처럼 적당히...
<div id="myDiv" style="width:272px;position:relative">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="my_1">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="my_2">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="my_3">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="my_4">
<span id="ment" style="display:none;position:absolute;top:0px;left:0px;padding:10px;background-color:#eeeeee;border:1px solid #cccccc"></span>
</div>
<script>
myDiv.onmouseover = myDiv.onmouseout = function() {
ment.style.display = ment.style.display == "block" ? "none" : "block";
}
myDiv.onmousemove = function(e) {
ment.style.top = e.clientY + "px";
ment.style.left = e.clientX + "px";
}
for (i of myDiv.querySelectorAll("img")) {
i.onmouseover = function() {
ment.innerHTML = this.className;
}
}
</script>
알려주신 코드로 적용하니 아주 잘 작동하네요.
https://codepen.io/sinbi/pen/RwvrWNj
이미 채택된 질문에도 답변주시고 감사합니다.
클래식 이벤트는 본인 성향대로 리스너 이벤트로 바꿔서 해도 됩니다.
아이디나 클래스를 호출할 때도 마찬가지구요.
이 블롄드모드는 포샵은 물론 플래시에서도 무지 많이 씁니다.
에폑으로 만든 파티클효과 블랙톤 배경을 날리는 가장 유용한 도구지요.
이런 방식은 처음 봤어요. 비타주리 님 코드 보면서 많이 배웁니다.
변수 정의할 때만 이용하는 줄 알았는데, 이럴 때도 쓰는 것 보고 감탄. ㅎ
box.onmouseover = box.onmouseout = function() {
tooltip.style.display = tooltip.style.display == "block" ? "none" : "block";
}
엘리먼트에 아이디를 맨몸뚱아리 그대로 호출하는 형태는 많은 오해가 있습니다.
왜냐하면 변수명이나 함수명 중에서 아이디와 같은 이름이 존재할 경우 삑사리가 나기 때문입니다.
그래서 예를 들어 div 에 아이디를 my 로 주었으면 그 충돌을 피하기 위해 아래처럼 사용하는데요.
document.getElementById("my").style.display = "none";
document.querySelector("#my").style.display = "none";
또는 여건에 따라 아래처럼 사용하기도 합니다.
document.querySelector("*[id=my]")
document.querySelector("*[id='my']")
document.querySelector("div[id=my]")
document.querySelector("div[id='my']")
근데 제일 동의할 수 없는게 뭐냐하면
my = document.getElementById("my") 로 아이디에 변수를 하나 부여해서 사용하는 것이죠.
위에처럼 일반변수가 아니라 var, let, const 모두 같습니다.
이럴경우 저렇게 변수화된 my 역시 동일변수나 동일함수가 존재할 경우 삑사리가 나는 건 동일하다는 것입니다.
그러니 맨몸뚱아리를 쓰는 편이 훨 낫지 굳이 변수를 줘서 쓰는 건 의미가 없어요.^^
제 지론에 의하면 아이디 호출은
1. 맨몸뚱아리 그대로 호출하되 동일명 변수나 동일명 함수가 생기지 않게끔 처음부터 코드를 구성하거나
2. document.querySelector("#my") 등으로 호출하거나 둘 중 하나이며
3. 아이디에 변수를 줘서 사용하는 것은 "뻘짓거리"다. 입니다.
----------
그리고 제 코드는 순자(순수 자바스크립트)를 사용하는데 익숙한 분이라면 누구나가 생각할 수 있는 것이구요. 제이쿼리가 우선인 분들은 생경할 수 있습니다.^^
