|
JAVASCRIPT
SHORTCUTS
Rollovers(9P)
For many JavaScript has added a whole new dimension to web page
development. The ability to create interactivity within a web
page without using an outside program such as Flash, has made
JavaScript an invaluable tool. However, JavaScript that is not
hand coded, but created in an environment such Dreamweaver tends
to create code that is unnecessarily long and complex. For example,
look at the code created for rollovers in Dreamweaver. The code
is long and complicated and takes a long time to download. Recently
I discovered some examples of short hand-coded JavaScript solutions
that will save an inordinate amount of time. The sample below
is creating simple rollover buttons using just a line of code
within the img src tag.
(Color coded description)
<a href="http://jamug.com" target="_blank"><img
src="button1.jpg"
width="73" height="30" onmouseover="this.src='button2.jpg'"
onmouseout="this.src='button1.jpg'"/></a>
1. This is the the
original button.
2. This is the state
when mouse rolls over button1.jpg, and is replaced by the button2.jpg
image.
3. When the mouse
leaves the mouseover state it reverts back to the button1.jpg
image.
Below is the
code working on a button.
|
|
Webpage redirect
Today it is common for two version of a website to be created.
The main site is usually for the desktop and the secondary site
is for a mobile version. There are several ways to do this that
include both CSS and JavaScript. However, if you have two versions
of your site it is probably easiest to use this simple JavaScript
that can conveniently be placed within the header of your main
page. Notice how the "screen width" detects the size
of the browser window.
(Color coded description)
<script type="text/javascript">
if (screen.width <= 800)
{
window.location = "http://jamug.com/mobile/index.html";
}
</script>
1. This if statement
detects the screen size of the browser device, and if the screen
size is less than or equal to 800 pixels, it
is redirected using the window.location
command to the alternate address.
If you want to redirect to another site with no questions asked
just leave out the if statement and use only the window.location
statement. A sample is below.
<script
type="text/javascript">
window.location = "http://jamug.com/mobile/index.html";
</script>
|
