Web Analytics Made Easy -
StatCounter A Question About Animating Buttons? - CodingForum

Announcement

Collapse
No announcement yet.

A Question About Animating Buttons?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • A Question About Animating Buttons?

    I am very new to html/css/web design in general and have a very basic understanding. I make imvu layouts -- hey, we all have to start somewhere -- but that's about the extend of my knowledge. So this might not even be posted in the right place, for all I know, and if that is the case, I'm sorry.

    My question is about animating buttons. I am not sure if this is even possible, but I was wondering if there was a way to animate a button this way. My idea was to have a static image as the general layout of the page, using a map to mark out the coordinates for each piece of the page/the tabs, and then have a gif laying over the static button that starts as transparent but actives upon hovering the cursor over it and animates into a highlighted version of the button. Is there a way to achieve this without a ton of additional coding/script? If not, are there any step by step beginners guides explaining precisely how to use the code/script and where to place it into the rest of my code, and how to make sure it's in the right place -- preferably using coords if at all possible?

    A very basic example of the codes I know how work with because I don't know what the actual name of this kind of code is:

    Code:
    <script>
      function changeNavigation(id)
      {document.getElementById('mainbox'). innerHTML=document.getElementById(id). innerHTML}
      </script>
    <img style="float:center:" src="http://orig06.deviantart.net/0f8c/f/2015/336/f/4/f4165cd243d21c98d0123c50dd79bd15-d9itckq.png" usemap="#ImageMap1">
    
    <map id="ImageMap1" name="ImageMap1">
      <area shape="rect" coords="000,000,000,000" id="1b" onclick="changeNavigation('Tab1')">
    
      <area shape="rect" coords="000,000,000,000" id="2b" onclick="changeNavigation('Tab2')">
    
      <area shape="rect" coords="000,000,000,000" id="3b" onclick="changeNavigation('Tab3')">
    
      <area shape="rect" coords="000,000,000,000" id="4b" onclick="changeNavigation('Tab4')">
    
      <area shape="rect" coords="000,000,000,000" id="5b" onclick="changeNavigation('Tab5')">
    
    <div id="video_box" style="width:000px; height:000px; position:absolute; left:000px; top:000px; z-index:1">
    
    PASTE GENERATED YOUTUBE CODE HERE
    
    </div>
    
    <div id="mainbox" style="position:absolute; left:000px; top:000px; width:000px; height:000px; overflow: auto; border:0px; background-color:transparent; color:#000000;font-size:10px"> <center> 
    
    PASTE TEXT FROM HOME TAB HERE
    
    </center></div>
    
    
    
    
    <div id="Tab1" style="display:none">
    <center> 
    
    HOME TAB GOES HERE
    
    </center>
    </div>
    
    
    
    <div id="Tab2" style="display:none">
    <center> 
    
    TAB TWO GOES HERE
    
    </center>
    </div>
    
    
    
    <div id="Tab3" style="display:none">
    <center> 
    
    TAB THREE GOES HERE
    
    </center>
    </div>
    
    
    
    <div id="Tab4" style="display:none">
    <center> 
    
    TAB FOUR GOES HERE
    
    </center>
    </div>
    
    
    
    <div id="Tab5" style="display:none">
    <center> 
    
    TAB FIVE GOES HERE
    
    </center>
    </div>

    Again, I'm a beginner, so please go easy on me for not knowing. If I'm not explaining plainly enough please let me know and I will try to go into more depth.

  • #2
    To answer your question, the most logical way in my mind, aside from the below, would be to open it in a photo editor, like photoshop and get the pixel dimensions of what you want, the top left corner and the sizes, then work with that to position it, and make the rest of it in the same way.

    However,

    I think the most logical approach would be learning HTML and CSS and re-coding the entirety of it.

    In the time it would take you to map out where everything is, make sure it is perfect, and then add more to that, if you used CSS, it would take only this:
    Code:
    .button {
      background-color: #123456; // Non highlighted Color
    }
    
    .button:hover {
      background-color: #234567; // Highlighted Color
    Codepen here

    Let me know if you need more help, if you do, feel free to either respond here, or DM me.

    Good luck!
    Riley
    Riley-Shannon.com - My Portfolio
    FraktalServices.com - My Company

    Comment

    Working...
    X