/    Sign up×
Community /Pin to ProfileBookmark

Javascript noobe — help with image rollover

Copy linkTweet thisAlerts:
Dec 25.2006

I’m just getting started with javascript. I followed a tutorial.. I want a form submit button to have a rollover effect. Here is the html:

[code]
<div id=”content”>
<script type=”text/javascript”>
//<![CDATA[

Rollimage = new Array();

Rollimage[0] = new Image(74,27);
Rollimage[0].src = “/images/Save.gif”;

Rollimage[1] = new Image(74,27);
Rollimage[1].src = “/images/Save-Over.gif”;

function Out() {
document.form.save_button.src = Rollimage[0].src;
return true;
}
function Over() {
document.form.save_button.src = Rollimage[1].src;
return true;
}

//]]>
</script>
<form>…
<input type=”image” name=”save_button” src=”/images/Save.gif” style=”background: transparent;” onMouseOver=”Over()” onMouseOut=”Out()” width=”74″ height=”27″ alt=”Continue” />
</form>
</div>[/code]

It’s not working. Can anyone help?

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@samanyoluDec 25.2006 — [code=php]

<script type="text/javascript">

window.onload = function () {
var image = [ "resim0.bmp","resim1.bmp"] ;
var e = document.getElementById('img');
e.onmouseover = function () { e.src = image[0] ; }
e.onmouseout = function () { e.src = image[1] ; }

}

</script>

<form>
<input type="image" id="img" src="resim1.bmp" style="background: transparent; width:74px; height:27px;" alt="Continue" />
</form>
[/code]

[code=php]

<script type="text/javascript">

var image = new Array();

image[0] = new Image(74,27);
image[0].src = "resim0.bmp";

image[1] = new Image(74,27);
image[1].src = "resim1.bmp";

function Out() {
var e = document.getElementById('input');
e.src = image[0].src;

}

function Over() {
var e = document.getElementById('input');
e.src = image[1].src;


}

</script>

<form name="form">...
<input type="image" id="input" name="save_button" src="resim0.bmp" style="background: transparent;" onMouseOver="Over()" onMouseOut="Out()" width="74" height="27" alt="Continue" />
</form>
</div>
[/code]

[color=red]getElementsByName[/color]
[code=php]
<script type="text/javascript">

window.onload = function () {
var image = [ "resim0.bmp","resim1.bmp"] ;
var e = document.getElementsByName('img');
e[0].onmouseover = function () { e[0].src = image[0] ; }
e[0].onmouseout = function () { e[0].src = image[1] ; }

}

</script>

<form>
<input type="image" name="img" src="resim1.bmp" style="background: transparent; width:74px; height:27px;" alt="Continue" />
</form>
[/code]
Copy linkTweet thisAlerts:
@pippauthorDec 26.2006 — Thank you samanyolu!

That works perfectly. I like your first example best. I come from a PHP background, so there is one thing I don't understand: creating a function without a name. Can you (or someone else) explain to me how that works (at least in this example)?
Copy linkTweet thisAlerts:
@pippauthorDec 26.2006 — I have another question (though not related to this directly): Is it possible to provide GET variables to a js file? For instance:
&lt;script type="text/javascript" src="/js/rollover.js?name=Continue"&gt;&lt;/script&gt;
.. and if so, how would I retreive that value in the js file?
Copy linkTweet thisAlerts:
@pippauthorDec 27.2006 — I get an error in IE Win: [B]'null' is null or not an object [/B] <-- when using the first example (window.onload etc..)
Copy linkTweet thisAlerts:
@samanyoluDec 27.2006 — [code=php]
<script type="text/javascript">

function change1 (e) { e.src = "resim0.bmp" ; }
function change2 (e) { e.src = "resim1.bmp" ; }

</script>

<form>
<input type="image" id="img" onmouseover ="change1 (this)" onmouseout ="change2 (this)" src="resim1.bmp" style="background: transparent; width:74px; height:27px;" alt="Continue" />
</form>
[/code]
<br/>
&lt;form&gt;
&lt;input type="image" id="img"
onmouseover ="this.src='resim0.bmp' "
onmouseout ="this.src='resim1.bmp' " src="resim1.bmp" style="background: transparent; width:74px; height:27px;" alt="Continue" /&gt;
&lt;/form&gt;
×

Success!

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