Transparency does not work in javascript

It seems that the javascript of this program is not working
Why is it not transparent?
Please let me know m(__)m

<html>
    <head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=shift_jis">
    <title>Sample 02</title>
    <script language="javascript">
var opacity = 50;

function document_load(){
    before.style.filter="Alpha(Opacity="+opacity+")";
    label.innerHTML="Opacity="+opacity;
}
function dec_click(){
    if(opacity>0)opacity-=10;
    before.style.filter="Alpha(Opacity="+opacity+")";
    label.innerHTML="Opacity="+opacity;
}
function inc_click(){
    if(opacity<100)opacity+=10;
    before.style.filter="Alpha(Opacity="+opacity+")";
    label.innerHTML="Opacity="+opacity;
}
    </script>
    </head>

    <body onLoad=" document_load()">
    <table width="100%" height="100%">
    <tr><td align="center">
        <input type="button"onClick="dec_click()"
               value = "Make it more transparent" >
        <input type="button"onClick="inc_click()"
               value = "More opaque" >
    </th></tr>
    <tr><td align="center">>pid="label">Opacity=100</td>>
    <tr><td align="center" style="
        background-image:url(back00.jpg);
        background-repeat —No-repeat;
        background-position:center;
    US>" >
        <img src="fore00.jpg" id="fore">
    </th></tr></table>
    </body>
</html>

javascript

2022-09-30 17:57

2 Answers

You will find out by looking at the correspondence table, but
It does not work depending on the browser you want to check.
We have added two styles to make them transparent.
(I think IE10 worked normally opacity, so I'll do moz-opacity later.)

var opacity=50;

function document_load(){
    // Transparency (existing)
    before.style.filter="Alpha(Opacity="+opacity+")";
    // Transparency (additional)
    before.style.opacity=(opacity*0.01);
    before.style.MozOpacity=(opacity*0.01);
    label.innerHTML="Opacity="+opacity;
}
function dec_click(){
    if(opacity>0)opacity-=10;
    document_load();
}
function inc_click(){
    if(opacity<100)opacity+=10;
    document_load();
}

<html>
    <head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=shift_jis">
    <title>Sample 02</title>
    </head>

    <body onLoad=" document_load()">
    <table width="100%" height="100%">
    <tr><td align="center">
        <input type="button"onClick="dec_click()"
               value = "Make it more transparent" >
        <input type="button"onClick="inc_click()"
               value = "More opaque" >
    </th></tr>
    <tr><td align="center">>pid="label">Opacity=100</td>>
    <tr><td align="center" style="
        background-image:url(back00.jpg);
        background-repeat —No-repeat;
        background-position:center;
    US>" >
        <img src="https://dummyimage.com/64x64/000/fff" id="fore">
    </th></tr></table>
    </body>
</html>

2022-09-30 17:57

The filter property was introduced in Internet Explorer 4.0, but is deprecated from Internet Explorer 9 and removed from Internet Explorer 10.
The HTML described works correctly in the environment you expect.

2022-09-30 17:57

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656