SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    SitePoint Zealot Gar onn's Avatar
    Join Date
    Feb 2011
    Location
    Belgium
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    firs i would like to sy that you could use img:hover in CSS and set it to opaque t0 1 there.

    you problem is that:
    getElementsByTagName gives an array (or list,...) of elements so you should use a for loop to get all the elements.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Gar onn View Post
    firs i would like to sy that you could use img:hover in CSS and set it to opaque t0 1 there.
    Perfect! Thanks so much!


Bookmarks

Posting Permissions

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