Benutzer 62503
Account gelöscht Threadersteller
Ort: -
|
Verfasst Di 10.07.2007 11:11
Titel Mouseover mit Sound und Bildwechsel |
  |
|
Hallo. Ich bräuchte dringend etwas Hilfe. Ich soll für die Navigations einer Homepage ein paar Mousover-Effekte einbauen. Beim Überqueren der Schaltfläche mit der Maus soll sich sowohl ein kleiner Farbwechsel vollziehen, als auch ein kurzer Sound abgespielt werden. Ich habe beides hinbekommen, aber nicht gemeinsam, dh. wenn ich im Script den Befehl für Farbwechsel vor den Sound-Befehl schreibe, zeigt es den und andersrum spielt es den Sound. Es soll aber beides gleichzeitg abgespielt werden.
Mein Code:
| Code: | <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">
</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="#"
onmouseover="javascript:PlaySound()";
onmouseover="changeImages('Webdesign', 'Bilder/Webdesign-over.jpg'); return true;"
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>
<td rowspan="16">
<img src="Bilder/Navigation_links_04.jpg" width="30" height="516" alt=""></td>
</tr>
<tr>
<td>
<img src="Bilder/Navigation_links_05.jpg" width="136" height="9" alt=""></td>
</tr>
<tr>
<td>
<a href="#"
onmouseover="changeImages('Printdesign', 'Bilder/Printdesign-over.jpg'); return true;"
onmouseout="changeImages('Printdesign', 'Bilder/Printdesign.jpg'); return true;"
onmousedown="changeImages('Printdesign', 'Bilder/Printdesign-over.jpg'); return true;"
onmouseup="changeImages('Printdesign', 'Bilder/Printdesign-over.jpg'); return true;">
<img name="Printdesign" src="Bilder/Printdesign.jpg" width="136" height="22" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<img src="Bilder/Navigation_links_07.jpg" width="136" height="67" alt=""></td>
</tr>
<tr>
<td>
<a href="#"
onmouseover="changeImages('CM_Systeme', 'Bilder/CM-Systeme-over.jpg'); return true;"
onmouseout="changeImages('CM_Systeme', 'Bilder/CM-Systeme.jpg'); return true;"
onmousedown="changeImages('CM_Systeme', 'Bilder/CM-Systeme-over.jpg'); return true;"
onmouseup="changeImages('CM_Systeme', 'Bilder/CM-Systeme-over.jpg'); return true;">
<img name="CM_Systeme" src="Bilder/CM-Systeme.jpg" width="136" height="22" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<img src="Bilder/Navigation_links_09.jpg" width="136" height="8" alt=""></td>
</tr>
<tr>
<td>
<a href="#"
onmouseover="changeImages('Shop_Systeme', 'Bilder/Shop-Systeme-over.jpg'); return true;"
onmouseout="changeImages('Shop_Systeme', 'Bilder/Shop-Systeme.jpg'); return true;"
onmousedown="changeImages('Shop_Systeme', 'Bilder/Shop-Systeme-over.jpg'); return true;"
onmouseup="changeImages('Shop_Systeme', 'Bilder/Shop-Systeme-over.jpg'); return true;">
<img name="Shop_Systeme" src="Bilder/Shop-Systeme.jpg" width="136" height="22" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<img src="Bilder/Navigation_links_11.jpg" width="136" height="8" alt=""></td>
</tr>
<tr>
<td>
<a href="#"
onmouseover="changeImages('Streaming', 'Bilder/Streaming-over.jpg'); return true;"
onmouseout="changeImages('Streaming', 'Bilder/Streaming.jpg'); return true;"
onmousedown="changeImages('Streaming', 'Bilder/Streaming-over.jpg'); return true;"
onmouseup="changeImages('Streaming', 'Bilder/Streaming-over.jpg'); return true;">
<img name="Streaming" src="Bilder/Streaming.jpg" width="136" height="22" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<img src="Bilder/Navigation_links_13.jpg" width="136" height="8" alt=""></td>
</tr>
<tr>
<td>
<a href="#"
onmouseover="changeImages('Web_Hosting', 'Bilder/Web-Hosting-over.jpg'); return true;"
onmouseout="changeImages('Web_Hosting', 'Bilder/Web-Hosting.jpg'); return true;"
onmousedown="changeImages('Web_Hosting', 'Bilder/Web-Hosting-over.jpg'); return true;"
onmouseup="changeImages('Web_Hosting', 'Bilder/Web-Hosting-over.jpg'); return true;">
<img name="Web_Hosting" src="Bilder/Web-Hosting.jpg" width="136" height="22" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<img src="Bilder/Navigation_links_15.jpg" width="136" height="70" alt=""></td>
</tr>
<tr>
<td>
<a href="#"
onmouseover="changeImages('Referenzen', 'Bilder/Referenzen-over.jpg'); return true;"
onmouseout="changeImages('Referenzen', 'Bilder/Referenzen.jpg'); return true;"
onmousedown="changeImages('Referenzen', 'Bilder/Referenzen-over.jpg'); return true;"
onmouseup="changeImages('Referenzen', 'Bilder/Referenzen-over.jpg'); return true;">
<img name="Referenzen" src="Bilder/Referenzen.jpg" width="136" height="22" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<img src="Bilder/Navigation_links_17.jpg" width="136" height="8" alt=""></td>
</tr>
<tr>
<td>
<a href="#"
onmouseover="changeImages('Partner', 'Bilder/Partner-over.jpg'); return true;"
onmouseout="changeImages('Partner', 'Bilder/Partner.jpg'); return true;"
onmousedown="changeImages('Partner', 'Bilder/Partner-over.jpg'); return true;"
onmouseup="changeImages('Partner', 'Bilder/Partner-over.jpg'); return true;">
<img name="Partner" src="Bilder/Partner.jpg" width="136" height="22" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<img src="Bilder/Navigation_links_19.jpg" width="136" height="162" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html> |
Ich hoffe hier ist jemand dabei, der mir helfen kann.
Die Problemstelle befindet sich in der Tabelle in der 3. Zelle. Die Befehle für "PlaySound" und "ChangeImages" könnte ich auch in ein "onmouseover"-Befehl schreiben, ändert nichts dran.
Greetzz der Chico 
|
|
Willkommen auf dem Portal für Mediengestalter
