image opacity (targeting a div problems) [Archive] - HTML Forums

View Full Version : image opacity (targeting a div problems)

chaosyndrome

01-28-2005, 11:43 AM

ok guys, i have a little trouble getting this to work like i want to.

i'm sure it's pretty easy, but i've tryed to solve it and searching but i can't find a solution.

javascript is still new to me, so i'm sure it's why i can get this to work properly.

i'm trying to learn it, but is somewhat dificult when you're learning by yourself.

the code bellow works fine, i got the script from the web, can't recall where.

what i want to do is when you do the mouseover function on the 'contactos_botao' div, the image on the 'contactos_text' div will run the script.

i just can't get it to target the div.

thank you for all the help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>image opacity test</title>

<style type="text/css">

body {
background-color:#FFFFFF;
}

#horizon {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
display: block;
}

#container {
position: absolute;
width: 600px;
height: 380px;
margin-left: -300px;
top: -190px;
left: 50%;
}

#contactos_botao {
width: 35px;
height: 52px;
position: absolute;
top: 85px;
left: 150px;
}

#contactos_texto {
width: 138px;
height: 28px;
position: absolute;
top: 100px;
left: 0px;
}
</style>

<script language="JavaScript1.2">

function high(which2)
{
theobject=which2
highlighting=setInterval("highlightit(theobject)",20)
}
function low(which2)
{
clearInterval(highlighting)
which2.filters.alpha.opacity=0
}
function highlightit(cur2)
{
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=17
else if (window.highlighting)
clearInterval(highlighting)
}

</script>
</head>

<body>



<div id="horizon">
<div id="container">

<div id="contactos_botao">
<img src="http://xorisso.home.sapo.pt/html/contactos_botao.gif" style="filter:alpha(opacity=0); -moz-opacity:1; border:2px;" onmouseover="high(this)" onmouseout="low(this)" />
</div>

<div id="contactos_texto">
<img src="http://xorisso.home.sapo.pt/html/contactos_text.gif" />
</div>

</div>
</div>

</body>
</html>

RysChwith

01-28-2005, 01:22 PM

Changeonmouseover = "high( this )"toonmouseover = "high( document.getElementById( \"contactos_texto\" )"and you should be golden.

Rys

chaosyndrome

01-28-2005, 01:46 PM

doesn't really work.

i already had tryed that but witouht the \\ between 'contactos_texto'

i think it has something to do with the 'wich2' variable in the script.

the function is 'high(wich2)'

i think it should be somthing like 'high(DivId)' or something like that.

i've tryed a few things, but since i don't yet understand javascript that well, i haven't get it to work.

chaosyndrome

02-04-2005, 06:41 AM

a little bump hopping that someone could help me in this.

RysChwith

02-04-2005, 08:29 AM

The particular name used isn't important. It's just the local name for whatever gets passed to the script. The code I suggested passes the div to the script as an object, which seemed to be what it required. I'll take another look at it.

Rys

RysChwith

02-04-2005, 08:43 AM

Okay, a couple small mistakes in the code I posted previously. IE doesn't seem to like the \", so just use ' instead. Also, I left off the ending parentheses. So, like this:onmouseover = "high( document.getElementById( 'contactos_texto' ) )"
onmouseout = "low( document.getElementById( 'contactos_texto' ) )"Note that the line break is just to prevent the code from stretching this page too much; it shouldn't be in your finished code (although it won't hurt it). After that, my browser bombs out on "filters.alpha," but I'm using IE5.0, so I'm not sure you'd be getting the same answer. Not sure I can help you beyond that, as I think the filters are a 5.5+ thing.

Rys