Page 1 of 1

Website gimmicks

PostPosted: Tue Dec 03, 2013 7:17 pm
by djracodex
Note: This is asking for help, but I didn't feel it needed to be in the help forum

Here's my vision. I want an image that if you click a certain part of it, it will bring up another image (in the same page, below/above/on top of with a back button the initial image). I feel like this is a Flash sort of thing, but I have no idea where to look or start.

Does anybody have any experience with this, or can send me on a good start to my adventure in Flash?

Re: Website gimmicks

PostPosted: Wed Dec 04, 2013 8:59 am
by LibertyCabbage
I coded something like this in Javascript for a website I worked on a few years ago. IIRC, it used onClick to toggle between "hidden" and "visible" properties, or something like that. I'll see if I have a copy of the code saved on my computer later when I get home.

Re: Website gimmicks

PostPosted: Wed Dec 04, 2013 5:27 pm
by LibertyCabbage
OK, try this.

Code: Select all
<html>
<head>
<title>your site's name</title>

<link rel="stylesheet" href="template.css" type="text/css" />


<script type="text/Javascript">
<!--
function display (category) {
   var whichcategory = document.getElementById(category);
   if (whichcategory.className=="show") {
      whichcategory.className="hide";
   } else {
      whichcategory.className="show";
   }
}
-->
</script>

</head>
<body>

<div class="Navigation">
   <a href="javascript:display('About Us')" class="Group">About Us</a>
<div class="hide" id="About Us">
      <a href="pages/mission.html" class="Option">Mission Statement</a>
      <a href="pages/staff.html" class="Option">Staff</a>
<a href="pages/contact.html" class="Option">Contact Us</a>
</div>
</div>

</body>
</html>


Then, to make it work, you need to add this to your CSS:

Code: Select all
.show {
   display:inline;
}
.hide {
   display:none;
}

I.e., when the hyperlink's clicked, the class for the hidden stuff changes to "show," and when the link's clicked again, the class changes back to "hide." In this example, the "Navigation," "Group," and "Option" classes are used to stylize the buttons.

If you want a "Back" button as one of the options, you could try adding another line, like this:

Code: Select all
<div class="Navigation">
   <a href="javascript:display('About Us')" class="Group">About Us</a>
<div class="hide" id="About Us">
<a href="javascript:display('About Us')" class="Option">Back</a>
      <a href="pages/mission.html" class="Option">Mission Statement</a>
      <a href="pages/staff.html" class="Option">Staff</a>
<a href="pages/contact.html" class="Option">Contact Us</a>
</div>
</div>

Re: Website gimmicks

PostPosted: Thu Dec 05, 2013 2:52 pm
by djracodex
Thanks, LC! I look forward to spending several hours banging my head against my monitor trying to get everything to work perfectly, and at least I have a head start :cry:

Re: Website gimmicks

PostPosted: Thu Dec 05, 2013 3:12 pm
by LibertyCabbage
djracodex wrote:Thanks, LC! I look forward to spending several hours banging my head against my monitor trying to get everything to work perfectly, and at least I have a head start :cry:
Well, feel free to ask for help if you run into any issues trying to get your site the way you want it.