Website gimmicks

djracodex · Post by **djracodex** » Tue Dec 03, 2013 7:17 pm

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?

LibertyCabbage · Post by **LibertyCabbage** » Wed Dec 04, 2013 8:59 am

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.

LibertyCabbage · Post by **LibertyCabbage** » Wed Dec 04, 2013 5:27 pm

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>

djracodex · Post by **djracodex** » Thu Dec 05, 2013 2:52 pm

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

LibertyCabbage · Post by **LibertyCabbage** » Thu Dec 05, 2013 3:12 pm

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

Well, feel free to ask for help if you run into any issues trying to get your site the way you want it.

Comic Genesis Forums

Website gimmicks

Website gimmicks

Re: Website gimmicks

Re: Website gimmicks

Re: Website gimmicks

Re: Website gimmicks