JavaScript Forum

**gregc** · 01-11-2010, 04:54 AM

Hi

I'm trying to get the following code to work with non IE browsers and am failing miserably. It creates three buttons and once you move your mouse over a button a text description is supposed to appear nearby. It works fine in IE but not in others. Have changed visibility to display and this still doesn't work. Please help

<html>
<head>
<script language="javascript">
var descriptions = new Array();
descriptions[0] = "<p>See whats been added to the web site recently</p>";
descriptions[1] = "<p>Find out more about me</p>";
descriptions[2] = "<p>Check out my links</p>";
function showDescription(descriptionIndex)
{
if (document.all)
{
DescriptionDiv.style.visibility = "visible";
DescriptionDiv.innerHTML = descriptions[descriptionIndex];
}
else
{
document.DescriptionDiv.display = "none";
document.DescriptionDiv.document.open();
document.DescriptionDiv.document.write("<div class='DescriptionDivStyle'>");
document.DescriptionDiv.document.write(description s[descriptionIndex]);
document.DescriptionDiv.document.write("</div>");
document.DescriptionDiv.document.close();
}
}

function clearDescription()
{
if (document.all)
{
DescriptionDiv.style.visibility = "hidden";
}
else
{
document.DescriptionDiv.display = "block";
}
}
</script>

<style>
div {border-width:thin;border-style:ridge;border-color:red;width:250px;height:70px;visibilty:hidden ;}
.DescriptionDiv {position:absolute;left:120px;top:50px;}
</style>
</head>

<body>
<a href="whatsnew.htm" onmouseover="showDescription(0)" onmouseout="clearDescription()"><img src="home_over.png" border="0"></a>
<br />
<a href="about.htm" onmouseover="showDescription(1)" onmouseout="clearDescription()"><img src="about_over.png" border="0"></a>
<br />
<a href="links.htm" onmouseover="showDescription(2)" onmouseout="clearDescription()"><img src="home_over.png" border="0"></a>
<br />
<div id="DescriptionDiv" name="DescriptionDiv" class="DescriptionDiv"></div>
</body>
</html>

**chrishirst** · 01-11-2010, 05:39 AM

I'm surprised it works in ANY browser with the code so messed up!.

Here's a working one

**gregc** · 01-11-2010, 06:07 AM

Hi! Looks like exactly what i'm after but could you show the code too please?
Thank you

**chrishirst** · 01-11-2010, 06:34 AM

view the source for the page. It's all in there.

One day I will get around to writing it all up

**gregc** · 01-11-2010, 09:01 AM

Hi, I've view sourced the page and copied the html, js files and css files (all except the htc file). The page won't display properly - no big number pics or small number pics on my computer - is there something I'm missing?

**chrishirst** · 01-11-2010, 10:02 AM

maybe the images?

**gregc** · 01-11-2010, 10:57 AM

This is going to sound daft but there are no images on the page

**chrishirst** · 01-11-2010, 11:03 AM

Really does bugg*** up the hotlinking

The images are backgrounds

**gregc** · 01-12-2010, 03:25 AM

Ah Right

Sry to keep asking but i am still having a prob

I've got the code and rejigged it into a basic table but am having probs putting images in. My browser fails to recognise the image and just displays the missing image icon.

Here's the code

<html>
<head>
<title>...</title>
</head>
<body>

<table border="1" bgcolor="lightblue" width="400" height="400">
<tr>
<td>
<div id="t0" onmouseover="toggle('h0', this.id);" style="cursor:hand;"><img src="button1.jpg"></div>
</td>
</tr>
<tr>
<td><div id="t1" onmouseover="toggle('h1', this.id);" style="cursor

ointer;">2</div>
</td>
</tr>
<tr>
<td><div id="t2" onmouseover="toggle('h2', this.id);" style="cursor

ointer;">3</div>
</td>
</tr>
<tr>
<td><div id="t3" onmouseover="toggle('h3', this.id);" style="cursor

ointer;">4</div>
</td>
</tr>
</table>

<table border="1" bgcolor="yellow">
<tr>
<td>
<div id="h0">Put content for option 1 here</div>
<div id="h1">Put content for option 2 here</div>
<div id="h2">Put content for option 3 here</div>
<div id="h3">Put content for option 4 here</div>
</td>
</tr>
</table>

<script type=text/javascript>
var blocks = Array("h0","h1","h2","h3");
hideAll();
function hideAll()
{
for(i=0;i<blocks.length;i++)
{
eH = document.getElementById(blocks[i])
eH.style.display = 'none';
eH.style.visibility = 'hidden';
}
}

function toggle(id,sender)
{
hideAll();
var e = document.getElementById(id).style;
var disp = 'block';
var vis = 'visible';
e.display = disp;
e.visibility = vis;
}

</script>
</body>
</html>

**chrishirst** · 01-12-2010, 11:12 AM

and does button1.jpg exist in the location? (the same folder as the HTML file)

**gregc** · 01-13-2010, 03:20 AM

Tch! No it didn't! Argh! Thanks for all your help