Блог

Главная - Вопросы по программированию - Попытка добавить изображение из массива JavaScript в DOM при наведении

Попытка добавить изображение из массива JavaScript в DOM при наведении

#javascript #html

#javascript #HTML

Вопрос:

Хорошо, это может быть немного сложным вопросом. По сути, я пытаюсь создать своего рода экран выбора символов JavaScript. У меня полностью настроен пользовательский интерфейс, и все мои изображения закодированы в HTML в DOM.

Что я сделал, так это поместил изображение спрайта, соответствующее каждому символу, в объект JavaScript.

Что я хотел бы сделать, так это чтобы изображение спрайта символов отображалось сбоку экрана выбора символа, когда пользователь НАВОДИТ курсор на изображение выбора символов (внутри контейнера, который я назвал «sprite-container»).

У меня есть HTML, подобный этому…

         <div class="container character-container">
        <div class="row">
            <img src="assets/images/characters/sfa2_ryu.gif" alt="Ryu" class="character" id="Ryu" onclick="showRyu()">
            <img src="assets/images/characters/sfa2_adon.gif" alt="Adon" class="character" id="Adon">
            <img src="assets/images/characters/sfa2_chunli.gif" alt="Chun" class="character" id="Chun">
            <img src="assets/images/characters/sfa2_guy.gif" alt="Guy" class="character" id="Guy">
            <img src="assets/images/characters/sfa2_ken.gif" alt="Ken" class="character" id="Ken">
        </div>
        <div class="row">
            <img src="assets/images/characters/sfa2_dhalsim.gif" alt="Dhalsim" class="character">
            <img src="assets/images/characters/sfa2_gen.gif" alt="Gen" class="character">
            <img src="assets/images/characters/sfa2_sakura.gif" alt="Sakura" class="character">
            <img src="assets/images/characters/sfa2_rolento.gif" alt="Rolento" class="character">
            <img src="assets/images/characters/sfa2_zangief.gif" alt="Zangief" class="character">
        </div>
        <div class="row">
            <img src="assets/images/characters/sfa2_charlie.gif" alt="Charlie" class="character">
            <img src="assets/images/characters/sfa2_birdie.gif" alt="Birdie" class="character">
            <img src="assets/images/characters/sfa2_rose.gif" alt="Rose" class="character">
            <img src="assets/images/characters/sfa2_sodom.gif" alt="Sodom" class="character">
            <img src="assets/images/characters/sfa2_sagat.gif" alt="Sagat" class="character">
        </div>
        <div class="row">
            <img src="assets/images/characters/sfa2_akuma.gif" alt="Akuma" class="character">
            <img src="assets/images/characters/sfa2_bison.gif" alt="Bison" class="character">
            <img src="assets/images/characters/sfa2_dan.gif" alt="Dan" class="character">
        </div>
    </div>
    <div class="row">
        <div class="col">
        <div class="sprite-container" id="sprite-container">
            <img src="" alt="" width="15%">
        </div>
    </div>
    <script src='app.js'></script>
</body>
</html>

и вот мой массив javascript…

 //Character Sprites
const Sprites = [
    {
        id: 0,
        name: "Ryu",
        img: 'assets/images/sprites/RyuSprite.gif'
    },
    {
        id: 2,
        name: "Adon",
        img: 'assets/images/sprites/AdonSprite.gif'
    },
    {
        id: 3,
        name: "ChunLi",
        img: 'assets/images/sprites/ChunliSprite.gif'
    },
    {
        id: 4,
        name: "Guy",
        img: 'assets/images/sprites/GuySprite.gif'
    },
    {
        id: 5,
        name: "Ken",
        img: 'assets/images/sprites/KenSprite.gif'
    },
    {
        id: 6,
        name: "Dhalsim",
        img: 'assets/images/sprites/DhalsimSprite.gif'
    },
    {
        id: 7,
        name: "Gen",
        img: 'assets/images/sprites/GenSprite.gif'
    },
    {
        id: 8,
        name: "Sakura",
        img: 'assets/images/sprites/SakuraSprite.gif'
    },
    {
        id: 9,
        name: "Rolento",
        img: 'assets/images/sprites/RolentoSprite.gif'
    },
    {
        id: 10,
        name: "Zangief",
        img: 'assets/images/sprites/ZangiefSprite.gif'
    },
    {
        id: 12,
        name: "Charlie",
        img: 'assets/images/sprites/CharlieSprite.gif'
    },
    {
        id: 13,
        name: "Birdie",
        img: 'assets/images/sprites/BirdieSprite.gif'
    },
    {
        id: 14,
        name: "Rose",
        img: 'assets/images/sprites/RoseSprite.gif'
    },
    {
        id: 15,
        name: "Sodom",
        img: 'assets/images/sprites/SodomSprite.gif'
    },
    {
        id: 16,
        name: "Sagat",
        img: 'assets/images/sprites/SagatSprite.gif'
    },
    {
        id: 17,
        name: "Akuma",
        img: 'assets/images/sprites/AkumaSprite.gif'
    },
    {
        id: 18,
        name: "Bison",
        img: 'assets/images/sprites/BisonSprite.gif'
    },
    {
        id: 19,
        name: "Dan",
        img: 'assets/images/sprites/DanSprite.gif'
    },
]

Не уверен, возможно ли это вообще… любая помощь была бы оценена!

Ответ №1:

Хорошие новости: это возможно.

Вообще говоря, это всего лишь вопрос добавления прослушивателя событий наведения курсора мыши и mouseout на экран выбора персонажа, выясните, на какой элемент вы в данный момент наводите курсор, и соответствующим образом обновите предварительный просмотр. Однако мы хотим сделать это эффективным способом.

Глядя на вашу структуру DOM, вы сгруппировали все, что относится к выделенному символу внутри <div> с классом container character-container. Мы можем получить ссылку на этот контейнер с помощью:

 var container = document.getElementsByClassName("container character-container")[0];

Функция getElementsByClassName возвращает HTMLCollection, который по сути является массивом. Поскольку существует только один объект этого класса, мы можем напрямую получить доступ к объекту, добавив [0] .

Теперь мы можем подключить прослушиватель событий наведения курсора мыши с помощью:

 container.addEventListener('mouseover', function(e) {

});

Это событие сработает, как только пользователь наведет курсор мыши на что-либо, находящееся внутри контейнера.

К сожалению, нас интересуют только <img> элементы. Чтобы узнать, наведен ли указатель мыши на элемент изображения, мы можем запросить e.target.tagName , что в случае, если мы это сделаем, возвращает строку IMG.

Теперь мы можем использовать ваш идентификатор изображения — например, id="Ryu" — property, чтобы найти соответствующее изображение спрайта из объекта Sprites с помощью:

 var obj = Sprites.find(o => o.name == e.target.id);

Если мы присвоим sprite-контейнеру <div> уникальный идентификатор, такой как preview, мы можем изменить его свойство .src на то, которое мы считываем из объекта.

 document.getElementById("preview").src = obj.img;

Вот пример, основанный на вашем коде:

 const Sprites = [{
    id: 0,
    name: "Ryu",
    img: 'https://picsum.photos/id/1/200/300'
  },
  {
    id: 2,
    name: "Adon",
    img: 'https://picsum.photos/id/2/200/300'
  },
  {
    id: 3,
    name: "Chun",
    img: 'https://picsum.photos/id/3/200/300'
  },
  {
    id: 4,
    name: "Guy",
    img: 'https://picsum.photos/id/4/200/300'
  },
  {
    id: 5,
    name: "Ken",
    img: 'https://picsum.photos/id/5/200/300'
  }
];

var container = document.getElementsByClassName("container character-container")[0];
container.addEventListener('mouseover', function(e) {
  if (e.target.tagName == "IMG") {
    var obj = Sprites.find(o => o.name == e.target.id);
    document.getElementById("preview").src = obj.img;
  }
});
container.addEventListener('mouseout', function(e) {
  document.getElementById("preview").src = null;
});  
 <div class="container character-container">
  <div class="row">
    <img src="assets/images/characters/sfa2_ryu.gif" alt="Ryu" class="character" id="Ryu" onclick="showRyu()">
    <img src="assets/images/characters/sfa2_adon.gif" alt="Adon" class="character" id="Adon">
    <img src="assets/images/characters/sfa2_chunli.gif" alt="Chun" class="character" id="Chun">
    <img src="assets/images/characters/sfa2_guy.gif" alt="Guy" class="character" id="Guy">
    <img src="assets/images/characters/sfa2_ken.gif" alt="Ken" class="character" id="Ken">
  </div>
</div>
<div class="row">
  <div class="col">
    <div class="sprite-container" id="sprite-container">
      <img id="preview" src="" alt="" width="15%">
    </div>
  </div>
</div>

Ответ №2:

Для начала вы можете использовать onmouseover прослушиватель событий. Например, вы можете создать функцию, которая устанавливает контейнер:

 // add an Id to the image under the sprite container
var image = document.getElementById("sprite-item");
function changeContainer(url){
    image.src = url;
}

Затем в HTML вы можете добавить атрибут:

 <img src="assets/images/characters/sfa2_ryu.gif" alt="Ryu" class="character" id="Ryu" onmouseover="changeContainer("assets/images/sprites/RyuSprite.gif")">