Easy JS Image Changer

Question

У меня есть простой сменщик изображений onMouseOver и Out.

<div id="img1" onMouseOver="changeBg('imgs/1col.png', 'img1')" onMouseOut="changeBg('imgs/1.png', 'img1')"></div>
        <div id="img2" onMouseOver="changeBg('imgs/2col.png', 'img2')" onMouseOut="changeBg('imgs/2.png', 'img2')"></div>

function changeBg (image, id) {
var div = document.getElementById(id);
div.style.backgroundImage = "url("+image+")";

}

Однако у меня есть около 50 изображений, на которые я хотел бы применить этот эффект, есть ли более простой способнапишите это, как функцию JS для автоматического подсчета и возврата значений и т. д.?так что вроде: "imgs /" + i + "col.png" "img" + i

Спасибо за все, что вы помогаете

РЕДАКТИРОВАТЬ: кто-нибудь может помочь в этом?

Answer 1

HTML:

<!-- Easier to add event handlers at once programmatically -->
<div id="img1">a</div>
<div id="img2">b</div>

JavaScript (обратите внимание, что я использую jQuery ):

// Retrieve URL from ID
function imgUrlFromId(id, toggle) {
  var id = id.replace("img", "");
  return "url(imgs/" + id + (toggle ? "col" : "") + ".png)";
}

// Create function defining how to build the URL to the replacement images
function changeImage(e) {
  $(e.currentTarget).css("backgroundImage",
    imgUrlFromId(e.currentTarget.id, (e.type === "mouseover")));
}

// Bind mouseover and mouseout event handlers to each div with an ID
// starting with "img"
$("div#[id^=img]").each(function() {
  $(this).mouseover(changeImage).mouseout(changeImage)
    .css("backgroundImage", imgUrlFromId(this.id, false));
});

Answer 2

TADA

JavaScript:

window.onload = function() {
    div = document.getElementById('images').getElementsByTagName('div');
    j = 1;
    for (i = 0; i < div.length; i++) {
        if (div[i].className == 'img') {
            div[i].setAttribute('id', j);
            div[i].style.backgroundImage = 'url(' + j + '.png)';
            div[i].onmouseover = function() {
                this.style.backgroundImage = 'url(' + this.getAttribute('id') + 'col.png)';
            }
            div[i].onmouseout = function() {
                this.style.backgroundImage = 'url(' + this.getAttribute('id') + '.png)';
            }
            j++;
        }
    }
}

HTML:

<div id="images">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    ... for as many images you want
</div>