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
    110
    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
    Kor
    Kor is offline
    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,722
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there kor,
    and, of course, remove the style from the object
    Unfortunately, that will stop it working in Firefox.

  • #4
    Kor
    Kor is offline
    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,722
    Thanks
    0
    Thanked 240 Times in 235 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,722
    Thanks
    0
    Thanked 240 Times in 235 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
    110
    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
    •