/    Sign up×
Community /Pin to ProfileBookmark

simple javascript rollover needs a small adjustment

Copy linkTweet thisAlerts:
Jun 18.2008

Ok coders! I am new to all this programming stuff and really grateful for yalls help. I have a onmouseover event that changes the background image of a div. It also has an onmouseout that switches the div back ground image back to the default image. Easy stuff. What I am wondering is if someone could help me modify my code to where it works on multiple divs with different images. Right now I have it set up to only work on one div. If you can help, THANKS FOR YOUR TIME!!!!

CODE:

<script>
function overDiv(d) { document.getElementById(d).style.background=”url(‘image1’)”; }
function outDiv(d) { document.getElementById(d).style.background=”url(‘image2’)”; }
</script>

<div id=”d1″ onmouseover=”overDiv(‘d1’)” onmouseout=”outDiv(‘d1’)”></div>

This works great, but I need it to work on multiple divs with different background images. Thanks for your time and have a great day!

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisJun 18.2008 — Here is a suggestion:
<i>
</i>&lt;script type="text/javascript"&gt;
function changeBG(it, theImage) {
it.style.background = "url(" + theImage + ")";
}
&lt;/script&gt;
...
&lt;div style="background-image: url('pic0.gif'); height: 100px; width: 100px;" onmouseover="changeBG(this, 'pic1.gif')" onmouseout="changeBG(this, 'pic0.gif')"&gt;&lt;/div&gt;
&lt;div style="background-image: url('pic2.gif'); height: 100px; width: 100px;" onmouseover="changeBG(this, 'pic3.gif')" onmouseout="changeBG(this, 'pic2.gif')"&gt;&lt;/div&gt;
&lt;div style="background-image: url('pic4.gif'); height: 100px; width: 100px;" onmouseover="changeBG(this, 'pic5.gif')" onmouseout="changeBG(this, 'pic4.gif')"&gt;&lt;/div&gt;
Copy linkTweet thisAlerts:
@bradleybebadauthorJun 18.2008 — That works great. Once again, Thanks for your time. You are a life saver. Trying to finish a site and always run into problems like this. My mind doesnt quite work like a programmer yet. Soon though!
×

Success!

Help @bradleybebad spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...