0

I have a simple onMouseOver and Out image changer.

<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+")";

}

However I have like 50 images I would like to apply this effect on, is there an easier way to write this, as a JS function to count automatically and get it to return values etc? so like: "imgs/" + i + "col.png" "img" + i

Thanks for all you help

EDIT: anyone able to help on thiss?

ben
  • 39
  • 4
  • Have you thought about using a javascript library such as jquery? It would certainly make writing code like this a lot easier. – Niklas Jun 05 '11 at 17:34

2 Answers2

1

The HTML:

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

The JavaScript (note that I'm using 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));
});
brymck
  • 7,555
  • 28
  • 31
  • couldn't seem to get this working :/ but them again, i dont know jquery. why are the "a" "b" in the div tags – ben Jun 05 '11 at 18:15
0

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>
Midas
  • 7,012
  • 5
  • 34
  • 52
  • i cant use class="img" as i already have classes defined, jsut omitted them for brevity – ben Jun 05 '11 at 18:14
  • Can't you add a second class? You can also do this without classes, then I have to modify the code a bit. By the way, why don't you use `img` elements? You can make it so that it adds 'col' to the `src` link when you roll over the images. – Midas Jun 05 '11 at 19:00
  • mmm il ltry it, never knew could add a 2nd class :D. – ben Jun 05 '11 at 19:22
  • Separate them by a space like so: `class="class1 class2"`. – Midas Jun 05 '11 at 19:24
  • tried that, no luck :/, changed the top bit tooo becasue i use "bkimg"... `
    window.onload = function() { div = document.getElementById('bkimg').getElementsByTagName('div');`
     – ben Jun 05 '11 at 19:38
  • What you can do is, change in the script `if (div[i].className == 'img')` to `if (div[i].className == 'web')`, and use your old class. You can also remove the `id`s because they are automaticly added with the script. The `div` tags then becomes `
    `.     – Midas Jun 05 '11 at 20:24
  • i have 4 classes pre-set however, not just web. thanks for all your help so far – ben Jun 05 '11 at 21:26