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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Posts
    112
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Highlight an Image on Mouseover

    this script makes the image dull and when you put your mouse over it, it comes back to its original size. Is there a possibility to do it the vice versa. Like the image's in normal state but get dim when you put the mouse over it. thank you.

    Code:
    <SCRIPT language="JavaScript1.2">
    <!-- Script courtesy of http://www.web-source.net - Your Guide to Professional Web Site Design and Development
    function makevisible(cur,which){
    strength=(which==0)? 1 : 0.2
    if (cur.style.MozOpacity)
    cur.style.MozOpacity=strength
    else if (cur.filters)
    cur.filters.alpha.opacity=strength*100
    }
    // -->
    </SCRIPT>
    <img src="yourimage.gif" width="96" height="134" style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)">

  • #2
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    switch the values in ternary operator
    strength=(which==0)? 0.2 : 1

    and, of course, remove the style from the object
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,803
    Thanks
    0
    Thanked 254 Times in 249 Posts
    Hi there kor,
    and, of course, remove the style from the object
    Unfortunately, that will stop it working in Firefox.

  • #4
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    yea, than:

    style="filter:alpha(opacity=100);-moz-opacity:1"
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,803
    Thanks
    0
    Thanked 254 Times in 249 Posts
    Hi there kor,

    the style can be removed from the object, like this...
    Code:
    
    <style type="text/css">
    <!--
    #foo {
        width:96px;
        height:134px;
        filter:alpha(opacity=100);
        -moz-opacity:1;
     }
    -->
    </style>
    
    
    <script type="text/javascript">
    <!--
    function makevisible(cur,which){
       strength=(which==0)?1:0.2;
    if(cur.filters) {
       cur.filters.alpha.opacity=strength*100;
      }
    else {
       strenth=getComputedStyle(cur,'').getPropertyValue('-moz-opacity');
       cur.style.MozOpacity=strength;
      }
     }
    // -->
    </script>
    
    <img id="foo" src="yourimage.gif" alt="" 
    onmouseover="makevisible(this,1)" 
    onmouseout="makevisible(this,0)" />
    
    coothead
    Last edited by coothead; 05-01-2006 at 09:50 AM.

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,803
    Thanks
    0
    Thanked 254 Times in 249 Posts
    Hi there hackerzlab,

    as for your problem, I would not use that script.
    Try it like this...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    .out {
        width:90px;
        height:134px;
        filter:alpha(opacity=100);
        -moz-opacity:1;
    }
    .over {
        width:90px;
        height:134px;
        filter:alpha(opacity=20);
        -moz-opacity:0.2;
    }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    onload=function(){
       im=document.getElementsByTagName('img');
    for(c=0;c<im.length;c++) {
    if(im[c].className=='out') {
       im[c].onmouseover=function() {
       makevisible(this);
        }
       }
      }
     }
    function makevisible(el){
       el.className="over";
       el.onmouseout=function() {
       el.className="out";
      }
     }
    // -->
    </script>
    
    </head>
    <body>
    
    <div>
    <img class="out" src="yourimage0.jpg" alt="" />
    </div>
    <div>
    <img class="out" src="yourimage1.jpg" alt="" />
    </div>
    
    </body>
    </html>
    
    coothead
    Last edited by coothead; 05-01-2006 at 10:43 AM.

  • #7
    Regular Coder
    Join Date
    Feb 2006
    Posts
    112
    Thanks
    23
    Thanked 0 Times in 0 Posts
    hey thanx for the help, it got it working. 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
    •