Mouseover mit Sound und Bildwechsel

Chico

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:

HTML

<html>
	<head>
		<title>Navigation_links</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

		<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>

		<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();">


<table id="Tabelle_01" width="195" height="572" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			[img]Bilder/Navigation_links_01.jpg[/img]</td>
	</tr>
	<tr>
		<td rowspan="16">
			[img]Bilder/Navigation_links_02.jpg[/img]</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]Bilder/Webdesign.jpg[/img]</a></td>
		<td rowspan="16">
			[img]Bilder/Navigation_links_04.jpg[/img]</td>
	</tr>
	<tr>
		<td>
			[img]Bilder/Navigation_links_05.jpg[/img]</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]Bilder/Printdesign.jpg[/img]</a></td>
	</tr>
	<tr>
		<td>
			[img]Bilder/Navigation_links_07.jpg[/img]</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]Bilder/CM-Systeme.jpg[/img]</a></td>
	</tr>
	<tr>
		<td>
			[img]Bilder/Navigation_links_09.jpg[/img]</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]Bilder/Shop-Systeme.jpg[/img]</a></td>
	</tr>
	<tr>
		<td>
			[img]Bilder/Navigation_links_11.jpg[/img]</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]Bilder/Streaming.jpg[/img]</a></td>
	</tr>
	<tr>
		<td>
			[img]Bilder/Navigation_links_13.jpg[/img]</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]Bilder/Web-Hosting.jpg[/img]</a></td>
	</tr>
	<tr>
		<td>
			[img]Bilder/Navigation_links_15.jpg[/img]</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]Bilder/Referenzen.jpg[/img]</a></td>
	</tr>
	<tr>
		<td>
			[img]Bilder/Navigation_links_17.jpg[/img]</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]Bilder/Partner.jpg[/img]</a></td>
	</tr>
	<tr>
		<td>
			[img]Bilder/Navigation_links_19.jpg[/img]</td>
	</tr>
</table>


</body>
</html>

Alles anzeigen

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

K.Y.L.T.

Hi,
ähm, wieso rufst du nicht einfach in der funktion changeImages die Funktion playSound() auf?

Chico

Hab es doch hinbekommen, hatte leider nur nen kleinen Fehler mit meinen " im onmousover-Befehl. Jetzt funktioniert es

Der Niklas

GENAU DAS möchte Ich auch machen! Sound und bildwechsel bei mouseover. ABER geht das auch nur mit html?!? Ich weiß nich ma was PHP heißt und dann gibts doch noch shtml und dynamic und sonstewas. Ich kann nur html und würde diesen effekt auch gern haben, is das möglich?

driver

nein gehts nicht. weil html nur anzeigen kann, nichts ausführen.
übriges beispiel is übrigens javascript, kein php

PHP (rekursives Backronym für „PHP: Hypertext Preprocessor“, ursprünglich „Personal Home Page Tools“)

Mouseover mit Sound und Bildwechsel

Tags

Benutzer online in diesem Thema