/    Sign up×
Community /Pin to ProfileBookmark

OnMouseOver & Out

Copy linkTweet thisAlerts:
Feb 06.2006

Hi there,

How would I convert the following code into functions…

[CODE]onMouseOver=”this.style.filter=’alpha(opacity=100)'” onMouseOut=”this.style.filter=’alpha(opacity=50)’;” [/CODE]

Which can then be used like…

[CODE]onMouseOver=”MO();” onMouseOut=”MU();” [/CODE]

I have tried the following, which doesn’t work…

[CODE]funtion MO()
{
this.style.filter=’alpha(opacity=100)’;
}
funtion MU()
{
this.style.filter=’alpha(opacity=60)’;
}
</script>[/CODE]

I have a ton of images on on some pages and would prefer to do it this way if possible, so that I can put it into a .js file and link it to each page.

Thanks very much/…

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangFeb 06.2006 — onmouseover="MO(this);"

funtion MO(obj)
{
obj.style.filter='alpha(opacity=100)';
}
Copy linkTweet thisAlerts:
@ldoodleauthorFeb 06.2006 — Thanks for the quick reply. However, it doesn't work ad I get the following error

Error: Objected Expected

Code: 0

I'm using the onmouseover and onmouseout events on image tags.

Thanks/...
Copy linkTweet thisAlerts:
@cootheadFeb 06.2006 — Hi there ldoodle,

try it like this [u]working[/u] example...
[color=navy]&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;alpha filter and MozOpacity&lt;/title&gt;
&lt;base href="http://coothead.homestead.com/files/"&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;

&lt;style type="text/css"&gt;
&lt;!--
#dog {
filter:alpha(opacity=50);
-moz-opacity:0.5;
}
--&gt;
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
&lt;!--
function MO(obj) {
if(document.all) {
obj.style.filter='alpha(opacity=100)';
}
else {
obj.style.MozOpacity=1.0;
}
obj.onmouseout=function() {
if(document.all) {
obj.style.filter='alpha(opacity=50)';
}
else {
obj.style.MozOpacity=0.5;
}
}
}
//--&gt;
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div&gt;
&lt;img id="dog" src="dog.jpg" onmouseover="MO(this)" alt="" /&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
[/color]
...also note that I have added [color=navy]-moz-opacity[/color] so that it will work in Firefox as well as IE. ?

[i]coothead[/i]
Copy linkTweet thisAlerts:
@KorFeb 06.2006 — On changing CSS classes is easier. And let's make the code full dynamic, to be used for multiple images with a single function, nomatter the id.
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
.poff {
filter:alpha(opacity=50);
-moz-opacity:0.5;
}
.pon {
filter:alpha(opacity=100);
-moz-opacity:1.0;
}
-->
</style>
<script type="text/javascript">
function roll(){
var obj = document.getElementsByTagName('*');
for(var i=0;i<obj.length;i++){
if(obj[i].className=='poff'){
obj[i].onmouseover=function(){this.className='pon'}
obj[i].onmouseout=function(){this.className='poff'}
}
}
}
onload=roll
</script>
</head>
<body>
<img src="00.jpg" class="poff">
<img src="01.jpg" class="poff">
<img src="02.jpg" class="poff">
<img src="03.jpg" class="poff">
...
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@ldoodleauthorFeb 06.2006 — Works a treat!

Thank you... ?
×

Success!

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