0

Идея написать резюме которое будет вести диалог с работодателем. Но вставить переменную в тег пикчер со стилем выводящим текст при наведении на изображение. Не выходит. http://nasobe.ru/resume/resume.html Интересно, есть ли какие либо возможные варианты решения этой проблемы. Не понимаю почему на самом деле переменная не выводится в текст для отображения ${name} и дело не в том что let name= localStorage.name; не видит. Видит, а как сгенерировать текст с localStorage.neme в классе стиля css для отображения подсказки с именем ${name} в момент наведения на картинку? То есть текст отображается и все работает, но в тексте переменная ${name} выводится как переменная, а не её значение вытащенное из localStorage. [фотография][1]

  let tooltipElem;
    document.onmouseover = function(event) {
      let target = event.target;
      // если у нас есть подсказка...
      let tooltipHtml = target.dataset.tooltip;
      if (!tooltipHtml) return;
      // ...создадим элемент для подсказки
      tooltipElem = document.createElement('div');
      tooltipElem.className = 'tooltip';
      tooltipElem.innerHTML = tooltipHtml;
      document.body.append(tooltipElem);
      // спозиционируем его сверху от аннотируемого элемента (top-center)
      let coords = target.getBoundingClientRect();
      let left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
      if (left < 0) left = 0; // не заезжать за левый край окна
      let top = coords.top - tooltipElem.offsetHeight - 5;
      if (top < 0) { // если подсказка не помещается сверху, то отображать её снизу
        top = coords.top + target.offsetHeight + 5;
      }
      tooltipElem.style.left = left + 'px';
      tooltipElem.style.top = top + 'px';
    };
    document.onmouseout = function(e) {
      if (tooltipElem) {
        tooltipElem.remove();
        tooltipElem = null;
      }
    };
    // if(window.location.href!='/resume/resume.html?talk'){
    //     console.log(window.location.href);
    // }
    
    if(window.location.search=='?talk'){
        console.log(window.location.search);
        // tageName('picture').classList.remove('.tooltip');
        // textP.innerHTML = `${person}`;
        textG.innerHTML = "Успех! Вот с такими мыслями (позитивными), выходят хорошие дела. Если конечно на них настроится. Проявить чуточку смелости для творчества... и можно со спокойной совестью (и чистой душой), творить и вытворять всевозможные (дела)!";
        console.log(localStorage.name);
       
        if(localStorage.name==null){
            textP.innerHTML = localStorage.getItem(name);
            let person = prompt('Как Вас зовут?', "Уважаемый персонаж!");
            alert('Очень приятно Достопочтейнейший '+ ' ' + `${person}` + ' , а я ЧикЧикли СпайсХендс Форсмажорович! (верстальщик📲)! (\"Со стажем\"⌨(\"адаптивной верстки\") 💻). и с зависимостью от javascript 🧐 , неизлечимой 😱'  );
            localStorage.setItem('name', person);
        }else{
            textP.innerHTML = "Приветствую Вас : "+'<span style="color:red; font-size:24px;">'+ localStorage.getItem('name')+'</span>' +'<span style="font-size:50px">😉</span> ';
        }
    }
   
<style>
    .tooltip {
      position: fixed;
      padding: 10px 20px;
      border: 1px solid #b3c9ce;
      border-radius: 4px;
      text-align: center;
      font: italic 14px/1.3 sans-serif;
      color: #333;
      background: #fff;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
    }
</style>
<picture>
    <source srcset="/resume/img-resume/imgfoto.webp" type="image/webp">
    <img src="img-resume/imgfoto.jpg" width="100%" alt="Амир Наврутдинов" data-tooltip="Хай, Доброго времени суток! Уважаемый персонаж! `${name}`<br>P.S. Кликнув по изображению со мной можно познакомится по ближе!">
</picture>

3
  • ${localStorage.getItem(name)} ?? 1 мар 2021 в 12:21
  • чтобы это сработало, шаблонная строка должна находиться в коде, где сразу доступны все переменные. В данном случае, если просто строка, которая и выводится как есть
    – Grundy
    1 мар 2021 в 12:24
  • Тег <пикчер> )))
    – UModeL
    1 мар 2021 в 13:46

1 ответ 1

0

https://codepen.io/Crook/pen/poNLMxy

let tooltipElem;
document.onmouseover = function (event) {
    let target = event.target;
    if (!target.classList.contains("talk")) return;
    // если у нас есть подсказка...
    // if (target == )
    // ...создадим элемент для подсказки
    let name = localStorage.name ?? "Уважаемый персонаж!";
    tooltipElem = document.createElement("div");
    tooltipElem.className = "tooltip";
    tooltipElem.innerHTML = `Хай, Доброго времени суток! ${name}<br>P.S. Кликнув по изображению со мной можно познакомится по ближе!`;
    document.body.append(tooltipElem);
    // спозиционируем его сверху от аннотируемого элемента (top-center)
    let coords = target.getBoundingClientRect();
    let left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
    if (left < 0) left = 0; // не заезжать за левый край окна
    let top = coords.top - tooltipElem.offsetHeight - 5;
    if (top < 0) {
        // если подсказка не помещается сверху, то отображать её снизу
        top = coords.top + target.offsetHeight + 5;
    }
    tooltipElem.style.left = left + "px";
    tooltipElem.style.top = top + "px";
};
document.onmouseout = function (e) {
    if (tooltipElem) {
        tooltipElem.remove();
        tooltipElem = null;
    }
};

let talk = document.querySelector(".talk");
talk.addEventListener("click", () => {
    if (localStorage.name == null) {
        let person;
        while (true) {
            person = prompt("Как Вас зовут?", "Уважаемый персонаж!");
            if (!person) {
                alert("Введите свое настоящие им'я");
            } else {
                localStorage.setItem("name", person);
                break;
            }
        }
        alert(
            `Очень приятно Достопочтейнейший ${person}, а я ЧикЧикли СпайсХендс Форсмажорович! (верстальщик📲)! ("Со стажем"⌨("адаптивной верстки") 💻). и с зависимостью от javascript 🧐 , неизлечимой 😱`
        );
    } else {
        alert(`Приветствую Вас : ${localStorage.getItem("name")}`);
    }
});
.tooltip {
    position: fixed;
    padding: 10px 20px;
    border: 1px solid #b3c9ce;
    border-radius: 4px;
    text-align: center;
    font: italic 14px/1.3 sans-serif;
    color: #333;
    background: #fff;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
.talk {
    cursor: pointer;
}
<img src="https://picsum.photos/id/91/1920/1080" width="100%" alt="Амир Наврутдинов" class="talk">

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.