Member Avatar for jspence29

So for my website I am trying to create a more button, and a menu will pop up when I create this. There is a picture of an arrow for more, and a picture of a down arrow for less. I have the javascript code done, but it won't switch back from the down arrow to the up one. I would like to see if one of you can solve this. Here is my website http://spencedesign.netau.net/singaporehomemenu.html (don't worry I am going to make the arrows look better).
And here's my code

<html>
<head>
<title> Home </title>
<script type="text/javascript">
    function showMore() {
        if (more.style.display != "none") {
            more.style.display = "none";
        }
        else {
            more.style.display = "block";
        }
    }

    imgs=Array("more.png","less.png");
    var x=0;

    function change() {
    document.getElementById("more").src=imgs[++x];

        if (x==1) {
         x=0;
      }
    }
        if (!imgs[x+1]) {
         x=-1;
      }   
</script>


#bottomCorner

{
  position: fixed;
  bottom: 5px;
  right: 5px;
  z-index: 999;
  width: 300px;
  height: 30px;
  display: block;
  background-color: #fff;
  opacity: 0.8;
  filter: alpha(opacity=80);
  text-align: center;
  font-family: sans-serif;
}

#bottomCorner p

{
  margin-top: 7px;
}

#menu

{
  width: 300px;
  height: 60px;
  position: fixed;
  right: 5px;
  bottom: 40px;
  opacity: 0.8;
  filter: alpha(opacity=80);
  text-align: center;
  cursor: pointer;
  border: 2px solid black;
}
</style>

<head>
<!--[if IE]>
<img src="iehomepagecss.png" width="1500" height="625" />
<script>
alert("This website does not support your browser");
</script>
<![endif]-->
<!--[if !IE]> -->
<body>


<div id="background" >
<div id="container" >

<div id="link1" >
<a href="http://www.spencedesign.netau.net/singapore.html" >  Gallery </a></li>
</div>
<div id="link2" >
<a href="http://www.spencedesign.netau.net/singapore.html" > Tour </a></li>
</div>
<div id="link3" >
<a href="http://www.spencedesign.netau.net/singapore.html" >  Facts </a></li>
</div>
<div id="link4" >
<a href="http://www.spencedesign.netau.net/singapore.html" >  Author </a></li>
</div>
<div id="bottomCorner"><p> <font family="sans-serif"> Hello </font></p> </div>
<div id="menu"> <img id="more" src="more.png" alt="more" onclick="change()" width= "300px" onclick="showMore()"/> </div>
</div><!--Container-->
</div><!--Background-->



</body>
</html>

There is other CSS, I just included the relevant code

  • 3 Contributors
  • 5 Replies
  • 185 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by jspence29

Recommended Answers

All 5 Replies

Member Avatar for jspence29

This is embarrasing. I fixed it instead of x=0 after the first if it is supposed to be x=-1. Stupid mistake

Member Avatar for drjohn

Your site uses what is termed mystery meat navigation - areas that have to be prodded to find out what they are. This has been considered a bad interface for the last 10 - 12 years ! Enter the 21st century by giving them a normal navigation system.

Next, you have a background image that is a 2.5Mb image - this will slow down all users. Save it as a jpg (you have named it a jpg, but it is actually a bitmap file!!! Changing the extension is not converting the file type.)
When I converted it to a real jpg, it shrunk in size by a factor of ten to 262Kb , which will greatly please your users, especially those using a mobile phone with a low monthly data transfer limit. (Even 262Kb is a bit big, but it beats your original image out of site/sight)

Member Avatar for jspence29

I have heard of mystery meat, but I didn't think I had it. I was trying to do a bing like splashboard scheme, but I guess that only works if it isn't the links in the squares. And thank you for your Ideas with the image, how exactly would you go about converting it?

Member Avatar for JorgeM

You just need to use any image editing software. While Microsoft paint is very limited, it can do this for you. All you would do is open the file in mspaint, resize the picture (if you are using Win 7, it has this function) to a scaled down version maintaining the proper ratio. Then just save it as a .jpg file.

Edited by JorgeM
Member Avatar for jspence29

Okay thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.