change data onmouseover [Archive]

mtd

01-09-2004, 01:41 AM

I am trying (unsuccessfully) to create an IE/NS script that will change the contents of a <div> when the mouse is placed over an image. I have seen scripts like this before, which are pretty simple, but they only work in IE, not Netscape.

This is what I have so far, and I was hoping someone could help:

In the <head> :

<script language="javascript">
var oDiv1 = document.getElementById('services'), oDiv2 = document.getElementById('portfolio')

function Go1()
{
oDiv2.style.display='none';
oDiv1.style.display='inline';
}
function Go2()
{
oDiv2.style.display='inline';
oDiv1.style.display='none';
}
</script>

In the <body> :

<img src="images/nav/services.gif" onMouseOver="Go1();">

<img src="images/nav/services.gif" onMouseOver="Go1();">

<div id="services" style="display:none">services info</div>

<div id="portfolio" style="display:none">portfolio info</div>

Any help is appreciated - I am fairly new at this!
Thanks,
MTD

Kor

01-09-2004, 09:55 AM

Maybe you wanna written:

<img src="images/nav/services.gif" onMouseOver="Go1();">

<img src="images/nav/portfolio.gif" onMouseOver="Go[color=red]2[/code]();">

Beside this, now, the main error is that there is no object set up whitin the functions.

You may either set up the variables in each function or to build an extra function to set up the new objects.

first way :

<script language="javascript">
function Go1()
{
var oDiv1 = document.getElementById('services');
var oDiv2 = document.getElementById('portfolio');

oDiv2.style.display='none';
oDiv1.style.display='inline';
}
function Go2()
{
var oDiv1 = document.getElementById('services');
var oDiv2 = document.getElementById('portfolio');

oDiv2.style.display='inline';
oDiv1.style.display='none';
}
</script>

Second way, with a function fired in body, at onload event handler:

<script language="javascript">
function objSetup(){
oDiv1 = new setUp('services','none');
oDiv2 = new setUp('portfolio','none');
}
function setUp(id,display){
this.obj = document.getElementById(id).style;
this.obj.display = display;
return this.obj;
}
function Go1()
{
oDiv2.display='none';
oDiv1.display='inline';
}
function Go2()
{
oDiv2.display='inline';
oDiv1.display='none';
}
</script>
</head>

<body onload="objSetup()">