Buttons bei mouseover Bildwechsel und Sound
Chris
- javascript
Hallo,
ich habe folgendes Problem, ich möchte ein Menü erstellen mit Buttons (Bilder), die bei mouseover das Bild wechseln und ein Sound abspielen (max. 1sec.) und beim drücken ebenfalls noch einmal einen anderen Sound abspielen!
Den bildwechsel konnte ich mit Frontpage gut erstelle, wie jedoch die Soundeffecte???
Danke schon mal...
hier mein html-code vom Bildwechsel:
<script language="JavaScript">
<!--
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
// -->
</script>
</head>
<body onload="FP_preloadImgs(/*url*/'HP/Hyperlinks/button3.jpg', /*url*/'HP/Hyperlinks/button2.jpg', /*url*/'HP/Hyperlinks/button57.jpg', /*url*/'HP/Hyperlinks/button6D.jpg', /*url*/'HP/Hyperlinks/button6E.jpg')">
<p align="center">
<img border="0" id="img9" src="HP/Hyperlinks/button6C.jpg" height="17" width="85" alt="home" onmouseover="FP_swapImg(1,0,/*id*/'img9',/*url*/'HP/Hyperlinks/button6D.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img9',/*url*/'HP/Hyperlinks/button6C.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img9',/*url*/'HP/Hyperlinks/button6E.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img9',/*url*/'HP/Hyperlinks/button6D.jpg')" fp-style="fp-btn: Soft Rectangle 9" fp-title="home"><img border="0" id="img1" src="HP/Hyperlinks/button1.jpg" height="17" width="85" alt="biographie" fp-style="fp-btn: Soft Rectangle 9" fp-title="biographie" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'HP/Hyperlinks/button2.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'HP/Hyperlinks/button1.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'HP/Hyperlinks/button3.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'HP/Hyperlinks/button2.jpg')"></p>
</body>
</html>
Hallo Chris,
ich möchte ein Menü erstellen mit Buttons (Bilder), die bei mouseover das Bild wechseln und ein Sound abspielen (max. 1sec.) und beim drücken ebenfalls noch einmal einen anderen Sound abspielen!
Den bildwechsel konnte ich mit Frontpage gut erstelle, wie jedoch die Soundeffecte???
Dafür nimmst du am besten Flash.
Erst vor einigen Tagen kam da eine ähnliche Frage:
http://forum.de.selfhtml.org/archiv/2006/9/t136171/#m885071
Dass du natürlich alles zusammen haben möchtest, Bildwechsel, Mouseovergeräusch _und_ noch ein anderes Klickgeräusch, macht die Sache komplizierter. Da wirst du mit Frontpage alleine wohl nicht weiterkommen.
Gruß Gernot
Ich hab das Script komplett umgeschrieben!
Inzwischen funktioniert es mit Javascript ohne Probleme, das ich beim ersten Bild ein Bilderwechsel und Soundeffect habe!
Problem hab ich wenn ich ein zweites und drittes Bild dazu nehme, alle sollen den gleichen Soundeffect haben, aber ein anderes Bild, wie man unschwer aus dem Script erkennt!
Den Sound habe ich bei allen 3 Bildern, leider den Bildwechsel aber nicht! Ich hab da wohl einen entscheiden kleinen Fehler, vielleicht findet ihr den ja???! Danke
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Neue Seite 1</title>
<script language="JavaScript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</script>
<SCRIPT language=Javascript>
<!--
if(document.images){
c0 = new Image(25,32); c0.src = "Hyperlinks/button1.jpg";
c1 = new Image(25,32); c1.src = "Hyperlinks/button2.jpg";
c2 = new Image(25,32); c2.src = "Hyperlinks/button6.jpg";
c3 = new Image(25,32); c3.src = "Hyperlinks/button6c.jpg";
c4 = new Image(25,32); c4.src = "Hyperlinks/button1.jpg";
c5 = new Image(25,32); c5.src = "Hyperlinks/button2.jpg";
}
function change(imageName,imageFile){
if(!document.images) return;
eval('document.images[imageName].src = '+imageFile + '.src');
}
function errorHandler(){
return true;
}
window.onerror = errorHandler;
function playSound(){
if(navigator.appName.indexOf("Netscape") != -1){
if(!navigator.plugins) return;
if(!navigator.javaEnabled()) return;
document.snd.play();
}
else if(navigator.appName.indexOf("Microsoft") != -1){
startIE(snd);
}
}
//-->
</SCRIPT>
<SCRIPT language=VBScript>
<!--
Sub startIE(snd)
snd.Run
End Sub
//-->
</SCRIPT>
</head>
<body>
<p align="center">
<OBJECT classid=CLSID:05589FA1-C356-11CE-BF01-00AA0055595A height=1 id=snd width=1>
<PARAM NAME="ShowDisplay" VALUE="0">
<PARAM NAME="ShowControls" VALUE="0">
<PARAM NAME="FileName" VALUE="http://www.allsexdomains.com/ao/exs/wav/bleedingvaginas.wav" ref>
<param name="Appearance" value="0">
<param name="AutoStart" value="0">
<param name="AllowChangeDisplayMode" value="-1">
<param name="AllowHideDisplay" value="0">
<param name="AllowHideControls" value="-1">
<param name="AutoRewind" value="-1">
<param name="Balance" value="0">
<param name="CurrentPosition" value="0">
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="Enabled" value="-1">
<param name="EnableContextMenu" value="-1">
<param name="EnablePositionControls" value="-1">
<param name="EnableSelectionControls" value="0">
<param name="EnableTracker" value="-1">
<param name="FullScreenMode" value="0">
<param name="MovieWindowSize" value="0">
<param name="PlayCount" value="1">
<param name="Rate" value="1">
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="ShowPositionControls" value="0">
<param name="ShowTracker" value="-1">
<param name="Volume" value="-600">
<EMBED SRC="PurpleSphereSoundFile.wav" NAME="snd" WIDTH="0" HEIGHT="0" HIDDEN="true" AUTOSTART="false" LOOP="false" MASTERSOUND>
</EMBED>
</OBJECT>
<A href="index.htm" onmouseout="change('A','c0')" onmouseover="playSound(); change('A','c1');">
<IMG alt="" border=0 height=17 name=A src="Hyperlinks/button1.jpg" width=85></A></p>
<p align="center">
<A href="index.htm" onmouseout="change('A','c2')" onmouseover="playSound(); change('B','c3');">
<IMG alt="" border=0 height=17 name=A0 src="Hyperlinks/button6.jpg" width=85></A></p>
<p align="center">
<A href="index.htm" onmouseout="change('A','c4')" onmouseover="playSound(); change('C','c5');">
<IMG alt="" border=0 height=17 name=A1 src="Hyperlinks/button5.jpg" width=85></A></p>
</p>
</body>
</html>
hi,
<A href="index.htm" onmouseout="change('A','c0')" onmouseover="playSound(); change('A','c1');">
<IMG alt="" border=0 height=17 name=A src="Hyperlinks/button1.jpg" width=85></A></p>
Hier rufst du change beide Male mit 'A' als Parameter für den Bildnamen auf.
<p align="center">
<A href="index.htm" onmouseout="change('A','c2')" onmouseover="playSound(); change('B','c3');">
<IMG alt="" border=0 height=17 name=A0 src="Hyperlinks/button6.jpg" width=85></A></p>
Hier tauschst du einmal das Bild 'A', obwohl du an dieser Stelle vermutlich nicht das erste Bild meinst - und einmal versuchst du ein Bild namens 'B' zu tauschen, welches aber gar nicht vorhanden ist.
gruß,
wahsaga
Danke,
habs jetzt hinbekommen!
Fuktioniert ohne Probleme,
für alle die Interesse an dem Script haben, hier issa:
(Buttons mit Bildwechsel und Sound bei mouseover)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Neue Seite 1</title>
<script language="JavaScript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</script>
<SCRIPT language=Javascript>
<!--
if(document.images){
c0 = new Image(25,32); c0.src = "Hyperlinks/button4F.jpg";
c1 = new Image(25,32); c1.src = "Hyperlinks/button50.jpg";
c2 = new Image(25,32); c2.src = "Hyperlinks/button58.jpg";
c3 = new Image(25,32); c3.src = "Hyperlinks/button5A.jpg";
c4 = new Image(25,32); c4.src = "Hyperlinks/button1.jpg";
c5 = new Image(25,32); c5.src = "Hyperlinks/button2.jpg";
}
function change(imageName,imageFile){
if(!document.images) return;
eval('document.images[imageName].src = '+imageFile + '.src');
}
function errorHandler(){
return true;
}
window.onerror = errorHandler;
function playSound(){
if(navigator.appName.indexOf("Netscape") != -1){
if(!navigator.plugins) return;
if(!navigator.javaEnabled()) return;
document.snd.play();
}
else if(navigator.appName.indexOf("Microsoft") != -1){
startIE(snd);
}
}
//-->
</SCRIPT>
<SCRIPT language=VBScript>
<!--
Sub startIE(snd)
snd.Run
End Sub
//-->
</SCRIPT>
</head>
<body>
<p align="center">
<OBJECT classid=CLSID:05589FA1-C356-11CE-BF01-00AA0055595A height=1 id=snd width=1>
<PARAM NAME="ShowDisplay" VALUE="0">
<PARAM NAME="ShowControls" VALUE="0">
<PARAM NAME="FileName" VALUE="http://www.allsexdomains.com/ao/exs/wav/bleedingvaginas.wav">
<EMBED SRC="PurpleSphereSoundFile.wav" NAME="snd" WIDTH="0" HEIGHT="0" HIDDEN="true" AUTOSTART="false" LOOP="false" MASTERSOUND>
</EMBED>
</OBJECT>
<A href="index.htm" onmouseout="change('A','c0')" onmouseover="playSound(); change('A','c1');">
<IMG alt="" border=0 height=15 name=A src="Hyperlinks/button4F.jpg" width=62></A></p>
</p>
<p align="center">
<A href="index.htm" onmouseout="change('B','c2')" onmouseover="playSound(); change('B','c3');">
<IMG alt="" border=0 height=15 name=B src="Hyperlinks/button58.jpg" width=62></A></p>
</p>
<p align="center">
<A href="index.htm" onmouseout="change('C','c4')" onmouseover="playSound(); change('C','c5');">
<IMG alt="" border=0 height=15 name=C src="Hyperlinks/button1.jpg" width=62></A></p>
</p>
</body>
</html>
für alle die Interesse an dem Script haben, hier issa:
(Buttons mit Bildwechsel und Sound bei mouseover)
Schlimm.
<html>
Der Doctype fehlt.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
Ein windows spezifischer Charset ist im Internet keine gute Wahl.
<title>Neue Seite 1</title>
<script language="JavaScript">
Hier fehlt das type Attribut.
<!--
function SymError()
{
return true;
}window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}window.open = SymWinOpen;
Der Code ist aus einem Popupblocker o.ä.
<SCRIPT language=Javascript>
Hier fehlt....
function change(imageName,imageFile){
if(!document.images) return;
eval('document.images[imageName].src = '+imageFile + '.src');
}
eval ist evil!
document.images[imageName].src = window[imageFile].src;
function errorHandler(){
return true;
}
window.onerror = errorHandler;
Wozu soll das gut sein?
function playSound(){
if(navigator.appName.indexOf("Netscape") != -1){
if(!navigator.plugins) return;
if(!navigator.javaEnabled()) return;
document.snd.play();
}
else if(navigator.appName.indexOf("Microsoft") != -1){
startIE(snd);
}
}
//-->
Ich bin icht sicher aber meine es gibt mehr als zwei Browser, aber wird ncith so wichtig sein.
<OBJECT classid=CLSID:05589FA1-C356-11CE-BF01-00AA0055595A height=1 id=snd width=1>
Du solltest alle Attribute, die keine Zahlen sind, immer in Anführungszeichen setzen.
<A href="index.htm" onmouseout="change('A','c0')" onmouseover="playSound(); change('A','c1');">
<IMG alt="" border=0 height=15 name=A src="Hyperlinks/button4F.jpg" width=62></A>
Warum so umständlich. Leider haben deine Buttons eine etwas seltsame Benamsung, aber vom Prinzip geht es so leichter:
<img alt="" border=0 height=15 src="Hyperlinks/button4F.jpg" width=62
onmouseover="this.src = 'Hyperlinks/button50.jpg'"
onmouseout="this.src = 'Hyperlinks/button4f.jpg'"
Struppi.