Dan Olsavsky's Blog

Monday, October 22, 2007

Adding the Cursor Pointer to Submit Buttons

Add the cursor:pointer to your submit button using CSS

input.submit {
cursor:pointer;
}

posted by dano at 12:27 PM 0 comments

Embedding Google Maps

The Objective.

This tutorial will show you how to embed a Google Map in to a website. You will need to create a Google account if you do not have one already. I broke the process down in to five simple steps and included a link to a working example.

The Header.

Insert the following tags in the <head> of your document. Then, edit the Google API key below (key=GoogleAPIkey).

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAoMOJatw3uyEScB50Mr77zxTbBjeJC5OepS89rel7GdJxD1-WLRS2pZIcAM7oxTtSFl3u5DcA6NQK3w" type="text/javascript"></script>
<script language="JavaScript" src="maps.js"></script>
<link href="map.css" rel="stylesheet" type="text/css" />

The Body Tag.

Replace Body Tag with the following code:

<body onload="load()" onunload="GUnload()">

The HTML.

Insert the map <div> where ever you would like your map to be displayed

<div id="map"></div>

The JavaScript

Save the JavaScript below as "maps.js", modify, then go to Geocoder to get the new GPoint Coordinates. NOTE: You can now click the "Link to this page" hotlink on Google Maps, to find the coordinates. Simply copy and paste from the line of HTML code.

function load() {
if (GBrowserIsCompatible()) {
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
var map = new GMap(document.getElementById("map"));
var point = new GPoint(-104.924927, 39.861263);
var point2 = new GPoint(-105.208168, 39.786906);

var html = '<br /><b>Dan Olsavsky</b><br />Denver, CO';
html += '<form action="http://maps.google.com/maps" method="get" target="_blank">';
html += '<i>Directions to here from</i>: <br />';
html += '<input type="text" name="saddr" value="" size="25"><br />';
html += '<input type="hidden" name="daddr" value="Denver, CO" />';
html += '<input type="hidden" name="hl" value="en">';
html += '<input type="submit" value="Directions"/></form>';

var htm2 = '<br /><b>Dan Olsavsky</b><br />Golden, CO';
htm2 += '<form action="http://maps.google.com/maps" method="get" target="_blank">';
htm2 += '<i>Directions to here from</i>: <br />';
htm2 += '<input type="text" name="saddr" value="" size="25"><br />';
htm2 += '<input type="hidden" name="daddr" value="Golden, CO" />';
htm2 += '<input type="hidden" name="h2" value="en">';
htm2 += '<input type="submit" value="Directions"/></form>';

//Create Marker
var marker = new createMarker(point, html);
var marker2 = new createMarker(point2, htm2);

//Edit Controls
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(point, 9);

//Add Overlay
map.addOverlay(marker);
map.addOverlay(marker2);

//Add info window
marker.openInfoWindowHtml(html);
marker.openInfoWindowHtml(html2);

}
}

The CSS
Create a style sheet named "map.css" and create a selector for the map id.

/* Google Map CSS */
#map {
width:400px;
height:400px;
}

The Example.

http://danolsavsky.com/map.html

Help.

Google Maps Wiki

Advanced

http://www.econym.demon.co.uk/googlemaps/index.htm

posted by dano at 10:14 AM 0 comments

Tuesday, October 16, 2007

CSS Roll-Over Submit Buttons

The CSS.
Note: These are the styles for an image-roll over . You can just as easily use background colors.

#contact input.submit {
background: url(../images/qc-submit-btn.jpg) 0px 0px;
height: 53px;
width: 144px;
display: block;
border: none;
}
#contact :hover input.submit {
background-position: -144px 0px;
}
#contact:active input.submit {
background-position: -288px 0px;
}

The HTML.

<a onclick="document.getelementbyid('formid').submit"><input type="submit" class="submit" name="" value="" /></a>

-Dan Olsavsky

posted by dano at 10:12 AM 1 comments

CSS Image Roll-Overs

CSS Image Roll-overs.

By combining the four states of a button (normal, hover, active and visited) in to one image, the image roll-over happens quicker and requires less load time. In addition, the images are cached in to the temporary browser memory so they dont have to be re-loaded on to each page of the web site. (see CSS Sprites)

EXAMPLE:

The Image.





The CSS.

#button p a{
background-image: url(../images/button.jpg);
display: block;
height: 42px;
width: 107px;
background-position: 0px 0px;
}
#button p :hover{
background-position: -107px 0px;
}
#button p :active{
background-position: -214px 0px;
}

The HTML.

<div id="button">
<p><a href="read-more.html"><!-- --></a></p>
</div>

posted by dano at 9:53 AM 0 comments

Thursday, October 11, 2007

Drop Down Menus Over Flash

If you would like your drop down menus to display over any Flash elements on your page then this is for you.

1. Add the following parameter to the OBJECT tag:

<param name="wmode" value="transparent">

2. Add the following parameter to the EMBED tag:

wmode="transparent"

3. Add "z-index: 0;" via CSS to your DIV

Here is an example. I am using JavaScript here to avoid the active x control bug in ie6 and to keep my HTML code cleaner.

<!--Add this link to the head of your HTML doc-->

<script type="text/javascript" src="functions.js"></script>


<!--—Embed this JavaScript in the body of your HTML doc-->

<div id="mast" class="”flashContent”">
<script type="text/javascript">flash();</script>
</div>


// Save a new JavaScript file as "functions.js" – then add the JavaScript for your movie (note: it is all on one line and must remain this way)

function flash() {
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="flash" align="middle" height="PIXELS" width="PIXELS"><param name="allowScriptAccess" value="sameDomain"><param name="movie" value="multimedia/FILENAME.swf"><param name="quality" value="high"><param name="wmode" value="transparent"><embed src="multimedia/FILENAME.swf" wmode="transparent" quality="high" bgcolor="#ffffff" name="flash" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="PIXELS" width="PIXELS"></embed></object>');
}

/* CSS for class=”flashContent” */

.flashMovie {
z-index: 0;
}

posted by dano at 8:49 AM 0 comments

Team Building Exercise

Team Building Exercise - "Win Lose or Draw"

Object:

Be the first team to make 6 correct guesses from sketched picture clues.

Rules:

Divide players into two teams. The first team selects a Sketcher; all other first team players are then the Guessers. As one team sketches and guesses an idiom, the opposing team watches — play alternates between teams with each new idiom to be sketched.

Rotate the role of Sketcher on a team so that all team members have the opportunity to be Sketcher. Each time your team must draw a new idiom, select a new member of your team to be the Sketcher.

Playing The Game :

1. You need a timer, pad, pencil and clues (idioms)

2. I will keep the time and score

3. The Sketcher secretly looks at the provided idiom and sketches the phrase

4. I will then set the timer to one min. and the Sketcher draws a picture clue (or clues) of the idiom.

Sketching Rules:

• No letters, words or numbers can be drawn. Symbols are acceptable. If part of a name or phrase is guessed correctly, you may write that word next to your sketch.

• Never speak while sketching — but you may gesture to indicate whether the guess is close or off-track!

5. As the Sketcher sketches, the Sketcher’s teammates start shouting out what they think is being drawn. Players can guess as many times as they want.

6. The Scoring:

If the Sketcher’s team guesses correctly before time is up, the Sketcher’s team gets one point. It is now the opposing team’s turn to sketch and guess.

If the Sketcher’s team does not guess correctly within one min, they do not win the point. The opposing team then gets ten seconds to make ONE guess to win the point.

• If the opposing team guesses correctly, they win the point. It is then their turn to sketch and guess a new name idiom.

• If the opposing team does not guess correctly, no one wins the point. It is now the opposing team’s turn to sketch and guess a new idiom.

The Prize:

Each member of the winning team will receive a $5 gift certificate to Amazon.com

FYI, I posted this after the game. Here are the idioms that I used;

A Picture Paints a Thousand Words
Put your money where your mouth is
Blind leading the blind
Back Seat Driver
Caught With Your Pants Down
Elvis has left the building
Woke up on the wrong side of the bed
High Five
Kick The Bucket
Chicken with its head cut off
Money is the Root of All Evil
Pedal to the metal
Raining Cats and Dogs

posted by dano at 8:25 AM 0 comments

© Dan Olsavsky | 2004-2009. This site is optimized for viewing in Mozilla's Firefox. Some features may not appear in other internet browsers. Please note that I do not develop the content for the websites featured in my portfolio. I do however, work with some phenomenal writers that can get the job done. The Search Engine Optimization on most of the sites was done by a highly-skilled professional at Page 1 Solutions, LLC. Some of the websites have been edited aesthetically by other Website Design Professionals but I keep the Lightbox images original, because I like to keep it real. I am employed full-time, however... you too can retain my services at a very reasonable rate! A huge shout out to everybody who has helped me along the way and who continue to support me. You know who you are.. Click here to view the Sitemap or click here to Contact me.