...

View Full Version : Highlight an Image on Mouseover



hackerzlab
05-01-2006, 07:54 AM
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.



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

Kor
05-01-2006, 09:04 AM
switch the values in ternary operator
strength=(which==0)? 0.2 : 1

and, of course, remove the style from the object

coothead
05-01-2006, 09:20 AM
Hi there kor,

and, of course, remove the style from the object
Unfortunately, that will stop it working in Firefox. :eek:

Kor
05-01-2006, 09:23 AM
yea, than:

style="filter:alpha(opacity=100);-moz-opacity:1"

coothead
05-01-2006, 09:44 AM
Hi there kor,

the style can be removed from the object, like this...


<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

coothead
05-01-2006, 10:04 AM
Hi there hackerzlab,

as for your problem, I would not use that script.
Try it like this...


<!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

hackerzlab
05-03-2006, 03:08 PM
hey thanx for the help, it got it working. thank you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum