title 속성으로 대충 해결했는데, 그냥 궁금해서 질문해 봐요.

title 속성으로 대충 해결했는데, 그냥 궁금해서 질문해 봐요.

QA

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를 사용하여 이미지의 툴팁을 숨기고 마우스가 이미지 위로 올라갈 때 툴팁을 보이게 하도록 할 수 있을 것으로 보입니다.


<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>

 

이런 식일까요?

https://wwizshop.kr/testimage.php

뒷북입니다. 아래처럼 적당히...

 


<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://wittazzurri.com/editor/html_editor.php

클래식 이벤트는 본인 성향대로 리스너 이벤트로 바꿔서 해도 됩니다.
아이디나 클래스를 호출할 때도 마찬가지구요.
이 블롄드모드는 포샵은 물론 플래시에서도 무지 많이 씁니다.
에폑으로 만든 파티클효과 블랙톤 배경을 날리는 가장 유용한 도구지요.

이런 방식은 처음 봤어요. 비타주리 님 코드 보면서 많이 배웁니다.
변수 정의할 때만 이용하는 줄 알았는데, 이럴 때도 쓰는 것 보고 감탄. ㅎ

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. 아이디에 변수를 줘서 사용하는 것은 "뻘짓거리"다. 입니다.

----------

그리고 제 코드는 순자(순수 자바스크립트)를 사용하는데 익숙한 분이라면 누구나가 생각할 수 있는 것이구요. 제이쿼리가 우선인 분들은 생경할 수 있습니다.^^

답변을 작성하시기 전에 로그인 해주세요.
전체 8
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT