Website gimmicks

Think your comic can improve? Whether it's art or writing, composition or colouring, feel free to ask here! Critique and commentary welcome.

Website gimmicks

Postby djracodex on 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?
Image
User avatar
djracodex
Regular Poster
 
Posts: 179
Joined: Sat Jun 02, 2012 4:13 pm

Re: Website gimmicks

Postby LibertyCabbage on 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.
ImageImage
"Seems like the only comics that would be good to this person are super action crazy lines, mega poses!"
User avatar
LibertyCabbage
Cartoon Hero
 
Posts: 4663
Joined: Tue Jan 25, 2005 4:08 pm
Location: bat country

Re: Website gimmicks

Postby LibertyCabbage on 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>
ImageImage
"Seems like the only comics that would be good to this person are super action crazy lines, mega poses!"
User avatar
LibertyCabbage
Cartoon Hero
 
Posts: 4663
Joined: Tue Jan 25, 2005 4:08 pm
Location: bat country

Re: Website gimmicks

Postby djracodex on 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 :cry:
Image
User avatar
djracodex
Regular Poster
 
Posts: 179
Joined: Sat Jun 02, 2012 4:13 pm

Re: Website gimmicks

Postby LibertyCabbage on 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 :cry:
Well, feel free to ask for help if you run into any issues trying to get your site the way you want it.
ImageImage
"Seems like the only comics that would be good to this person are super action crazy lines, mega poses!"
User avatar
LibertyCabbage
Cartoon Hero
 
Posts: 4663
Joined: Tue Jan 25, 2005 4:08 pm
Location: bat country


 

Return to Technique Tips and Tricks



Who is online

Users browsing this forum: No registered users and 3 guests