Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

image map with mouseovers and audio

Status
Not open for further replies.
IndustriousBird

IndustriousBird

Technical User
Oct 30, 2002
6
0
0
US
I would like to add some audio files to an image map. The image has 4 sections- each corresponding to a different person. When each person is moused-over, his or her head turns. My goal is that each person should make a sound when they are moused over! Here is the <body> code I have so far (without any audio elements). I want to add 4 sounds. Can any one help me with the code? ie; the script in the <head> along with the implementation in the existing <body>?
----------------------
<BODY BGCOLOR=#000000 ONLOAD=&quot;preloadImages();&quot;>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot; width=&quot;500&quot;>
<!-- ImageReady Slices (flower_heads.psd) -->
<IMG NAME=&quot;flower_heads_01&quot; SRC=&quot;images/flower_heads_01.jpg&quot; WIDTH=500 HEIGHT=382 BORDER=0 USEMAP=&quot;#flower_heads_01_Map&quot;>
<MAP NAME=&quot;flower_heads_01_Map&quot;>
<AREA SHAPE=&quot;poly&quot; ALT=&quot;&quot; COORDS=&quot;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&quot; HREF=&quot;#&quot;
ONMOUSEOVER=&quot;changeImages('flower_heads_01', 'images/flower_heads_01-dillon_over.jpg'); return true;&quot;
ONMOUSEOUT=&quot;changeImages('flower_heads_01', 'images/flower_heads_01.jpg'); return true;&quot;>
<AREA SHAPE=&quot;poly&quot; ALT=&quot;&quot; COORDS=&quot;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&quot; HREF=&quot;#&quot;
ONMOUSEOVER=&quot;changeImages('flower_heads_01', 'images/flower_heads_01-steve_over.jpg'); return true;&quot;
ONMOUSEOUT=&quot;changeImages('flower_heads_01', 'images/flower_heads_01.jpg'); return true;&quot;>
<AREA SHAPE=&quot;poly&quot; ALT=&quot;&quot; COORDS=&quot;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&quot; HREF=&quot;#&quot;
ONMOUSEOVER=&quot;changeImages('flower_heads_01', 'images/flower_heads_01-justine_ove.jpg'); return true;&quot;
ONMOUSEOUT=&quot;changeImages('flower_heads_01', 'images/flower_heads_01.jpg'); return true;&quot;>
<AREA SHAPE=&quot;poly&quot; ALT=&quot;&quot; COORDS=&quot;69,225, 74,235, 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, 65,231&quot; HREF=&quot;#&quot;
ONMOUSEOVER=&quot;changeImages('flower_heads_01', 'images/flower_heads_01-greg_over.jpg'); return true;&quot;
ONMOUSEOUT=&quot;changeImages('flower_heads_01', 'images/flower_heads_01.jpg'); return true;&quot;>
</MAP>
</table>
 
Sort by date Sort by votes
Add the following into the script tag

function play_sound(sound_name) {
eval('document.'+sound_name+'.FileName=document.'+sound_name+'.FileName');
}

then after the body tag you need to embed your sound files, something like this would do

<embed src=&quot;sound1.wav&quot; loop=&quot;false&quot; autostart=&quot;true&quot; style=&quot;visibility:hidden&quot; name=&quot;sound1&quot;>
<embed src=&quot;sound2.wav&quot; loop=&quot;false&quot; autostart=&quot;true&quot; style=&quot;visibility:hidden&quot; name=&quot;sound2&quot;>
<embed src=&quot;sound3.wav&quot; loop=&quot;false&quot; autostart=&quot;true&quot; style=&quot;visibility:hidden&quot; name=&quot;sound3&quot;>
<embed src=&quot;sound4.wav&quot; loop=&quot;false&quot; autostart=&quot;true&quot; style=&quot;visibility:hidden&quot; name=&quot;sound4&quot;>

then in the relevant mouseover put play_sound('sound1') or whatever sound you want to play
 
Upvote 0 Downvote
Thank you MrG for your help! When I try this, only one sound plays (dillon), and it plays as soon as the page loads (not on the appropriate mouseover, and never again. Although, I'm not sure know where to put the &quot;play_sound&quot; tag in the mouseover, it doesn't seem to make any difference. I tried putting it in a few different places. Maybe I plugged the code in wrong in the embed section?... Or am I supposed to add something to the script?

Thanks again for your help!!!

-------
<script>
function play_sound(sound_name) {
eval('document.'+sound_name+'.FileName=document.'+sound_name+'.FileName');
}
</script>

</head>
<BODY BGCOLOR=#000000 ONLOAD=&quot;preloadImages();&quot;>
<embed src=&quot;wavs/greg.wav&quot; loop=&quot;false&quot; autostart=&quot;true&quot; style=&quot;visibility:hidden&quot; name=&quot;greg&quot;>
<embed src=&quot;wavs/justine.wav&quot; loop=&quot;false&quot; autostart=&quot;true&quot; style=&quot;visibility:hidden&quot; name=&quot;justine&quot;>
<embed src=&quot;wavs/steve.wav&quot; loop=&quot;false&quot; autostart=&quot;true&quot; style=&quot;visibility:hidden&quot; name=&quot;steve&quot;>
<embed src=&quot;wavs/dillon.wav&quot; loop=&quot;false&quot; autostart=&quot;true&quot; style=&quot;visibility:hidden&quot; name=&quot;dillon&quot;>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot; width=&quot;500&quot;>
<!-- ImageReady Slices (flower_heads.psd) -->
<IMG NAME=&quot;flower_heads_01&quot; SRC=&quot;images/flower_heads_01.jpg&quot; WIDTH=500 HEIGHT=382 BORDER=0 USEMAP=&quot;#flower_heads_01_Map&quot;>
<MAP NAME=&quot;flower_heads_01_Map&quot;>
<AREA SHAPE=&quot;poly&quot; ALT=&quot;&quot; COORDS=&quot;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&quot; HREF=&quot;#&quot;
ONMOUSEOVER=&quot;changeImages('flower_heads_01', 'images/flower_heads_01-dillon_over.jpg'); play_sound('dillon'); return true;&quot;
ONMOUSEOUT=&quot;changeImages('flower_heads_01', 'images/flower_heads_01.jpg'); return true;&quot;>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
170
Kennelbloke
Kennelbloke
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
131
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
144
AbidingDude
AbidingDude
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
61
ggriffit
ggriffit
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
109
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top