Audio with Image Hover

[Kayoz1984]

I am trying to make two images sit on top of each other and when the player hovers over either one, a sound will play. the top image is smaller than the lower so that crossing over the area of either will generate the sound. In fact it may be worthwhile to set the volume of these sounds to zero and only after the player enters the field actually play the volume at full. Any help with this will be greatly appreciated,

[KVonGit]

Hello,

I can probably help with the audio bits, but I don't know enough CSS to help with the images.

I've got a game with a radio object:

    <object name="radio">
      <inherit name="switchable" />
      <feature_switchable />
      <switchonmsg>Click. The sounds of music fill the air.</switchonmsg>
      <switchoffmsg>Click. Sweet silence.</switchoffmsg>
      <take />
      <look>A cheap radio, currently switched {if radio.switchedon:on}{if not radio.switchedon:off}.</look>
      <onswitchon type="script"><![CDATA[
        JS.eval ("$('audio').remove();")
        msg ("<audio id=\"radio-div\" src=\"" + GetFileURL("mister-index.ogg") + "\" autoplay loop controls></audio>")
      ]]></onswitchon>
      <onswitchoff type="script">
        JS.eval ("$('audio').remove();")
      </onswitchoff>
      <displayverbs type="stringlist">
        <value>Look at</value>
        <value>Take</value>
        <value>Switch on</value>
        <value>Switch off</value>
      </displayverbs>
      <inventoryverbs type="stringlist">
        <value>Look at</value>
        <value>Use</value>
        <value>Drop</value>
        <value>Switch on</value>
        <value>Switch off</value>
      </inventoryverbs>
    </object>

---

When turning it on, it:

• removes any existing HTML audio elements (to avoid duplicate ID errors)
• creates an HTML audio element that autoplays a song (if the user's browser allows it)

        JS.eval ("$('audio').remove();")
        msg ("<audio id=\"radio-div\" src=\"" + GetFileURL("mister-index.ogg") + "\" autoplay loop controls></audio>")

---

Then, I added scripts to adjust the volume when leaving/entering the room when the radio is switched on:

 <function name="ResumeRadioIfOn"><![CDATA[
   if (radio.switchedon) {
     SetTimeout (2) {
       if (radio.switchedon) {
         JS.eval ("$('audio').remove();")
         msg ("<audio id=\"radio-div\" src=\"" + GetFileURL("mister-index.ogg") + "\" autoplay loop controls></audio>")
         if (not radio.parent = game.pov and not radio.parent = game.pov.parent) {
           JS.eval ("$('#radio-div')[0].volume = .25;")
         }
         else {
           JS.eval ("$('#radio-div')[0].volume = 1;")
         }
       }
       if (not radio.parent = game.pov and not radio.parent = game.pov.parent) {
         JS.eval ("$('#radio-div')[0].volume = .25;")
       }
       else {
         JS.eval ("$('#radio-div')[0].volume = 1;")
       }
     }
   }
 ]]></function>

---

I hope this helps a little.

(Someone else will probably pop in to help with the CSS for the images.)