Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JS problem in Netscape

    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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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>

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thankyou very much,

    I`ve learned something new tonight

  • #4
    New Coder
    Join Date
    Mar 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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

  • #6
    New Coder
    Join Date
    Mar 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by snowflurry; 03-16-2005 at 05:28 AM.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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

  • #8
    New Coder
    Join Date
    Mar 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by snowflurry; 03-16-2005 at 06:16 PM.

  • #9
    New Coder
    Join Date
    Mar 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •