How-To Create A Cool Html Page to link to Web Apps in 10 minutes
Posted: September 10, 2010 Filed under: browser, Chrome/chromium, How-To, Internet, Original Article, Techno irrelevency ., Tutorial, Web 2.0 | Tags: apps, calender, chrome, css, facebook, gmail, google, html, javascript, jquery, tutorial, web, webapps, wordpress 2 Comments
When Google Chrome Rolled out it added the new feature of creating application shortcuts , but you had to have
different shortcuts for different apps like Gmail, Calendar , Facebook … etc . So I created a HTML page using which I can Link to other Apps.
Creating just a HTML Page is very easy ,but I wanted more than Just 4 links that I can click, I needed Animated effects and Icons , so I made it using JQuery .
Click Here to check out the Demo .
Note: In this tutorial I assume you the reader have at least a very basic understanding of HTML.
The icons are just images that can be downloaded from the internet , I recommend a Google Image Search for this.
Download the images you want to a Single folder .
So lets Begin By Creating a HTML File , but before we do this I recommend using a good text editor Like Notepad++ , but this can also be done using just plain windows notepad.
This tutorial is divided into 2 Sections The <head> Section and The <Body> Section
The <head> Section:
Begin the HTML file by typing <html>
<html>
<head>
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’ ></script>
<script>$(document).ready(function(){
$(“#Gmail,#GoogleCalender,#Picasa,#Wordpress,#Facebook”).mouseover(function(){
$(this).width(200);
document.title=$(this).attr(“id”);
});
$(“#Gmail,#GoogleCalender,#Picasa,#Wordpress,#Facebook”).mouseleave(function(){
$(this).width(150);
document.title=”WEB App Links”;
});
$(“#Gmail”).click(function(){
window.location.replace(“http://www.gmail.com”);
});
$(“#GoogleCalender”).click(function(){
window.location.replace(“http://www.google.com/calendar/”);
});
$(“#Picasa”).click(function(){
window.location.replace(“http://www.picasaweb.google.com”);
});
$(“#Wordpress”).click(function(){
window.location.replace(“http://www.wordpress.com”);
});
$(“#Facebook”).click(function(){
window.location.replace(“http://www.facebook.com”);
});});
</script>#links{
text-align:center;
}</style>
</head>
After opening The the we must include the JQuery Library to do this add the following code
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’ ></script>
This code indicates that the Jquery Library is at
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
and that the browser must include it .You can also get the Jquery Library from www.Jquery.com .
I will return to the rest of The <head> section after completing the The <body> section for better understanding
The <body> Section:
Begin the <body> of the HTML file
<body>
<div id=”Links”>
<img src = “GmailIcon.png” id=”Gmail” width=150>
<img src = “GoogleCalenderIcon.jpg” id=”GoogleCalender” width=150>
<img src = “PicasaIcon.jpg” id=”Picasa” width=150>
<img src = “WordPressIcon.png” id=”Wordpress” width=150>
<img src= “facebookIcon.png” id=”Facebook” width=150>
</div>
</body></html>
Create a new <div> with id=”Links” like so
<div id=”Links”>
the id attribute is to easily Select the <div> when needed.
Now we add the images using the <img> tag like so
<img src = “GmailIcon.png” id=”Gmail” width=150>
<img src = “GoogleCalenderIcon.jpg” id=”GoogleCalender” width=150>
<img src = “PicasaIcon.jpg” id=”Picasa” width=150>
<img src = “WordPressIcon.png” id=”Wordpress” width=150>
<img src = “facebookIcon.png” id=”Facebook” width=150>
The id attribute here is again to uniquely select a single object from all the image objects , so make sure you give unique and meaningful names for easy understanding .
The width attribute is used to specify the width of the image in pixels.
The src attribute specifies the source of the image , (i.e) the path and filename of the image .After adding the images close the </div> ,</body> and the </html>
Now that the images are added we can move on to Adding the effects , So Lets return to THE Section.
The <head> Section Continued……..
We add a script to the HTML file by opening a <script> tag. Inside the <script> tag we can write the Jquery Script .
$(document).ready(function(){
Tell the browser to execute the code that follows , after the webpage has loaded.
To Achieve the Highlight animation we use the following code
The $ symbol is a shorthand for the Jquery function.
$(“#Gmail,#GoogleCalender,#Picasa,#Wordpress,#Facebook”).mouseover(function(){
$(this).width(200);
document.title=$(this).attr(“id”);
});
The #id selector in Jquery tells the browser to select the object with given id
Eg: #Gmail selects the object with id=”Gmail” if you recall the object is
<img src = “GmailIcon.png” id=”Gmail” width=150>
We can select multiple objects by separating #id selector with commas .
.mouseover() Tells the browser to execute the code that follows when the mouse moves over the specified/selected objects.
The following
$(this).width(200);
sets the width of the object to “200” , ‘this’ Keyword is used to specify the currently selected .
To set the title of the webpage we use the following code.
document.title=$(this).attr(“id”);
The next piece of code is similar to the above
$(“#Gmail,#GoogleCalender,#Picasa,#Wordpress,#Facebook”).mouseleave(function(){
$(this).width(150);
document.title=”WEB App Links”;
});
The ‘.mouseleave()’ statement is used to execute the code that follows when the mouse is moved away from the object .
This Completes the animation part of the Webpage , but we still need to link each image to the corresponding WebApp like Gmail,Facebook….etc.
To link Gmail for example we use
$(“#Gmail”).click(function(){
window.location.replace(“http://www.gmail.com”);
});
#Gmail is used to select the Gmail image/icon .click executes the code that follows when the image is clicked.
window.location.replace(“http://www.gmail.com”); Redirects the page to www.gmail.com .
A similar code is used for all the other sites .
And finally this
<style type=”text/css”>
#links{
text-align:center;
}</style>
is used to align all the images in the center.
So the Full code is
<html>
<head>
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’ ></script>
<script>$(document).ready(function(){
$(“#Gmail,#GoogleCalender,#Picasa,#Wordpress,#Facebook”).mouseover(function(){
$(this).width(200);
document.title=$(this).attr(“id”);
});
$(“#Gmail,#GoogleCalender,#Picasa,#Wordpress,#Facebook”).mouseleave(function(){
$(this).width(150);
document.title=”WEB App Links”;
});
$(“#Gmail”).click(function(){
window.location.replace(“http://www.gmail.com”);
});
$(“#GoogleCalender”).click(function(){
window.location.replace(“http://www.google.com/calendar/”);
});
$(“#Picasa”).click(function(){
window.location.replace(“http://www.picasaweb.google.com”);
});
$(“#Wordpress”).click(function(){
window.location.replace(“http://www.wordpress.com”);
});
$(“#Facebook”).click(function(){
window.location.replace(“http://www.facebook.com”);
});});
</script>
<style type=”text/css”>
#links{
text-align:center;
}</style>
</head><body>
<div id=”Links” >
<img src =’GmailIcon.png’ id=”Gmail” width=150>
<img src =”GoogleCalenderIcon.jpg” id=”GoogleCalender” width=150>
<img src =”PicasaIcon.jpg” id=”Picasa” width=150>
<img src =”WordpressIcon.png” id=”Wordpress” width=150>
<img src=”facebookIcon.png” id=”Facebook” width=150>
</div>
</body></html>
To Demonstrate I have made a Working Website , click Here to go to the Demo .
This Example Works in IE7 and above , FireFox 3.5 and above and Chrome 5.0 and above
Here is a video of the Code in action
Post your Comments Below !
Gautam's β∟Ω₲ /Beta.log/ 
hey good one!!
super cool!!