/    Sign up×
Community /Pin to ProfileBookmark

javascript mouse over picture only applys for one

I am currently coding this site: [url]http://www.ndsu.edu/pubweb/~ruowang/lunchbytes/[/url]

and I met the problem of making only one of the sidebars having the mouse over effect. I want all the three sidebars(class calendar, schedule, printable poster) have the mouse over effects. What’s wrong with my code??

Thank you for your help!

The javascript codes:

<script type=”text/javascript”>
function mouseOver()
{
document.getElementById(“b1″,”b2″,”b3″).src =”image/redcalendar.jpg”, “image/redschedule.jpg”,”image/redposter.jpg”;
}
function mouseOut()
{
document.getElementById(“b1″,”b2″,”b3″).src =”image/calendar.jpg”,”image/schedule.jpg”,”image/poster.jpg”;
}
</script>

The html:
<div id=”sidebar”>
<ul>
<li><a href=””><img id=”b1″ src=”image/calendar.jpg” alt=”” border=”0″onmouseover=”mouseOver()” onmouseout=”mouseOut()” /></a></li>
<li><a href=””><img id=”b2″ src=”image/schedule.jpg” alt=”” border=”0″ onmouseover=”mouseOver()” onmouseout=”mouseOut()” /></a></li>
<li><a href=””><img id=”b3″ src=”image/poster.jpg” alt=”” border=”0″ onmouseover=”mouseOver()” onmouseout=”mouseOut()” /></a></li>
</ul>
</div>

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@JMRKERJan 08.2011 — Invalid assignment:

document.getElementById("b1","b2","b3")
Copy linkTweet thisAlerts:
@JMRKERJan 08.2011 — Try this (untested):
<i>
</i>&lt;script type="text/javascript"&gt;
function mOver(IDS,info) { document.getElementById(IDS).src = info; }
function mOut(IDS,info) { document.getElementById(IDS).src = info; }
&lt;/script&gt;


The html:
<i>
</i>&lt;div id="sidebar"&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;a href=""&gt;
&lt;img id="b1" src="image/calendar.jpg" alt="" border="0"
onmouseover="mOver(this.id,'image/redcalendar.jpg')"
onmouseout="mOut(this.id,'image/calendar.jpg')" /&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=""&gt;
&lt;img id="b2" src="image/schedule.jpg" alt="" border="0"
onmouseover="mOver(this.id,'image/redschedule.jpg')"
onmouseout="mOut(this.id,'image/schedule.jpg')" /&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=""&gt;
&lt;img id="b3" src="image/poster.jpg" alt="" border="0"
onmouseover="mOver(this.id,'image/redposter.jpg')"
onmouseout="mOut(this.id,'image/poster.jpg')" /&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@janusmccarthyJan 08.2011 — JRMRKRs answer is the right way to go, as to what's wrong with your code, get element by id only accepts a single parameter and returns a single element, and when given a list it ignores the other parameters given and just uses the first one.
Copy linkTweet thisAlerts:
@casper125authorJan 08.2011 — I see, thank you so much! Both JMRKER and janusmcarthy! I know where my problem is now.
×

Success!

Help @casper125 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.17,
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,
)...