How do you highlight an image on mouse over?

hcrosex3 · 09-18-2012, 07:24 PM

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>

d'Anconia · 09-18-2012, 07:35 PM

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

hcrosex3 · 09-18-2012, 07:43 PM

Quote:

Originally Posted by d'Anconia

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.

sayannayas · 09-18-2012, 08:42 PM

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");
           }
       );
  
  });

Old Pedant · 09-18-2012, 11:53 PM

Quote:

Originally Posted by hcrosex3

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!

Old Pedant · 09-18-2012, 11:56 PM

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.