Menu
Can anyone help me add .wav files to the existing image map code below? I want each image mouseover to also trigger an audio sample.
My image shows 4 people. As users mouse over each person, each person changes his or her expression. My aim is to make each person say something at the same time!
here are the .wav files i want to include..
“wavs/justine.wav”
“wavs/steve.wav”
“wavs/greg.wav”
“wavs/dillon.wav”
Any help would be greatly appreciated!
<SCRIPT LANGUAGE=”JavaScript”>
<!–
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
flower_heads_01_dillon_over = newImage(“images/flower_heads_01-dillon_over.jpg”);
flower_heads_01_greg_over = newImage(“images/flower_heads_01-greg_over.jpg”);
flower_heads_01_justine_over = newImage(“images/flower_heads_01-justine_ove.jpg”);
flower_heads_01_steve_over = newImage(“images/flower_heads_01-steve_over.jpg”);
preloadFlag = true;
}
}
// –>
</SCRIPT>
<!– End Preload Script –>
</head>
<BODY BGCOLOR=#000000 ONLOAD=”preloadImages();” onload=”PreLoadMusic()”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center” width=”500″>
<!– ImageReady Slices (flower_heads.psd) –>
<IMG NAME=”flower_heads_01″ SRC=”images/flower_heads_01.jpg” WIDTH=500 HEIGHT=382 BORDER=0 ALT=”” USEMAP=”#flower_heads_01_Map”>
<MAP NAME=”flower_heads_01_Map”>
<AREA SHAPE=”poly” ALT=”” COORDS=”410,380, 414,266, 406,253, 392,235, 384,210, 387,177, 394,132, 440,71, 452,32, 454,7, 458,13, 466,99, 468,129, 475,139, 480,150, 480,166, 488,173, 489,202, 480,217, 471,224, 460,383″ HREF=”#”
ONMOUSEOVER=”changeImages(‘flower_heads_01’, ‘images/flower_heads_01-dillon_over.jpg’); return true;”
ONMOUSEOUT=”changeImages(‘flower_heads_01’, ‘images/flower_heads_01.jpg’); return true;”>
<AREA SHAPE=”poly” ALT=”” COORDS=”289,294, 305,302, 315,303, 327,304, 341,296, 344,296, 361,278, 366,270, 365,264, 370,254, 366,247, 367,242, 366,234, 361,227, 360,220, 351,212, 349,197, 350,185, 366,165, 366,161, 376,151, 376,143, 372,143, 377,134, 377,127, 376,119, 382,103, 381,95, 378,95, 380,104,
377,109, 377,96, 375,96,
373,110, 372,109, 368,98, 365,113, 364,84, 359,82, 359,95, 357,94, 357,80, 354,78, 353,74, 351,75, 353,85, 350,86, 350,74, 348,73, 346,82, 345,70, 343,68, 342,69, 343,76, 341,80, 340,80, 340,67, 337,67, 336,82, 333,81, 334,75, 330,79, 325,77, 327,66, 323,65, 320,78, 321,65, 319,65, 316,79, 312,63, 311,63, 312,76, 307,77,
309,64, 305,64, 304,78, 303,81, 301,79, 296,68, 293,69, 295,81, 295,85, 294,79, 292,82, 292,70, 291,69, 289,78, 290,85, 289,95, 288,97, 287,82, 283,75, 282,78, 284,86, 283,89, 282,86, 281,88, 280,89, 280,75, 279,76, 276,90, 274,90, 275,84, 273,83, 271,97, 269,98, 270,105, 271,111, 269,110, 266,112, 266,98, 264,98, 262,112,
261,112, 257,99, 256,110, 258,110, 262,124, 262,125, 255,115, 258,110, 254,113, 252,113, 252,125, 255,128, 253,144, 262,158, 257,164, 266,165, 272,169, 279,175, 281,181, 293,184, 280,208, 268,208, 273,215, 264,223, 262,233, 259,238, 254,241, 257,245, 256,263, 263,276, 271,278, 272,290, 279,292″ HREF=”#”
ONMOUSEOVER=”changeImages(‘flower_heads_01’, ‘images/flower_heads_01-steve_over.jpg’); return true;”
ONMOUSEOUT=”changeImages(‘flower_heads_01’, ‘images/flower_heads_01.jpg’); return true;”>
<AREA SHAPE=”poly” ALT=”” COORDS=”214,286, 244,270, 239,220, 251,210, 230,166, 228,144, 214,119, 203,111, 193,110, 180,111, 167,120, 159,129, 154,148, 150,172, 152,180, 150,194, 152,202, 145,210, 144,222, 160,222, 161,211, 166,208, 161,211, 159,222, 157,224, 156,252, 158,270, 170,280, 183,281, 171,281,
171,290, 196,305,
207,301″ HREF=”#”
ONMOUSEOVER=”changeImages(‘flower_heads_01’, ‘images/flower_heads_01-justine_ove.jpg’); return true;”
ONMOUSEOUT=”changeImages(‘flower_heads_01’, ‘images/flower_heads_01.jpg’); return true;”>
<AREA SHAPE=”poly” ALT=”” COORDS=”69,378, 80,382, 81,232, 83,226, 85,227, 87,231, 90,228, 93,228, 98,226, 102,218, 111,226, 116,222, 115,215, 110,205, 121,212, 127,209, 135,208, 137,199, 143,196, 143,192, 140,190, 140,186, 146,186, 149,179, 147,175, 146,174, 144,172, 144,169, 147,168, 146,164, 140,164,
140,161, 148,159,
148,156, 145,151, 136,148, 147,143, 149,135, 147,132, 143,130, 150,128, 148,119, 146,117, 140,116, 146,110, 144,106, 134,106, 128,110, 129,105, 135,99, 133,90, 124,91, 122,95, 119,91, 112,93, 110,89, 101,89, 100,85, 102,73, 95,72, 94,76, 88,79, 82,83, 79,83, 78,78, 75,79, 73,82, 71,81, 65,74, 63,75, 59,89, 58,90, 51,82,
46,85, 45,89, 34,88, 35,89, 28,88, 27,96, 17,97, 19,105, 30,118, 28,119, 25,120, 23,117, 12,115, 8,115, 12,123, 5,123, 12,134, 6,136, 13,141, 13,143, 5,143, 5,156, 8,156, 4,161, 6,171, 11,172, 6,177, 8,181, 7,184, 8,188, 8,194, 17,195, 16,206, 22,207, 26,212, 30,212, 28,216, 34,216, 45,206, 42,220, 44,223, 48,224, 51,220,
53,223, 60,224, 61,229, 68,232″ HREF=”#”
ONMOUSEOVER=”changeImages(‘flower_heads_01’, ‘images/flower_heads_01-greg_over.jpg’); return true;”
ONMOUSEOUT=”changeImages(‘flower_heads_01’, ‘images/flower_heads_01.jpg’); return true;”>
</MAP>
</table>
<!– End ImageReady Slices –>