Antworten auf deine Fragen:
Neues Thema erstellen

css hover effect mit tonausgabe

M

Mtzlr

Noch nicht viel geschrieben

Hallo,

ich habe eine Frage:

Kann ich mit css hover effect einen Ton erzeugen oder abrufen?

zum mal schauen was ich meine:

Ich habe ein Klavier mit css zusammengebastelt und möchte nun das auch der dazugehörige Klavierton ausgegeben wird.

CSS-Script:

#btn_galerie_0 { width:90px;
height:379px;
left:600px;
top:400px;
position:absolute;
display:block;
background-image:url(galerie.png);
background-repeat:no-repeat;
z-index:4;
}

#btn_galerie_0:hover { width:90px;
height:379px;
display:block;
background-image:url(galerie_gd.png);
}

#btn_taste_schwarz_0 { width:50px;
height:190px;
left:658px;
top:390px;
position:absolute;
display:block;
background-image:url(taste_schwarz.png);
background-repeat:no-repeat;
z-index:5;
}


#btn_taste_schwarz_0:hover { width:50px;
height:379px;
display:block;
background-image:url(taste_schwarz_gd.png);
}


#btn_taste_mi_0 { width:90px;
height:379px;
left:680px;
top:400px;
position:absolute;
display:block;
background-image:url(mi_os.png);
background-repeat:no-repeat;
z-index:4;
}

#btn_taste_mi_0:hover { width:90px;
height:379px;
display:block;
background-image:url(mi_os_gd.png);
}

#btn_taste_schwarz_1 { width:50px;
height:190px;
left:755px;
top:390px;
position:absolute;
display:block;
background-image:url(taste_schwarz.png);
background-repeat:no-repeat;
z-index:5;
}

#btn_taste_schwarz_1:hover { width:50px;
height:379px;
display:block;
background-image:url(taste_schwarz_gd.png);
}

#btn_ueber_0 { width:90px;
height:379px;
left:759px;
top:400px;
position:absolute;
display:block;
background-image:url(ueber.png);
background-repeat:no-repeat;
z-index:4;
}

#btn_ueber_0:hover { width:90px;
height:379px;
display:block;
background-image:url(ueber_gd.png);
}

#btn_li_os_0 { width:90px;
height:379px;
left:838px;
top:400px;
position:absolute;
display:block;
background-image:url(li_os.png);
background-repeat:no-repeat;
z-index:4;
}

#btn_li_os_0:hover { width:90px;
height:379px;
display:block;
background-image:url(li_os_gd.png);
}

#btn_taste_schwarz_2 { width:50px;
height:190px;
left:894px;
top:390px;
position:absolute;
display:block;
background-image:url(taste_schwarz.png);
background-repeat:no-repeat;
z-index:5;
}

#btn_taste_schwarz_2:hover { width:50px;
height:379px;
display:block;
background-image:url(taste_schwarz_gd.png);
}

#btn_taste_feste_1 { width:90px;
height:379px;
left:917px;
top:400px;
position:absolute;
display:block;
background-image:url(gaeste.png);
background-repeat:no-repeat;
z-index:4;
}

#btn_taste_feste_1:hover { width:90px;
height:379px;
display:block;
background-image:url(gaeste_gd.png);
}

#btn_taste_schwarz_3 { width:50px;
height:190px;
left:984px;
top:390px;
position:absolute;
display:block;
background-image:url(taste_schwarz.png);
background-repeat:no-repeat;
z-index:5;
}

#btn_taste_schwarz_3:hover { width:50px;
height:379px;
display:block;
background-image:url(taste_schwarz_gd.png);
}

#btn_taste_mi_2 { width:90px;
height:379px;
left:997px;
top:400px;
position:absolute;
display:block;
background-image:url(mi_os.png);
background-repeat:no-repeat;
z-index:4;
}

#btn_taste_mi_2:hover { width:90px;
height:379px;
display:block;
background-image:url(mi_os_gd.png);
}

#btn_taste_schwarz_4 { width:50px;
height:190px;
left:1071px;
top:390px;
position:absolute;
display:block;
background-image:url(taste_schwarz.png);
background-repeat:no-repeat;
z-index:5;
}


#btn_taste_schwarz_4:hover { width:50px;
height:379px;
display:block;
background-image:url(taste_schwarz_gd.png);
}

#btn_taste_kontakt { width:90px;
height:379px;
left:1076px;
top:400px;
position:absolute;
display:block;
background-image:url(kontakt.png);
background-repeat:no-repeat;
z-index:4;
}

#btn_taste_kontakt:hover { width:90px;
height:379px;
display:block;
background-image:url(kontakt_gd.png);
}



Wäre cool wenn jemand von euch ne Idee oder einen Denkanstoß für mich hat.
 

mireko

mireko

Noch nicht viel geschrieben

AW: css hover effect mit tonausgabe

Mit javascript würds aber gehen... mein ich.


Und Ps: Die seite hat ein viel zu großes format. ;p
Mit einem kleienen bildschirm sieht man nur die hälfte
 
M

Mtzlr

Noch nicht viel geschrieben

AW: css hover effect mit tonausgabe

Super hat mit JavaScript funktioniert .... und ja ihr habt recht ... für kleine Bildschirme mit einer Auflösung unter 1280x1024 sieht man nur die Hälfte der Seite ... das muß ich noch ändern

hier noch das JavaScript ... als Lösungsansatz für andere ;-)


<script LANGUAGE="JavaScript"><!--
// Preload and play audio files with event handler (MouseOver sound)
// designed by JavaScript Archive, (c)1999
// Get more free javascripts at

var aySound = new Array();
// Below: source for sound files to be preloaded

aySound[0] = "ton_0.wav";
aySound[1] = "ton_1.wav";
aySound[2] = "ton_2.wav";
aySound[3] = "ton_3.wav";
aySound[4] = "ton_4.wav";
aySound[5] = "ton_5.wav";
aySound[6] = "ton_6.wav";
aySound[7] = "ton_7.wav";
aySound[8] = "ton_8.wav";
aySound[9] = "ton_9.wav";
aySound[10] = "ton_10.wav";
aySound[11] = "ton_11.wav";

// DO NOT edit below this line
document.write('<BGSOUND ID="auIEContainer">')
IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = IE||NS? 1:0;
onload=auPreload;

function auPreload() {
if (!ver4) return;
if (NS) auEmb = new Layer(0,window);
else {
Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",Str);
}
var Str = '';
for (i=0;i<aySound.length;i++)
Str += "<EMBED SRC='"+aySound+"' AUTOSTART='FALSE' HIDDEN='TRUE'>"
if (IE) auEmb.innerHTML = Str;
else {
auEmb.document.open();
auEmb.document.write(Str);
auEmb.document.close();
}
auCon = IE? document.all.auIEContainer:auEmb;
auCon.control = auCtrl;
}
function auCtrl(whSound,play) {
if (IE) this.src = play? aySound[whSound]:'';
else eval("this.document.embeds[whSound]." + (play? "play()":"stop()"))
}
function playSound(whSound) { if (window.auCon) auCon.control(whSound,true); }
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }
//-->
</script>


und html: Die BUTTONS ;-)

<a href="galerie.html" onMouseOver="playSound(0)" onMouseOut="stopSound(0)"> <div id="btn_galerie_0"> </div> </a>
<a href=" " onMouseOver="playSound(1)" onMouseOut="stopSound(1)"> <div id="btn_taste_schwarz_0"> </div> </a>
<a href=" " onMouseOver="playSound(2)" onMouseOut="stopSound(2)"> <div id="btn_taste_mi_0"> </div> </a>
<a href=" " onMouseOver="playSound(3)" onMouseOut="stopSound(3)"> <div id="btn_taste_schwarz_1"> </div> </a>
<a href="ueberuns.html" onMouseOver="playSound(4)" onMouseOut="stopSound(4)"> <div id="btn_ueber_0"> </div> </a>
<a href=" " onMouseOver="playSound(5)" onMouseOut="stopSound(5)"> <div id="btn_li_os_0"> </div> </a>
<a href=" " onMouseOver="playSound(6)" onMouseOut="stopSound(6)"> <div id="btn_taste_schwarz_2"> </div> </a>
<a href="gaestebuch.html" onMouseOver="playSound(7)" onMouseOut="stopSound(7)"> <div id="btn_taste_feste_1"> </div> </a>
<a href=" " onMouseOver="playSound(8)" onMouseOut="stopSound(8)"> <div id="btn_taste_schwarz_3"> </div> </a>
<a href=" " onMouseOver="playSound(9)" onMouseOut="stopSound(9)"> <div id="btn_taste_mi_2"> </div> </a>
<a href=" " onMouseOver="playSound(10)" onMouseOut="stopSound(10)"> <div id="btn_taste_schwarz_4"> </div> </a>
<a href="kontakt.php" onMouseOver="playSound(11)" onMouseOut="stopSound(11)"> <div id="btn_taste_kontakt"> </div> </a>


allerdings klappt das nur beim IE und Netscape ... leider nicht in Firefox und Opera

warum weiß ich auch noch nicht ... vielleicht hat jemand ne Idee
 
Zuletzt bearbeitet:
Manfred62

Manfred62

Nicht mehr ganz neu hier

AW: css hover effect mit tonausgabe

Hallo

OT: benutz doch bitte die Code Buttons (das sind die letzten 3), dann ist es besser lesbar.

Gruß Manfred
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 153 (Mitglieder: 5, Gäste: 148)
Robots: 606

Statistik des Forums

Themen
118.565
Beiträge
1.538.067
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben