Changes

ECourse - Custom Interface Buttons

965 bytes added, 15:56, 28 January 2015
no edit summary
For now just save the new eCourse asset with a title and grouping.
 
= Creating a HTML Template =
 
For this example we are using a template created for our Wixi.
 
We are going to build a simple table and add images and links to the table.
 
We will then apply some JavaScript to make the buttons resize when a user hovers over them. This gives a button effect.
 
It has three sections, CSS, HTML and JavaScript.
 
== CSS ==
 
The CSS sets the style and layout of the objects.
 
[[File:Asset_CSS.png]]
 
== HTML ==
 
The HTML draws a div and a table.
 
All elements have the CSS above applied to them.
 
Inside each table cell is a link and an image.
 
Each image has JavaScript applied to the onmouseover and onmouseout attributes.
 
[[File:Asset_HTML.png]]
 
== JavsScript ==
 
The JavaScript is very simple, it is used to resize the image when an action occurs.
 
When the mouse goes over an image the JavaScript increases the image size and when the mouse moves off the image it sets the image back to its original size.
 
[[File:Asset_JS.png]]
7,528
edits