Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    197
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Put inline JavaScript in the head

    Hi,

    The following code works:

    Code:
    <html>
    <head>
    <style type="text/css">
    img
    {
    opacity:0.4;
    filter:alpha(opacity=40);
    }
    </style>
    </head>
    <body>
    
    <img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis"
    onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
    onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
    
    <img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis"
    onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
    onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
    
    </body>
    </html>
    But the problem is you have to repeat the inline JavaScript for all <img> tags. I tried to put the script in the head to no avail:

    Code:
    <html>
    <head>
    <style type="text/css">
    img
    {
    opacity:0.4;
    filter:alpha(opacity=40);
    }
    </style>
    <script type="text/javascript">
    function getElements()
      {
      var x=document.getElementsByTagName("img");
      x.style.opacity=1; x.filters.alpha.opacity=100;
      }
    </script>
    </head>
    <body>
    
    <img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis"
    onmouseover="getElements()"
    onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
    
    <img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis"
    onmouseover="getElements()"
    onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
    
    </body>
    </html>
    Everything seems right to me, but it doesn't work.

    Many thanks for any help!
    Mike

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Code:
    <html>
    <head>
    <style type="text/css">
    img
    {
    opacity:0.4;
    filter:alpha(opacity=40);
    }
    </style>
    <script type="text/javascript">
    function opaque(e)
      {
     e.style.opacity=1;
    if(e.filters)e.filters.alpha.opacity=100
      }
    function transparent(e)
      {
     e.style.opacity = .4;
     if(e.filters)e.filters.alpha.opacity = 40; 
      }
    
    
    </script>
    
    
    </head>
    <body>
    
    <img src="klematis.jpg" 
    onmouseover="opaque(this)"
    onmouseout="transparent(this)" />
    
    <img src="klematis2.jpg" 
    onmouseover="opaque(this)"
    onmouseout="transparent(this)" />
    
    
    
    </body>
    </html>

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    This might be more like what
    you have in mind ....

    Code:
    <html>
    <head>
    <style type="text/css">
    img
    {
    opacity:0.4;
    filter:alpha(opacity=40);
    }
    </style>
    <script type="text/javascript">
    function opaque(){
       this.style.opacity=1;
       if(this.filters)this.filters.alpha.opacity=100
      }
    function transparent(){
       this.style.opacity = .4;
       if(this.filters)this.filters.alpha.opacity = 40; 
      }
    
    function init(){
     var x = document.getElementsByTagName("IMG");
     for(var i = x.length;i--;){
      x[i].onmouseover=opaque;
      x[i].onmouseout=transparent;
     }
    }
    </script>
    
    
    </head>
    <body onload="init()">
    
    <img src="klematis.jpg"  />
    
    <img src="klematis2.jpg" />
    
    
    
    </body>
    </html>

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    197
    Thanks
    22
    Thanked 0 Times in 0 Posts
    Thank you!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •