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

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

Я бы хотел, чтобы изображение спрайта персонажей появлялось сбоку от экрана выбора персонажа, когда пользователь HOVERS над изображением выбора символов (внутри контейнера, который я назвал «контейнером спрайта»).

У меня такой 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'
    },
]

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

0
Mister Behavior 3 Сен 2020 в 03:01

2 ответа

Лучший ответ

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

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

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

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

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

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

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

});

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

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

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

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

Если мы дадим спрайт-контейнеру <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>
0
obscure 3 Сен 2020 в 00:41

Для начала вы можете использовать прослушиватель событий 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")">
0
Bingostew 3 Сен 2020 в 00:36