title 속성으로 대충 해결했는데, 그냥 궁금해서 질문해 봐요. 채택완료
https://codepen.io/sinbi/pen/OJdyeLE
위 예제보면 이미지들이 많이 있어요.
이미지 허버 시 JS로 title 뜨게 간단히 처리했는데, 원래는 아래처럼 하려고 했어요.
그런데, ChatGPT가 수 없는 시행착오만 하고 제대로 구현을 못 하더라구요. ㅡㅡ;;
지적호기심 차원에서 궁금해서 문의해 봅니다.
각 이미지에 마우스 허버 시 해당 이미지 위에 검은색배경에 테두리가 약간 둥근 span 요소로 된 tooltip 창을 마우스커서 바로 위에 띄워서 해당 이미지의 클래스 속성의 속성값을 표시하되, 해당 이미지 위에서 마우스커서가 움직이면 툴팁창도 마우스커서 따라다니게 ~~
알파고를 이긴 이세돌처럼, ChatGPT보다 우수한 인간이 나타나길 바래봅니다. ㅎ
답변 3개
다음과 같이 해보시는건 어떨까 합니다.
.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;
}
normal
multiply
CSS를 사용하여 이미지의 툴팁을 숨기고 마우스가 이미지 위로 올라갈 때 툴팁을 보이게 하도록 할 수 있을 것으로 보입니다.
답변에 대한 댓글 2개
sinbi댓글을 작성하려면 로그인이 필요합니다.
뒷북입니다. 아래처럼 적당히...
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;
}
}
답변에 대한 댓글 4개
sinbihttps://codepen.io/sinbi/pen/RwvrWNj
이미 채택된 질문에도 답변주시고 감사합니다.
아이디나 클래스를 호출할 때도 마찬가지구요.
이 블롄드모드는 포샵은 물론 플래시에서도 무지 많이 씁니다.
에폑으로 만든 파티클효과 블랙톤 배경을 날리는 가장 유용한 도구지요.
sinbi변수 정의할 때만 이용하는 줄 알았는데, 이럴 때도 쓰는 것 보고 감탄. ㅎ
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. 아이디에 변수를 줘서 사용하는 것은 "뻘짓거리"다. 입니다.
----------
그리고 제 코드는 순자(순수 자바스크립트)를 사용하는데 익숙한 분이라면 누구나가 생각할 수 있는 것이구요. 제이쿼리가 우선인 분들은 생경할 수 있습니다.^^
댓글을 작성하려면 로그인이 필요합니다.
.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; }
이미지 툴팁
$(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();
});
});
이런 식일까요?
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
JS로 툴팁요소를 생성해 구현하는 방법을 모색 중이였습니다.
ChatGPT가 얼추 비슷한 코드를 구현해 주었네요.
https://codepen.io/sinbi/pen/NWoxWpm