Problem with JS, DOM and looping

I have a problem with JavaScript looping and DOM.

so I have a few div's, each has a background image defined by CSS, however when i rollover a text link, i wish for these background images to change, which ones will change depends on their class name and the link mouseover'ed

<div id="im1" class="web"></div>
        <div id="im2" class="logo"></div>
        <div id="im3" class="web"></div>
        <div id="im4" class="logo"></div>
        <div id="5" class="logo"></div>

<a href="#" onmouseover="showweb()" onmouseout="hideweb()">web</a>

so those are the divs with my link for the mouse over. then to change these images i have some simple JavaScript, which works fine (if very long)....

function showweb() {
document.getElementById("im1").style.backgroundImage = "url('back/1col.png')";
document.getElementById("im2").st开发者_如何学编程yle.backgroundImage = "url('back/2col.png')";

however, i wondered if there was a way i would condition by class name, and only change those with a certain class name, eg web, or logo. ive tried various ways and loops and things, but none seemed to work. e.g

    function showweb() {
for(i=0; i=5; i++){
    url = "im" + i;
    if(document.getElementById("url").className=="web"){
    document.getElementById("url").style.backgroundImage = "url('back/"+ i +"col.png')";}
    }
}

however this doesn't work, the divs just don't change..... am i doing something wrong? missing something? or doing it the completely wrong way?

all help appreciated, thanks in advance.

Edit: changed the "url" to url, my bad, that was very foolish, however still didnt work. i will try a few other ideas posted. thanks everyone so far.

---

You don't need the quotes around url:

document.getElementById(url)

---

This may work (if the link to your images is right and presumed that by id="5" you mean id="im5". Play with it until it's right. Check your code thourougly, there were several errors (typos or worse ¹) in your coding:

function showweb() {
for(var i=1; i < 6; i++){
    var el = document.getElementById("im"+(i));
    if(el && /web/.test( (el ||{}).className)){
      el.style.backgroundImage = "url(back/"+ i +"col.png)";}
    }
}

¹ a few notes on that

• id = "5" should supposedly be id ="im5"
• i=0; i=5; i++ => i=5 should be i<5
• i=0; i=5; i++ creates a global variable i. Use var i=0;...
• given your id's, you should start with var i = 1
• though not a real error, you don't need to surround the url value with apostrophes
• to optimize call document.getElementById once and use it's result in the rest of the code

---

You're building the "url" variable, but then you pass the string constant "url" into the "getElementById()" function.

---

To get only elements of the desired class, you need node.getElementsByClassName('your_class'), where node can be document or some <div> selected by id, or any other node of the DOM tree.

Note: Remember that all methods that start with getElement will return single element, and those with getElements will return an array of elements, so this one returns an array which you need to iterate (even if there is only one element in it)

However, since you are working with DOM elements in JavaScript, you would save tons of time by using jQuery

---

You have a few of problem. First, you have quotes around the variable "url" so it's looking for an element with that id, which doesn't exist and thus fails when you attempt to access the className of a null lookup result. Second, your loop starts at 0, not one and you don't have a div with id "im0" so it would fail anyway when you attempt to get the className of that element, which also doesn't exist. Third, the check in your loop sets i to 5 instead of checking if it is less than or equal to 5. Your loop with thus continue forever, since 5 equates to true, which I'm sure is not what you want. Fourth, your code may break if you assign additional classes to the elements. Lastly, most of this sort of thing has already been done for you -- might I suggest you look into using a javascript framework, such as jQuery -- with the hover() method, as a better alternative than re-inventing the wheel if this isn't purely a learning exercise.