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
    New Coder
    Join Date
    Sep 2012
    Posts
    32
    Thanks
    10
    Thanked 0 Times in 0 Posts

    How do you highlight an image on mouse over?

    I currently have the opacity set at 40. How can I create an event to highlight the image on mouseover.

    Code:
    <!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    <title>Product Page</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
    
    <script type = "text/javascript">
    //<![CDATA[
    <!--hide from incompatible browsers
    
    
    
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    
     //stop hiding -->
    //]]>
    
    </script>
    
    <style type="text/css">
    <!--
            body {background-color: #ffffff;}
            p { font: 1em Times serif; color: #000; }
            h2 { font: 2em Times serif; color: #000; }
            div.main {background-color: ffffff;}
        div.product {
            border-bottom: 1px black dashed;
            background-color: #CCC;
            padding: 5px;
            filter:alpha(opacity=40);
        opacity:.4;
            
    
    
    -->
    </style>
    
    </head>
    
    <body onload="MM_preloadImages('umph.png')">
    <div class = "main" style = "width: 800px">
    
            <h2>Some of Our Really Cool Products</h2>
            <hr>
            
            <div class = "product">
            <p><a href="#"  onclick="MM_swapImage('Image5','','umph.png',1)" onmouseout="MM_swapImgRestore()"><img src="image1.png" width="88" height="64" border="0" id="Image5"  /></a>Brick</p>
            </div>
      <div class = "product"
            <p><img src = "image2.png">Slope</p>
            </div>
            <div class = "product"
            <p class="out"><img src = "image3.png">Wall</p>
            </div>
    <div class = "product"
            <p><img src = "image4.png">Spoked Wheel</p>
            </div>
            
            <h2>You should buy them!</h2>
    
    </div>
    
    
    
    
    </body>
    
    </html>
    Last edited by hcrosex3; 09-18-2012 at 08:28 PM.

  • #2
    Regular Coder d'Anconia's Avatar
    Join Date
    Jan 2010
    Location
    Tempe, AZ
    Posts
    149
    Thanks
    16
    Thanked 6 Times in 6 Posts
    Depends what you mean by highlight. I'm pretty sure you can just add an event listener for mouseover on whichever image you want to highlight. Once that is triggered then have Javascript give the CSS the value of box-shadow:________ (whatever properties you want). If you wanted to highlight then you most likely would pick a bright color (like yellow).

    It's excellent for making stuff look aesthetically pleasing. More info:
    http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
    Last edited by d'Anconia; 09-18-2012 at 08:37 PM.
    Datagonia Web (My Portfolio)

    Powerful ideas for all lovers of personal and political freedom:
    Freedomain Radio
    Free Talk Live

  • #3
    New Coder
    Join Date
    Sep 2012
    Posts
    32
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by d'Anconia View Post
    Depends what you mean by highlight. I'm pretty sure you can just add an event listener for mouseover on whichever image you want to highlight. Once that is triggered then have Javascript give the CSS the value of box-shadow:________ (whatever properties you want). If you wanted to highlight then you most likely would pick a bright color (like yellow).

    It's excellent for making stuff look aesthetically pleasing. More info:
    http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
    I'm looking to create an event for mouse over that will pretty much remove the opacity. Is that possible? I'm not sure how i would tell javascript to change a value in css. That's whats got me confused.

  • #4
    New Coder
    Join Date
    May 2012
    Posts
    25
    Thanks
    0
    Thanked 1 Time in 1 Post
    Recently i had a scenario where i need to pin a jgrowl message(a jquery message board).I needed a notification change through two icons one with a background darker than the other to differentaite pin & unpin..you can see the example here

    http://fundapass.blogspot.in/2012/09...ith-pinup.html

    if you want simply a change in css,as in google home page menu bar this will do the trick
    Code:
     $('#panelroot > a').hover(
               function () {
            	   $(this).css("color","F8FAFC");
                 },
               function () {
                	 $(this).css("color","#B7C9D7");
               }
           );
      
      });

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Quote Originally Posted by hcrosex3 View Post
    I'm looking to create an event for mouse over that will pretty much remove the opacity. Is that possible? I'm not sure how i would tell javascript to change a value in css. That's whats got me confused.
    You don't need JavaScript, at all.

    And you certainly don't need the horrible horrible code that DrunkWalker produces.

    Just do it *ALL* with CSS:
    Code:
    <style type="text/css">
        div.product {
            border-bottom: 1px black dashed;
            background-color: #CCC;
            padding: 5px;
            filter:alpha(opacity=40);
            opacity:.4;
        }
        div.product:hover {
            filter:alpha(opacity=99);
            opacity:0.99; 
        }
    </style>
    Try it!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    hcrosex3 (09-19-2012)

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    You can even swap images vis CSS and :hover.

    Just use a BACKGROUND image, instead of <img> tag.

    And then just change background-image: url('/images/whatever.png'); in the :hover part of your CSS.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    hcrosex3 (09-19-2012)

  • #7
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can achieve this by CSS Image Hover effects. More about...CSS Image Hover

    Helsy


  •  

    Tags for this Thread

    Posting Permissions

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