/    Sign up×
Community /Pin to ProfileBookmark

Javascript-Change HTML code

Copy linkTweet thisAlerts:
Jul 18.2007

[B]Hello I’m very new to javascript; in fact I only started looking into writing it myself about an hour ago. Anyway, I’m trying to find a way of changing the class of a <div>, when there is a mouseover. I’ve already tried doing something like this:[/B]

<html>
<head>
<script type=”text/javascript”>
function jumpmenu()
{
document.write=(“class=”jumpitem””)
}
function jumpmenu2()
{
document.write=(“class=”jumpitem2″”)
}
<script>
</head>

<body>
<div onmouseover=”jumpmenu()” onmouseout=”jumpmenu2″>
</body>
</html>

[B]…but it doesn’t work. I fear I’ve taken completely the wrong approach. ? Could somebody tell me what to do. Also, does anybody know a good site for learning the basics of javascript?
Thanks[/B]

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@jasonahouleJul 18.2007 — It should be something more like this:
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function rollover(div) {
class = div.className;
if(class == "myClass") {
div.className = "rollOver";
} else {
div.className = "myClass";
}
}
&lt;/script&gt;
&lt;style&gt;
.myClass {
background-color:#FFFFFF;
color:#000000;
}
.rollOver {
background-color:#000000;
color:#FFFFFF;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="myClass" onmouseover="rollover(this)" onmouseout="rollover(this)"&gt;
Rollover me!
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@jasonahouleJul 18.2007 — Of course you could extend that to apply to multiple <div> elements and various classes very easily by simply passing the class name to the function instead, such as this...
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function rollover(div, class) {
div.className = class;
}
&lt;/script&gt;
&lt;style&gt;
.myClass {
background-color:#FFFFFF;
color:#000000;
}
.rollOver {
background-color:#000000;
color:#FFFFFF;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="myClass" onmouseover="rollover(this, 'rollOver')" onmouseout="rollover(this, 'myClass')"&gt;
Rollover me!
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@orangeIVauthorJul 18.2007 — Ok. I think I understand. Thanks a lot
×

Success!

Help @orangeIV 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 5.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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...