Ronny Gr: MouseOver mit Sound und Bildwechsel

Hallo. Ich hab ein großes Problem. Ich will für eine Internetseite die Schaltflächen bearbeiten. Beim MouseOver soll sich die Schaltfläche grafisch verändern und ein kurzer Sound abspielen. Im Einzelnen kriege ich beides hin, also entweder kommt der Sound oder die Grafische Veränderung. Ich arbeite mit GoLive. Es hat wahrscheinlich was mit der Reiehnfolge im Script zu tun.

Mein Code sieht so aus: (nur Auszüge)

<html>
<head>
<title>Navigation_links</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (Navigation_links.psd) -->
<script type="text/javascript" language="javascript">
<!--
function PlaySound() {
   if (document.all) {
       document.all.play.src = "sound.wav";
   }
}
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) {
  Webdesign_over = newImage("Bilder/Webdesign-over.jpg");
  Printdesign_over = newImage("Bilder/Printdesign-over.jpg");
  CM_Systeme_over = newImage("Bilder/CM-Systeme-over.jpg");
  Shop_Systeme_over = newImage("Bilder/Shop-Systeme-over.jpg");
  Streaming_over = newImage("Bilder/Streaming-over.jpg");
  Web_Hosting_over = newImage("Bilder/Web-Hosting-over.jpg");
  Referenzen_over = newImage("Bilder/Referenzen-over.jpg");
  Partner_over = newImage("Bilder/Partner-over.jpg");
  preloadFlag = true;
 }
}
// -->
</script>
<!-- End Preload Script -->
<bgsound id=play>
<embed src="sound.wav" hidden="true" autostart="false"></embed>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (Navigation_links.psd) -->
<table id="Tabelle_01" width="195" height="572" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td colspan="3">
   <img src="Bilder/Navigation_links_01.jpg" width="195" height="56" alt=""></td>
 </tr>
 <tr>
  <td rowspan="16">
   <img src="Bilder/Navigation_links_02.jpg" width="29" height="516" alt=""></td>
  <td>
   <a href="#"
    +++PROBLEM+++ onmouseover="changeImages('Webdesign', 'Bilder/Webdesign-over.jpg'); return true;";"javascript:PlaySound()"; +++PROBLEM+++
    onmouseout="changeImages('Webdesign', 'Bilder/Webdesign.jpg'); return true;"
    onmousedown="changeImages('Webdesign', 'Bilder/Webdesign-over.jpg'); return true;"
    onmouseup="changeImages('Webdesign', 'Bilder/Webdesign-over.jpg'); return true;">
    <img name="Webdesign" src="Bilder/Webdesign.jpg" width="136" height="22" border="0" alt=""></a></td> ...

Wenn ich jetzt die Reihenfolge tausche, dh. erst PlaySound und dann ChangeImages, spielt es den Sound.

Wie kriege ich jetzt beides gleichzeitig zum Laufen???
Greetzz der Ronny

  1. Hallo,

    +++PROBLEM+++ onmouseover="changeImages('Webdesign', 'Bilder/Webdesign-over.jpg'); return true;";"javascript:PlaySound()"; +++PROBLEM+++

    ...

    Wenn ich jetzt die Reihenfolge tausche, dh. erst PlaySound und dann ChangeImages, spielt es den Sound.

    da sind wahrscheinlich gleich drei Dinge im Code möglich, ausserdem
    empfiehlt sich m.E. eine Lösung mittels CSS und Bildwechsel ggf. über
    die Eigenschaft background, dann ist der Bildwechsel wahrscheinlich
    auch ohne aktiviertes JavaScript möglich.

    Beim Code sind die Anführungszeichen etwas viel, dann ist das
    'javascript:' hier unsinnig, und vielleicht ist noch ein Komma statt
    eines Semikolon möglich (hab das aber nicht extra getestet).

    Grüsse

    Cyx23