JS problem in Netscape

snowflurry · 03-15-2005, 01:52 AM

Hi all,

I was hoping someone could help me to get this script working in Netscape. It works fine in all the other main browsers.

I had hoped to use it on my site, but seeing as a good portion of people use Netscape, it won`t be any good.

Here`s the script in question. Thankyou.

http://i-code.co.uk/javascript/imagenavigator.php

_Aerospace_Eng_ · 03-15-2005, 03:26 AM

here u go, netscape requires document.getElementById('') most of the time

Code:

<html>
<head>
<title>Menu Script</title>
<style>
a:visited{color:black;font-family:verdana}
a:link{color:black;font-family:verdana}
a:hover{color:blue;font-family:verdana}

td {color:black;font-family:verdana;font size:8pt}
p {color:black;font-family:verdana;font size:8pt;text-decoration: none}
h1 {color:black;font-family:verdana;font size:12pt;text-decoration: none}
</style>
<script>

/***********************************************************/
/** this script is free for any use, but please include  **/
/** a link to i-code.co.uk in any redistribution         **/
/** Author : Stephen Griffin, www.i-code.co.uk           **/
/**********************************************************/

function startmenu()
{
	document.getElementById('menu0').style.display = "none";
	document.getElementById('menu1').style.display = "none";
	document.getElementById('menu2').style.display = "none";
	document.getElementById('menu3').style.display = "none";
}

function menu0func()
{
	if(document.getElementById('menu0').style.display == "none")
	{
		startmenu();
		document.getElementById('menu0').style.display = "block";
	}
	else
	{
		startmenu();
	}
}
function menu1func()
{
	if(document.getElementById('menu1').style.display == "none")
	{
		startmenu();
		document.getElementById('menu1').style.display = "block";
	}
	else
	{
		startmenu();
	}
}
function menu2func()
{
	if(document.getElementById('menu2').style.display == "none")
	{
		startmenu();
		document.getElementById('menu2').style.display = "block";
	}
	else
	{
		startmenu();
	}
}
function menu3func()
{
	if(document.getElementById('menu3').style.display == "none")
	{
		startmenu();
		document.getElementById('menu3').style.display = "block";
	}
	else
	{
		startmenu();
	}
}
function changeImage(filename)
{
   document.getElementById('mainimage').src = filename;
}

</script>
</head>
<body onLoad="javascript:startmenu()">

<center><h1>DHTML Image Navigator Script</h1></center>
<table align="center" border="1">
<tr>
<td valign="top" width="20%">
<!--
Images can be added or removed by editing the following HTML tags.

There is no limit to the number of images in each Category, more can be added without changing the javascript above.
-->

<a href="javaScript:menu0func()">Category 1</a>
<div id="menu0">
	- <a href="javascript:changeImage('image1.jpg')">Image 1</a><br>
	- <a href="javascript:changeImage('image2.jpg')">Image 2</a><br>
	- <a href="javascript:changeImage('image3.jpg')">Image 3</a><br>
	- <a href="javascript:changeImage('image4.jpg')">Image 4</a><br>
</div>
<br>
<a href="javaScript:menu1func()">Category 2</a>
<div id="menu1">
	- <a href="javascript:changeImage('image2.jpg')">Image 2</a><br>
	- <a href="javascript:changeImage('image1.jpg')">Image 1</a><br>
	- <a href="javascript:changeImage('image5.jpg')">Image 5</a><br>
</div>
<br>
<a href="javaScript:menu2func()">Category 3</a>
<div id="menu2">
	- <a href="javascript:changeImage('image1.jpg')">Image 1</a><br>
	- <a href="javascript:changeImage('image2.jpg')">Image 2</a><br>
	- <a href="javascript:changeImage('image3.jpg')">Image 3</a><br>
</div>
<br>
<a href="javaScript:menu3func()">Category 4</a>
<div id="menu3">
	- <a href="javascript:changeImage('image1.jpg')">Image 1</a><br>
	- <a href="javascript:changeImage('image2.jpg')">Image 2</a><br>
	- <a href="javascript:changeImage('image4.jpg')">Image 4</a><br>
	- <a href="javascript:changeImage('image5.jpg')">Image 5</a><br>
</div>
<br>


</td>
<td valign="top" width="80%">

<img id="mainimage" src="blank.jpg">

</td>
</tr>
</table>
<p align="center"><a href="http://www.i-code.co.uk">www.i-code.co.uk</a></p>
</body>
</html>

snowflurry · 03-15-2005, 04:53 AM

Thankyou very much,

I`ve learned something new tonight

snowflurry · 03-16-2005, 04:26 AM

Also, would you be able to offer any suggestion on the following

My ambition is, when an image is loaded using the above script, I want to be able load another image to overlay over the top of the first. This overlaying will be a transparent gif with some textual content.

Now if this was plain old html, then I could use the image underneath as a background image, and go from there. Little bit more awkward with JS

Thankyou.

_Aerospace_Eng_ · 03-16-2005, 04:28 AM

well would u be interested in the link changing the background of o lets say a div and then using another link to write the image into that div or same link for both? if yes then i can whip something up if no then i wont waste my time

snowflurry · 03-16-2005, 05:25 AM

Lol, I had to read that a few times first!!! Yes, please if you wouldn`t mind

I could work around either two seperate links, or one for both.

I`m trying to learn about scripting and this place is by far the most responsive, and most patient to newcomers

_Aerospace_Eng_ · 03-16-2005, 11:46 AM

okay here is the one that is 2 links, its pretty self explanatory of how the links are setup

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu Script</title>
<style>
html,body {height:100%;}
a:visited{color:black;font-family:verdana}
a:link{color:black;font-family:verdana}
a:hover{color:blue;font-family:verdana}

td {color:black;font-family:verdana;font size:8pt}
p {color:black;font-family:verdana;font size:8pt;text-decoration: none}
h1 {color:black;font-family:verdana;font size:12pt;text-decoration: none}
div#container {width:530px;height:302px;margin-left:auto;margin-right:auto;border:1px solid #000000;padding:5px;}
div#links {width:120px;height:300px;float:left;border:1px solid #000000;}
div#mainimage {width:400px;height:300px;float:right;border:1px solid #000000;}
p#texthold {width:96%;height:95%;font-size:36px;color:#FFFFFF;margin-left:auto;margin-right:auto;margin-top:6px;text-align:center;}
</style>
<script>

/***********************************************************/
/** this script is free for any use, but please include  **/
/** a link to i-code.co.uk in any redistribution         **/
/** Author : Stephen Griffin, www.i-code.co.uk           **/
/**********************************************************/

function startmenu()
{
	document.getElementById('menu0').style.display = "none";
	document.getElementById('menu1').style.display = "none";
	document.getElementById('menu2').style.display = "none";
	document.getElementById('menu3').style.display = "none";
}

function menu0func()
{
	if(document.getElementById('menu0').style.display == "none")
	{
		startmenu();
		document.getElementById('menu0').style.display = "block";
	}
	else
	{
		startmenu();
	}
}
function menu1func()
{
	if(document.getElementById('menu1').style.display == "none")
	{
		startmenu();
		document.getElementById('menu1').style.display = "block";
	}
	else
	{
		startmenu();
	}
}
function menu2func()
{
	if(document.getElementById('menu2').style.display == "none")
	{
		startmenu();
		document.getElementById('menu2').style.display = "block";
	}
	else
	{
		startmenu();
	}
}
function menu3func()
{
	if(document.getElementById('menu3').style.display == "none")
	{
		startmenu();
		document.getElementById('menu3').style.display = "block";
	}
	else
	{
		startmenu();
	}
}
function changeImage(filename)
{
   document.getElementById('mainimage').style.background = 'url('+filename+')';
   document.getElementById('texthold').innerHTML='';
}
function addText(thetext,color)
{
   document.getElementById('texthold').innerHTML = '<span style="color:'+color+';">'+thetext+'</span>';
}
</script>
</head>
<body onLoad="javascript:startmenu()">

<center><h1>DHTML Image Navigator Script</h1></center>
<div id="container">
<div id="links">
<a href="javascript:menu0func()">Category 1</a>
<div id="menu0">
	- <a href="javascript:changeImage('image1.jpg')">Image 1</a><br>
	- <a href="javascript:changeImage('image2.jpg')">Image 2</a><br>
	- <a href="javascript:changeImage('image3.jpg')">Image 3</a><br>
	- <a href="javascript:addText('blah','#FF0000')">Add Text</a><br>
</div>
<br>
<a href="javascript:menu1func()">Category 2</a>
<div id="menu1">
	- <a href="javascript:changeImage('image2.jpg')">Image 2</a><br>
	- <a href="javascript:changeImage('image1.jpg')">Image 1</a><br>
	- <a href="javascript:addText('blah2','#0000FF')">Add Text</a><br>
</div>
<br>
<a href="javascript:menu2func()">Category 3</a>
<div id="menu2">
	- <a href="javascript:changeImage('image1.jpg')">Image 1</a><br>
	- <a href="javascript:addText('blah3','#FFFF00')">Add Text</a><br>
	- <a href="javascript:changeImage('image3.jpg')">Image 3</a><br>
</div>
<br>
<a href="javascript:menu3func()">Category 4</a>
<div id="menu3">
	- <a href="javascript:changeImage('image1.jpg')">Image 1</a><br>
	- <a href="javascript:changeImage('image2.jpg')">Image 2</a><br>
	- <a href="javascript:changeImage('image4.jpg')">Image 4</a><br>
	- <a href="javascript:changeImage('image5.jpg')">Image 5</a><br>
</div>
</div>
<div id="mainimage"><p id="texthold"></p></div>
</div>
</body>
</html>

and here is the example with one link that changes the background image and adds the text at the same time

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu Script</title>
<style>
html,body {height:100%;}
a:visited{color:black;font-family:verdana}
a:link{color:black;font-family:verdana}
a:hover{color:blue;font-family:verdana}

td {color:black;font-family:verdana;font size:8pt}
p {color:black;font-family:verdana;font size:8pt;text-decoration: none}
h1 {color:black;font-family:verdana;font size:12pt;text-decoration: none}
div#container {width:530px;height:302px;margin-left:auto;margin-right:auto;border:1px solid #000000;padding:5px;}
div#links {width:120px;height:300px;float:left;border:1px solid #000000;}
div#mainimage {width:400px;height:300px;float:right;border:1px solid #000000;}
p#texthold {width:96%;height:95%;font-size:36px;color:#FFFFFF;margin-left:auto;margin-right:auto;margin-top:6px;text-align:center;}
</style>
<script>

/***********************************************************/
/** this script is free for any use, but please include  **/
/** a link to i-code.co.uk in any redistribution         **/
/** Author : Stephen Griffin, www.i-code.co.uk           **/
/**********************************************************/

function startmenu()
{
	document.getElementById('menu0').style.display = "none";
	document.getElementById('menu1').style.display = "none";
	document.getElementById('menu2').style.display = "none";
	document.getElementById('menu3').style.display = "none";
}

function menu0func()
{
	if(document.getElementById('menu0').style.display == "none")
	{
		startmenu();
		document.getElementById('menu0').style.display = "block";
	}
	else
	{
		startmenu();
	}
}
function menu1func()
{
	if(document.getElementById('menu1').style.display == "none")
	{
		startmenu();
		document.getElementById('menu1').style.display = "block";
	}
	else
	{
		startmenu();
	}
}
function menu2func()
{
	if(document.getElementById('menu2').style.display == "none")
	{
		startmenu();
		document.getElementById('menu2').style.display = "block";
	}
	else
	{
		startmenu();
	}
}
function menu3func()
{
	if(document.getElementById('menu3').style.display == "none")
	{
		startmenu();
		document.getElementById('menu3').style.display = "block";
	}
	else
	{
		startmenu();
	}
}
function changeImage(filename)
{
   document.getElementById('mainimage').style.background = 'url('+filename+')';
   document.getElementById('texthold').innerHTML='';
}
function addBGandText(filename,thetext,color)
{
   document.getElementById('mainimage').style.background = 'url('+filename+')';
   document.getElementById('texthold').innerHTML = '<span style="color:'+color+';">'+thetext+'</span>';
}
</script>
</head>
<body onLoad="javascript:startmenu()">

<center><h1>DHTML Image Navigator Script</h1></center>
<div id="container">
<div id="links">
<a href="javascript:menu0func()">Category 1</a>
<div id="menu0">
	- <a href="javascript:changeImage('image1.jpg')">Image 1</a><br>
	- <a href="javascript:changeImage('image2.jpg')">Image 2</a><br>
	- <a href="javascript:changeImage('image3.jpg')">Image 3</a><br>
	- <a href="javascript:addBGandText('image3.jpg','blah','#FF0000')">Image 3 and Text</a><br>
</div>
<br>
<a href="javascript:menu1func()">Category 2</a>
<div id="menu1">
	- <a href="javascript:changeImage('image2.jpg')">Image 2</a><br>
	- <a href="javascript:changeImage('image1.jpg')">Image 1</a><br>
	- <a href="javascript:addBGandText('image4.jpg','blah2','#FFFF00')">Image 4 and Text</a><br>
</div>
<br>
<a href="javascript:menu2func()">Category 3</a>
<div id="menu2">
	- <a href="javascript:changeImage('image1.jpg')">Image 1</a><br>
	- <a href="javascript:addBGandText('image2.jpg','blah4','#006600')">Image 2 and Text</a><br>
	- <a href="javascript:addBGandText('image5.jpg','blah3','#0000FF')">Image 5 and Text</a><br>
</div>
<br>
<a href="javascript:menu3func()">Category 4</a>
<div id="menu3">
	- <a href="javascript:changeImage('image1.jpg')">Image 1</a><br>
	- <a href="javascript:changeImage('image2.jpg')">Image 2</a><br>
	- <a href="javascript:changeImage('image4.jpg')">Image 4</a><br>
	- <a href="javascript:changeImage('image5.jpg')">Image 5</a><br>
</div>
</div>
<div id="mainimage"><p id="texthold"></p></div>
</div>
<p align="center"><a href="http://www.i-code.co.uk">www.i-code.co.uk</a></p>
</body>
</html>

its setup so if you click on change image it will still work and it will reset the text

snowflurry · 03-16-2005, 05:59 PM

Grrrrr, I really hate to make things awkward for you! It wasn`t quite what I was after. Maybe I didn`t explain it very well.

The image that overlays the first one is just that, it is an image. The first image will be loaded first followed by the second image that will lay over the top. The second image is exactly the same size as the first and is transparent apart from several words on it.

What it is. I`m creating some landscape maps for geogprahy/weather work. They are hi-res maps, with the hills, river etc. I wanted to add another transparent image over the top with the towns and cities on it. I`ve already created these overlay/second images.

I can`t just add the text to the first image because they are being pulled live from another server, and updated each hour. ( yes I have permission to use them

)

Hope you understand what I am saying, and I do apologize for the trouble I am causing.

snowflurry · 03-17-2005, 03:31 AM

Hopefully it`s a simple edit, to do the above. Sorry if it appears I`m bumping the thread, I was worried it would drift away. Won`t do it again