Create Remote Links

In this post I will explain a technique for creating remote links on your web page. It's easy using jQuery to create these effects.

Finished Look

Click ((here)) for a demo of the finished remote link page.

First Step:
Create containers for the links and images to be manipulated with jQuery.
Example:

	<div id='menu_slideimages'>
	<div id='menu_slideimages_inner'>
	<div id='menu_initial'>
	<div id='menu_initial_inner'>
	<div><img src="initial.jpg" /></div>
	</div><!--end menu_initial_inner-->
	</div><!--end-menu-initial-->
	<div><img src="about.jpg" /></div>
	<div><img src="projects.jpg" /></div>
	<div><img src="blog.jpg" /></div>
	<div><img src="home.jpg" /></div>
	</div><!--end-menu_slideimages_inner-->
	</div><!--end-menu_slideimages-->

view raw container-for-images-links hosted with ❤ by GitHub

Second Step:
Arrange the container using CSS. Add the "overflow: hidden" property in this slide-show effect to keep the other images from showing.
Example:

	#top_menu #menu_slideimages {
	float: right;
	height: 60px;
	width: 468px;
	margin-right: 5px;
	overflow: hidden;
	position: relative;
	text-align: left;
	}

view raw CSS-with-overflow-hidden hosted with ❤ by GitHub

Third Step:
Create a jQuery script to slide the divs containing the images up in the stacking order.
Example:

	var slideimages = $('#menu_slideimages_inner');
	var initial = $('#menu_slideimages_inner #menu_initial_inner');
	$('#top_menu .home').click(function () {
	initial.css('display', 'none');
	slideimages.stop().animate({
	top: '-240px'
	}, 300);
	initial.css('display', 'none');
	});

view raw Slide-image-up hosted with ❤ by GitHub

Click ((here)) for the project code.

Modify Dropdown Navigation (Part 2)

This post is the second part on modifying a sample dropdown navigation bar. I will discuss the changes to the CSS file that will complete this modification. In this tutorial, the colors will be converted from a green to a blue hue of similar intensity. This will require modifying the hue and not the saturation or brightness (HSB).

Step 1:
Download the sample navigation ((here)). Once you unzip the files, open the "pro_dropdown_2.css" file in an editor. Locate all the ".gif" files and rename the file names from the existing file name to the file names you chose from the previous post.

Example:
three_0.gif to blue_0.gif

Copy the new ".gif" files you created to the website folder.

Step 2:
Change all the green hue colors to blue hue colors. This can be done by locating the existing green colors that start with a "#" character. Once you find the hex color code, change it to a similar blue hue. This can be done by loading Photoshop and opening up a new blank image. In the toolbox, click the foreground or background color selection box. This will bring up the "Color Picker". Type in the first hex color code you find in the "pro_dropdown_2.css" file.

Example:
background: #bbd37e

Change this hue to an equivalent blue hue by changing the "H:" value. This can be done by adding 120 to 77 which is 197. Enter 197 in the "H:" box.

Copy the new hex value which is #7fbcd4 and replace this with the original value in the CSS file. Repeat this process for all the green color hues in the file.

Click ((here)) for a demo of the finished navigation bar.

Modify Dropdown Navigation (Part 1)

Sometimes you come across examples with its own graphics and you want to modify it to suit your needs. I have separated this tutorial into the graphical and the code modifications.

The first part will go into the recreation of the graphics so that you can adjust it to your needs. The code and graphics from Professional Dropdown #2 will be used for this exercise. I will show how to simulate the effect of these images in Photoshop and change the colors in the graphics from the existing shade of green to the same shade of in blue.

The existing graphics for this example are:

three_0.gif

three_0a.gif

three_1.gif

three_1a.gif

The second graphic on the list is "three_0a.gif" which is a basic glossy button with a small white triangle. The size is 300px wide by 35px high. The graphic "three_0.gif" is a slice of  "three_0a.gif" and can be created in the same artwork. The same for "three_1.gif" and "three_1a.gif".

Step 1:
Create an new file in Photoshop with the dimensions of 600px wide by 70px high which is double the size of the original graphic. It's easier to start with a large file to fill up the screen
and reduce the size later to the required dimensions.

Step 2:
Set the foreground color by clicking on the color swatch and choosing a blue "#0000ff" in the "Color Picker". With the top layer highlighted, click "Edit", "Fill...",  choose "Foreground Color" and click "OK".

Step 3:
Switch the the foreground color by pressing the "x" key and click on the foreground color to bring up the "Color Picker". Choose a white color "#ffffff and click "OK". Create a gradient overlay on top of the layer by clicking "Layer", "Layer Style", "Gradient Overlay...". With the "Gradient Overlay" selection of the "Layer Style" selected, click on the gradient dropdown menu. This will bring up the "Gradient Editor" Adjust the gradient to your liking and click "OK". To get a more detailed tutorial on creating a gradient with the editor, ((click here)).
 

Step 4:
Add an arrow to the image by clicking on "Layer", "New", "Layer". Right click on the layer and select "Layer Properties". In the name box type "arrow" and click "OK". Click and hold the "Rectangle Tool" (U) and select the "Polygon Tool". Type "3" in the "Sides" box at the top. Set the foreground color to white or a color that will stand out. While holding down the shift key, draw a triangle at the top of the image. Choose the "Move Tool" (V) and position it to the desired location.

Step 5:
Resize the image by clicking on "Image", "Image Size...". Type 300 pixels for the width and 35 pixels for the height and click "OK". Click on "File" and then "Save for Web...". Choose "GIF 128 no Dither", check "Transparency" and click "Save". Choose the name "blue_0a.gif" and the folder where the original graphics are located.

Step 6:
Crop and small slice of the image to create the "blue_0.gif" by selecting the "Crop Tool" (C) and dragging it over a small section of the image.  Click on "File" and then "Save for Web...". Choose "GIF 128 no Dither", check "Transparency" and click "Save". Choose the name "blue_0.gif" and the folder where the original graphics are located.

Step 7:
Reverse the previous crop in step 6 to bring the image back to it's original dimensions by pressing CTL-Z or stepping back one step in the "History" tab. Highlight the "Layer 1" layer. Click on "Image", "Adjustments" and "Brightness/Contrast...". Increase the contrast to 30 and click "OK".

Step 8:
Highlight the "Layer 1" layer. Click on "Layer", "Layer Style", "Bevel and Emboss...". Leave the settings on their defaults except Style: Inner Bevel, Direction: Down, Size: 3px.

Step 9:
Click on "File" and then "Save for Web...". Choose "GIF 128 no Dither", check "Transparency" and click "Save". Choose the name "blue_1a.gif" and the folder where the original graphics are located.
Turn off the "arrow" layer visibility and click on "File" and then "Save for Web...". Choose "GIF 128 no Dither", check "Transparency" and click "Save". Choose the name "blue_1.gif" and the folder where the original graphics are located.

Push Button Tutorial for Your Website

This comprehensive tutorial will give you the information you need to create a push-button graphic effect for your website.You will need Photoshop 6 or higher and a HTML editor such as Visual Web Developer Express.

Demo - Click on image:

 



Photoshop tutorial.

Open an 800px x 600px new image with white background on the base layer.

Double-click base layer to unlock it.
Add a new transparent layer on top of base layer.

Choose a medium color for foreground.
Draw a wide rectangle with a round rectangle tool (U).

 
Drag the layer of the rectangle to make a copy.

Select the "Move" tool (V) while the top rectangle layer is highlighted.

Move the rectangle with up the arrow key until the rectangle is above the lower rectangle and no white space is visible.

Select the upper rectangle layer:
  Select "Layer", "Layer Styles", "Bevel and Emboss"
  Style: Inner Bevel
  Technique: Smooth
  Depth: 100%
  Direction: Up
  Size: 10px
  Soften: 0px
  Angle: 120 degrees
  Global Light: checked
  Altitude: 30 degrees
  Gloss Contour: linear
  Anti-aliased: unchecked
  Hightlight Mode: Screen
  Opacity: 75%
  Shadow Mode: Multiply
  Color: Black
  Opacity: 75%

Select the lower rectangle layer:
  Everything the same as upper rectangle except - Size: 7px
Select "Color Overlay"
  Blend Mode: Difference
  Opacity: 10%

Drag the base layer to the trash can icon to create a transparent background.
Merge all layers.
Select "Layers", "Merge Visible" or Ctl-Shift-E.
Select "Image", "Trim...":
  Based on: "Transparent Pixels"
  Trim Away: "Top, Bottom, Left, Right" check boxes selected
Select "Image", "Image Size":
  Height: 96px
  Scale Styles: checked
  Constrain Proportions: checked
  Resample Image: Bicubic Sharper

 
Select "Crop Tool" (C).
Click from the outside of the upper left-hand corner of the cropped image and drag right and down to select a few pixel  left of the right-hand edge of image.

Select "File", "Save for Web...":
  Preset: PNG-24
  Interlaced: Unchecked
  Transparency: checked
  Click "Save" and choose image folder for web site.

Select "Window", "History" and select one step above the latest action.

Select "Crop Tool" (C).
Click from outside of the upper right-hand corner of the cropped image and drag left and down to select a few pixels of the right hand image.

Select "File", "Save for Web...":
  Preset: PNG-24
  Interlaced: Unchecked
  Transparency: checked
  Click "Save" and choose image folder for web site.


HTML/CSS tutorial.

Create a button on the HTML page.
Example:

	<!DOCTYPE html>
	<html>
	<head runat="server">
	<title>Demo Push Buttons</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<div>
	<div><h2>Demonstration Push Buttons</h2></div>
	<div class="clear">
	<a class="button" href="#" onclick="this.blur(); return false;"><span>Save</span></a>
	<a class="button" href="#" onclick="this.blur(); return false;"><span>Canceling the Command</span></a>
	</div>
	</div>
	</body>
	</html>

view raw ButtonHTML hosted with ❤ by GitHub

Create a style sheet that will utilize a "Sliding Doors" effect. Click ((here)) for a good explanation of this effect.
Example:

	.clear {
	overflow: hidden;
	width: 100%;
	margin-bottom: 26px;
	}
	a.button {
	background: transparent url('img/button-a.png') no-repeat scroll top right;
	color: #333;
	display: block;
	float: left;
	font: normal 16px arial, sans-serif;
	height: 48px;
	margin-right: 12px;
	padding-right: 36px;
	text-decoration: none;
	}
	a.button span {
	background: transparent url('img/button-span.png') no-repeat top left;
	display: block;
	line-height: 28px;
	padding: 10px 0 10px 36px;
	}
	a.button:active {
	background-position: bottom right;
	color: #666;
	outline: none;
	}
	a.button:active span {
	background-position: bottom left;
	padding: 11px 0 9px 36px;
	}
	body {
	color: #444;
	font: normal 28px georgia, serif;
	margin: 80px;
	}

view raw ButtonCSS hosted with ❤ by GitHub

Thee CSS code can be tweaked to suite different size buttons.

Click ((here)) for the project code.

Create a Custom Static Map

Have you ever wanted to include a customized Google map in you web page without much coding? Google's Static Map service service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on your web page.

The easiest way to include a map is to simply go to Google Maps and insert an address or coordinate in the search box. Once you have selected the location and style of map, click on "Customize and preview embedded map". Here you are offered some limited options to adjust your map. After you have selected your options, copy and paste the code into your web page. Some of the options can be adjusted after pasting.

A more customized map can be achieved with the Google Static Map Wizard. Follow the instructions and copy the code. Paste it into an "img" tag on your web page. Once pasted, change the "sensor=TRUE_OR_FALSE" to "sensor=false" so that the map will show up in you browser.

Example:

<img alt="map" src="http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=label:A|37.386052,-122.083851&size=500x300&sensor=false" />

view raw GoogleStaticMap hosted with ❤ by GitHub

The URL in the pasted code can be further enhanced by adding parameters listed in the "Static Maps API V2 Developer Guide". Try out the "Quick Example" in your own code and make minor adjustments to see what happens.

Create a Path in Google Earth

This post will cover creating a new path in Google Earth, saving it to file and creating a path or track. Lastly, I will explain how to work with an existing path or track.

First:
Open up Google Earth and enter a location in the Search box. If you are starting at a location with no street address, locate the starting point in Google Maps and right-click on the starting point. Selecting "What's here" should fill the coordinates in the search box. Copy the coordinates and paste them in the Google Earth search box. Click on the search button. Your location should now be visible on the screen.

Second:
Click on the "Add" menu and select "Path". The "New Path" dialog box with appear. Click on the "Style, Color" tab and Click in the box next to "Color:". Select a color that will show up well on your map. Click in the box next to "Width:" and select a thickness that will show up well. Now click on the map and start drawing a line. You can also click several times to create a series of straight lines. Make sure you DO NOT close the "New Path" dialog box before you finish drawing your path since this will end your new path drawing mode. Once you are done, click "OK" in the "New Path" dialog box. Your new path will appear in the "Places" side panel.

Third:
You can edit or rename your new path by right-clicking on the path in the "Places" side bar and selecting "Rename". You can also select "Save to My Places" to make it persist when the program is terminated. Editing the path is accomplished by right-clicking on the new path and selecting "Properties". This will bring up the "Edit Path" dialog box. Here you can change the setting of the path and the path direction and size. To change the path direction click on anyplace of the path while the "Edit Path" dialog box is open and drag that part of the path around. You can also delete part of a path by right-clicking on anyplace of the path. This will delete a point on the path.

You can also import an existing track in "KMZ" format. If you have a GPS device that has a recorded track, just download the file to your computer and then convert it to "KMZ" format with the GPS Visualizer Conversion utility. Once you have completed the conversion, download the converted file to your computer and double-click on it to bring up Google Earth. The existing track should be visible now.

Tracks can have their own topographic overlays. I have explained the procedure in my previous post called "Create a Map Overlay for Google Earth".

Create a Map Overlay for Google Earth

If you ever wanted to change the overlay on Google Earth to display a topographic map or other types of maps, the information is sparse and sometimes wrong. I found out how to do it by experimenting. Here is what I found.

My search ended up at GPS Visualizer. It has several free tools that are very useful. I will focus on one of them for this post. They have an overlay creator for Google Earth that seemed to be what I was looking for. The only problem was that there was no step-by-step instructions. After some trial and error, I eventually got it to do what I wanted.

First:
Download and install Google Earth.

Second:
Fill out the form at the GPS Visualizer Overlay page for Google Earth and enter a overlay center point in either the "Location" box or "Latitude/Longitude" boxes. I chose  the "Enter a Center Point" radio button and "Dynamic" in the dropdown menu. The "Size of overlay" was entered with 2000 and the "GE document name field was left blank. I left the Dimensions at "Square". Lastly, I chose the "US: USGS topo map (2m: 2000px)". Once you are done click on "Create Overlay". You will be taken to a new page saying "Your KML overlay parameters have been processed". Click on the link reading "Click here to download your overlay". The "KMZ" file will download to your computer.

Third:
Double-click on the downloaded "KMZ" file which should load Google Earth as "USGS topo map" in Temporary Places. You can make this map persist by right-clicking on the "USGS topo map" link which will bring up a menu. Select "Save to My Places".

Fourth:
Your map overlay should show up on the main screen.

There are quite a few different ways to create overlays depending on your needs. I will go into some of them on my next post.