What technology is used at the Google homepage (9 June 2011)? They made something like a guitar pickup for the snares. When you move the mouse over it, the snares are being
Possibly HTML5? There is a canvas element if you inspect element in Google Chrome.
http://googleblog.blogspot.com/2011/06/doodle-for-instrumental-inventor.html
"If you’re curious, the doodle was made with a combination of JavaScript, HTML5 Canvas (used in modern browsers to draw the guitar strings), CSS, Flash (for sound) and tools like the Google Font API, goo.gl and App Engine."
That's a combination of HTML5 Canvas, SVG, and JavaScript. As others have noted, Flash for the audio.
They use a canvas
<canvas width="474" height="175"></canvas>
and flash
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="0" height="0" id="guitar11-sound-player" type="application/x-shockwave-flash"><param name="movie" value="/logos/swf/guitar11.swf"><param name="allowScriptAccess" value="always"><object id="guitar11-sound-player-2" type="application/x-shockwave-flash" data="/logos/swf/guitar11.swf" width="0" height="0"><param name="allowScriptAccess" value="always"></object></object>
The flash is for the sound.
Here's the JavaScript:
(function() {
var g = null,
h;
try {
if (!google.doodle) google.doodle = {};
var i, m, n, o, r, s, t, u, v, aa, w, ba, ca, da = navigator.userAgent.indexOf("MSIE") >= 0,
ea = [[3, "#776a62", "#2063ff", 2, [[28, 23], [103, 23]]], [5, "#776a62", "#f61b33", 2, [[28, 38], [103, 38]]], [0, "#776a62", "#ffdd24", 2, [[65, 67], [318, 67]]], [2, "#776a62", "#07d238", 2, [[28, 81], [281, 81]]], [7, "#776a62", "#2063ff", 1, [[28, 96.5], [281, 96.5]]], [9, "#776a62", "#f61b33", 1, [[29, 111.5], [104, 111.5]]], [1, "#776a62", "#07d238", 2, [[358, 66], [433, 66]]], [4, "#776a62", "#2063ff", 2, [[358, 81], [433, 81]]], [6, "#776a62", "#f61b33", 2, [[330, 96], [405, 96]]], [8, "#776a62", "#ffdd24", 1, [[358, 111.5], [434, 111.5]]]],
fa = 0,
ga = 0,
x = 0,
y = 0,
z = !0,
A = [],
B = g,
C = g,
D = function(a) {
a && a.parentNode && a.parentNode.removeChild(a)
},
E = function(a, b, c) {
if (a) {
if (!google.doodle.ba) google.doodle.ba = [];
google.doodle.ba.push(arguments);
var d = a,
e = b,
f = c;
d.addEventListener ? d.addEventListener(e, f, !1) : d.attachEvent("on" + e, f)
}
},
... // A lot more [link](http://jsfiddle.net/2R4Cg/)
They also have some CSS:
#hplogo:active,#hplogo:focus {
outline:none;
}
#hplogo-g {
background:url(logos/2011/guitar11-hp-sprite.png) no-repeat 0 0;
height:175px;
position:relative;
width:474px;
}
#hplogo-click {
background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;
cursor:pointer;
height:130px;
left:0;
position:absolute;
top:0;
width:474px;
}
#hplogo-lcd {
height:30px;
left:70px;
position:absolute;
top:129px;
width:200px;
}
#hplogo-lcd-icon {
background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -580px -162px;
cursor:pointer;
height:0;
position:absolute;
width:0;
}
#hplogo-lcd-text {
background:transparent;
border:0 none;
color:#666;
cursor:text;
font-family:VT323,arial,sans-serif;
font-size:14px;
left:77px;
position:absolute;
top:134px;
text-decoration:none;
width:182px;
}
#hplogo-lcd-screen {
background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;
height:20px;
left:52px;
position:absolute;
top:134px;
width:214px;
}
#hplogo-on {
background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -809px -39px;
height:37px;
left:272px;
position:absolute;
top:123px;
width:62px;
}
#hplogo-led {
background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;
height:21px;
left:292px;
position:absolute;
top:133px;
width:21px;
}
.hplogo-str {
background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -530px -60px;
height:20px;
position:absolute;
width:255px;
}
#hplogot {
-webkit-box-shadow:5px 5px 10px #ffffd;
-moz-box-shadow:5px 5px 10px #ffffd;
box-shadow:5px 5px 10px #ffffd;
-webkit-transition:opacity .5s ease-out;
-moz-transition:opacity .5s ease-out;
-o-transition:opacity .5s ease-out;
transition:opacity .5s ease-out;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
background-color:#ffffca;
border:1px solid #b5b5b5;
cursor:pointer;
display:none;
font:normal 9pt arial,sans-serif;
left:128px;
opacity:0;
position:absolute;
top:16px;
white-space:nowrap;
padding:2px 3px;
}
Note
#hplogo-click {
background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;
}
and <div id="hplogo-click" onclick="google.doodle.go();"></div>
which contain the actual image of the guitar.