change opacity?

darkprince · Nov 4, 2002

hey

i was wondering if i could make it so that when my mouse isn't over the image the opacity is say 75% but when i hold my mouse over the image it goes to 100% opacity?

i dont know if you can do this but anyway

thanks in advance

ciao

DeZiner · Nov 4, 2002

You will need two images to accomplish this. Set the main image as the 75% opaque one. Then use a mouseover to insert the 100% image. DeZiner
Never be afraid to try something new.
Remember that amateurs built the Ark.
Professionals built the Titanic

xutopia · Nov 4, 2002

actually there is a way to do it using scripting.

I do it on my personal site (

http://www.xutopia.com)

check on the right side of the page. I actually use an API in JavaScript that I made to help me do it. But if you want here the snippet you'd really need to make it happen on your site :

<script>

// this function is a piece of the API just plug it in the top of your page
function Div(id)
{
var obj = false, type = typeof id;

if(typeof id == "string&quot

{
obj = xapi.dom ? document.getElementById(id) : document.all[id] ;
}
else if (type.indexOf("object&quot

!= -1)
{
obj = id;
}

if (!obj)
{
return false;
}

// special
obj.getOpacity = function()
{
/opacity=(\d{1,3})/i.test(obj.style.filter);
return (_ie) ? RegExp.$1 : parseInt(obj.style.MozOpacity) ;
}

obj.setOpacity = function(o)
{
if (xapi.moz)
{
obj.style.MozOpacity = o + "%";
}
else if (obj.style.filter)
{
obj.style.filter = 'alpha(opacity=' + o +')'
}
}
}
</script>

<img src="imgs/home.gif" id="homeIco" onmouseover="Div(this.id).setOpacity(100)" onmouseout="Div(this.id).setOpacity(50)" style="cursor

ointer;Moz-Opacity-:50%;filter:alpha(opacity=50);" width="32" height="25" alt="Go back home">

I just ripped this whole thing out of my site maybe I forgot a detail or something. Let me know if it works for you. Gary

http://www.xutopia.com

Haran

darkprince · Nov 5, 2002

hey thanks but it didn't work but i prob put it on the page wrong this is what the whole thing looks like

<html>
<head><title>img</title></head>

<script>

// this function is a piece of the API just plug it in the top of your page
function Div(id)
{
var obj = false, type = typeof id;

if(typeof id == "string&quot

{
obj = xapi.dom ? document.getElementById(id) : document.all[id] ;
}
else if (type.indexOf("object&quot

!= -1)
{
obj = id;
}

if (!obj)
{
return false;
}

// special
obj.getOpacity = function()
{
/opacity=(\d{1,3})/i.test(obj.style.filter);
return (_ie) ? RegExp.$1 : parseInt(obj.style.MozOpacity) ;
}

obj.setOpacity = function(o)
{
if (xapi.moz)
{
obj.style.MozOpacity = o + "%";
}
else if (obj.style.filter)
{
obj.style.filter = 'alpha(opacity=' + o +')'
}
}
}
</script>

<body>

<img src="left1.JPG" id="homeIco" onmouseover="Div(this.id).setOpacity(100)" onmouseout="Div(this.id).setOpacity(50)" style="cursor

ointer;Moz-Opacity-:50%;filter:alpha(opacity=50);" alt="Banner">

</body>

</html>

thanks in advance

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

change opacity?

darkprince

Programmer

DeZiner

Programmer

xutopia

Programmer

darkprince

Programmer

Similar threads

Part and Inventory Search

Sponsor