On Mouse Over Effekt per Grafikaustausch

declaudi · 26.04.2010

Einen schönen guten Abend wünsche ich.

Ich bin gerade dabei mir eine eigene Website zusammen zu puzzeln. Eigentlich beschäftige ich mich schon eine Weile damit, aber sehe mich immer noch als Anfänger. Hin und wieder stoße ich deshalb immer mal auf einige Probleme wie auch gestern wieder und ich bekomms einfach nicht gelöst. Hoffe Ihr Könnt mir etwas auf die Sprünge helfen. Oder vielleicht habt ihr ja ach ein anderes tolles Tutoriak für mich. Habe nun mittlerweile einiges ausprobiert aber nix möchte so richtig funktionieren ...

Vorhaben:

Ich möchte gern einen on mouse over effekt in meinem Menü erstellen wobei sich meine Button-Grafik in eine andere Button-Grafik ändert. (also eigentlich das gleiche Bild nur in einer anderen Farbe bzw. Größe)

Jetziges Script:

Dieses habe ich an meine Bannerstelle im head Bereich gesetzt. Mehr steht dies bezüdlich nicht im Script, außer die Ausrichtung im css.

HTML:

<div id="menu_top">
       <a href="willkommen.html"
             onmouseover=
             "document.images.MOpic.src=
             'grafikgaleriesammlung/menu_2b.png'"
             onmouseout=
             "document.images.MOpic.src=
             'grafikgaleriesammlung/menu_2.png'">
             <img id="menu_pic_w" src="grafikgaleriesammlung/menu2.png"     
             name="MOpic"/>
             <div id="menu_text_w"> Willkommen </div>
        </a>

        <a href="vita.html"
             onmouseover=
             "document.images.MOpic.src=
             'grafikgaleriesammlung/menu_2b.png'"
             onmouseout=
             "document.images.MOpic.src=
             'grafikgaleriesammlung/menu_2.png'">
             <img id="menu_pic_pr" src="grafikgaleriesammlung/menu2.png"    
             name="MOpic"/>
             <div id="menu_text_pr"> Profil </div>
        </a>

        <a href="portfolio.html"
             onmouseover=
             "document.images.MOpic.src=
             'grafikgaleriesammlung/menu_2b.png'"
             onmouseout=
             "document.images.MOpic.src=
             'grafikgaleriesammlung/menu_2.png'">
             <img id="menu_pic_po" src="grafikgaleriesammlung/menu2.png"/>
             <div id="menu_text_po"> Portfolio </div>
         </a>

          <a href="kontakt.html"
               onmouseover=
               "document.images.MOpic.src=
               'grafikgaleriesammlung/menu_2b.png'"
               onmouseout=
               "document.images.MOpic.src=
               'grafikgaleriesammlung/menu_2.png'">
               <img id="menu_pic_c" src="grafikgaleriesammlung/menu2.png" 
               name="MOpic"/>
               <div id="menu_text_c"> Kontakt </div>
           </a>
           
           <a href="impressum.html"
                onmouseover=
                "document.images.MOpic.src=
                'grafikgaleriesammlung/menu_2b.png'"
                onmouseout=
                "document.images.MOpic.src=
                'grafikgaleriesammlung/menu_2.png'">
                <img id="menu_pic_i" src="grafikgaleriesammlung/menu2.png"  
                name="MOpic"/>
                <div id="menu_text_i"> Impressum </div>
            </a>
       </div>

Problem:

wenn ich das Script so in meine Seite einfüge ...

1. ... ist jede einzelne Seite mit der impressum.html verlinkt
2. ... sobald ich meine Seite mit dem Mauszeiger an irgendeiner beliebigen Stelle berühre wechselt schon die Willkommen-Button-Grafik, obwohl dies erst mit berühren des Buttons geschehen sollte
3. ... und die restlichen Buttons wechseln garnicht ihre Grafik beim überfahren dessen

ICH DANKE SCHON MAL IM VORAUS

sokie · 26.04.2010

AW: On Mouse Over Effekt per Grafikaustausch

das geht so sowieso nicht
<a><div></div></a>
ein a element darf nur inline-elemente enthalten möglich wäre zB <a><span></span></a>

warum muss es denn ein javascript bildwechsel sein? das liesse sich doch auch mit css machen.

cebito · 26.04.2010

AW: On Mouse Over Effekt per Grafikaustausch

Du benutzt doch überall dasselbe Bild, mach es per css:

HTML:

<ul class="wechselDenButton">
<li><a href="seite1">seite1</a></li>
<li><a href="seite2">seite2</a></li>
<li><a href="seite3">seite3</a></li>
</ul>

Code:

.wechselDenButton li{
   display:inline-block;
}
.wechselDenButton li a{
   background:url(menu.png);
}
.wechselbutton li a:hover{
   background:url(menuHover.png);
}

valentina82 · 27.04.2010

AW: On Mouse Over Effekt per Grafikaustausch

Hi declaudi

gerade die Menüleiste sollte ohne JS gestaltet werden, weil viele User JS deaktievieren.
Ich finde auch, dass CSS die beste Lösung für dein Problem ist.

LG Valentina

Pixelverwender · 27.04.2010

AW: On Mouse Over Effekt per Grafikaustausch

Wie cebito schon geschrieben hat: Das lässt sich einfacher mit CSS realisieren.

Ich würde auch davon abraten, die Navigation mit Javascript zu erstellen.
Nicht wenige User verwenden Scriptblocker oder haben Javascript deaktiviert - somit dann auch keine Navigation.
Zudem haben Suchmaschinen Schwierigkeiten, den Links zu folgen (bzw. tun es überhaupt nicht).

Edit: Oops, hab zu langsam geschrieben, valentina war fixer.

dirk_ry · 27.04.2010

AW: On Mouse Over Effekt per Grafikaustausch

Moin!
Machs doch einfach so:

Code:

/* Links im Menue - BEISPIEL */
a.menu:link, a.menu:visited { 
  color:#fff;
  text-decoration:none;
}

a.menu:active, a.menu:hover { 
  color:#f00;
}

/* Menue - BEISPIEL*/
#menu {
color:#fff;
background-color:#ccc;
text-align:center;
}

Alternativ kannst du natürlich auch Bilder im CSS verlinken ...

Code:

<div id="menu">
    <a class="menu" href="#">Link 1</a> |
    <a class="menu" href="#">Link 2</a> |
    <a class="menu" href="#">Impressum</a> |
    <a class="menu" href="#">Kontakt</a> |
    <a class="menu" href="#">usw.</a>
</div>

Hoffe das hilft!

Denke so ist es am einfachsten ohne viel Schnickschnack.
Grüsse
Dirk

declaudi · 28.04.2010

AW: On Mouse Over Effekt per Grafikaustausch

Hey Danke ... hätt ichs doch nur gleich gewusst das es so einafch sein kann. Das übers CSS klappt echt super und ist auch für mich echt verständlicher. Danke nochmal.

cebito · 28.04.2010

AW: On Mouse Over Effekt per Grafikaustausch

declaudi schrieb:
Hey Danke ... hätt ichs doch nur gleich gewusst das es so einafch sein kann. Das übers CSS klappt echt super und ist auch für mich echt verständlicher. Danke nochmal.

Dafür ist das Forum da, stell deine Frage und du bekommst (in den meisten Fällen) ne Antwort

declaudi · 30.04.2010

AW: On Mouse Over Effekt per Grafikaustausch

Hallo ich nochmal,

bin nochmal am alten Problem hängen geblieben.

Für das Menü klappt die Lösung übers CSS ja super, aber nun möchte ich meine Website gerne noch mit einigen Icons erweitern. Die sich bei einem ONMOUSEOVER vergrößern sollen. Habe nun auch schon wieder einiges ausprobiert, aber nichts möchte so richtig zu meiner Zufriedenheit funktionieren. Entweder rukeln die Sachen, funktionieren nicht im FF, die Vergrößerung findet an anderer Stelle statt oder das kleine Icon wird beim vergrößern über dem großen Bild nochmal abgebildet und nicht ausgeblendet.

Seufz ... :'(

Jedoch möchte ich es nicht mit einem zoomeffekt von der gleichen Bilddatei ausgehend - dadurch verliert das Icon an Qualität.

Geht das evtl. auch übers CSS, habe bemerkt das einige Sachen nur über den IE funktionieren? Bin aber selbst intensiver FF-Nutzer, deshalb wäre es mir wichtig das es mit beiden Browsern kompatibel ist.

Vielen Dank nochmal im Voraus und LG declaudi

cebito · 01.05.2010

AW: On Mouse Over Effekt per Grafikaustausch

declaudi schrieb:
Die sich bei einem ONMOUSEOVER vergrößern sollen. Habe nun auch schon wieder einiges ausprobiert, aber nichts möchte so richtig zu meiner Zufriedenheit funktionieren.
Jedoch möchte ich es nicht mit einem zoomeffekt von der gleichen Bilddatei ausgehend - dadurch verliert das Icon an Qualität.

Meinst du sowas? Mach deine Icons gleich größer... und schau mal in den Quelltext, dafür brauchts JavaScript - in diesem Fall jquery

Du könntest das natürlich auch per css machen, aber die Animation würde fehlen.

sokie · 01.05.2010

AW: On Mouse Over Effekt per Grafikaustausch

declaudi schrieb:
Jedoch möchte ich es nicht mit einem zoomeffekt von der gleichen Bilddatei ausgehend - dadurch verliert das Icon an Qualität.

Geht das evtl. auch übers CSS, habe bemerkt das einige Sachen nur über den IE funktionieren? Bin aber selbst intensiver FF-Nutzer, deshalb wäre es mir wichtig das es mit beiden Browsern kompatibel ist.

Vielen Dank nochmal im Voraus und LG declaudi

Ja das geht auch mit css.
eigentlich ganz einfach,allerdings klingt es zunächst vielleicht kompliziert.
ein Beispielkönnte etwa so aussehen:

HTML:

<ul id="iconliste">
  <li class="beispiel1"><a href="meinveispiel.htm"><span>beispiel</span></a></li>
</ul>

das css könnte etwa so aussehen:

Code:

*{ margin:0;
    padding:0;
}
#iconliste a{
  display: block;
  height: 30px;
  width: 30px;
}
#iconliste .beispiel1 a{
  background: transparent url(icon1_klein.png) center center no-repeat;
}
#iconliste .beispiel1 a:hover{
  background: transparent url(icon1_30px.png) center center no-repeat;
}
#iconliste a span{
  display: none;
}

für dasBeispiel habe ich angenommen,dass das icon gross 30x30px hat, und das kleien entsprechend kleiner.
für weitere links müsste man eben weitere klassen einführen.(wobei "beispiel1" natürlich kein guter klassenName wäre

)

declaudi · 01.05.2010

AW: On Mouse Over Effekt per Grafikaustausch

@cebito: Ja genau so was in der Art. Ich möchte nur meine Icons gleich mit einer .html Seite verlinken und ich weiß nicht ob das bzw. wie das evtl. mit nem Doppellink verknüpfen kann? Und da ich mich kaum mit js auskenne komme ich auch aus dieser 3x3 Tabelle nicht raus. Das JS ist sehr sehr umfangreich.

@sokie: ja das funktioniert schon ganz gut. Nur ruckelt beim onmouseover der ganze main Bereich mit. Kann man das noch irgendwie feststellen, so das es nicht mehr verruscht?

... und der Blubseffekt fehlt halt auch ... den find ich eigentlich toll also doch lieber JS oder?

sokie · 01.05.2010

AW: On Mouse Over Effekt per Grafikaustausch

verrat mir doch mal, was ein Blubseffekt ist...

(Geräusche brauchen schon javascript)

Nach dem in #11 geposteten code, kann beim hover eigentlich nicht ruckeln, weil sich gar keine Grössen verändern. es wird nur das background-image ausgetauscht. (nach deiner Vorgabe, dass Zoom nicht in frage kommt.)

Beipiele:

cebito · 01.05.2010

AW: On Mouse Over Effekt per Grafikaustausch

declaudi schrieb:
@cebito: Ja genau so was in der Art. Ich möchte nur meine Icons gleich mit einer .html Seite verlinken und ich weiß nicht ob das bzw. wie das evtl. mit nem Doppellink verknüpfen kann?

Entferne diese function aus dem Scriptbereich,

PHP:

//Swap Image on Click
 $("ul.thumb li a").click(function() {
 var mainImage = $(this).attr("href"); //Find Image Name
 $("#main_view img").attr({ src: mainImage });
 return false; 
});

und im href-attribut verlinkst du zu deiner neuen Seite.

Was meinst du mit Doppellink?

declaudi · 01.05.2010

AW: On Mouse Over Effekt per Grafikaustausch

@ sokie:

sorry e bissl schlecht beschrieben ...

Ich mein das eher so wie in dem Link von cebito. Da macht die Grafik beim öffnen nochmal so eine Art "Animationsblubb". Bei der CSS Variante ist immer noch das Problem das sich der ganze MainInhalt beim vergrößern der Grafik mit verschiebt und es ruckelt auch sehr. Es läuft leider nicht so flüssig wie ich es mir vorstelle. Warum muss JS so "vervariabelt" sein ... vielleicht sollte ich erstmal irgendwie da anfangen ... aber ich weiß auch eigentlich garnicht so richtig womit ich beginnen sollte beim JS ... :'(

Edit: Oh ihr hattet ja schon geschrieben ... sorry für meine Verwirrtrheit heute ...ich teste erstmal ... Danke euch.

declaudi · 03.05.2010

AW: On Mouse Over Effekt per Grafikaustausch

Hallo da bin ich noch mal. Habe das script von nochmal bearbeitet und bin auch endlich mal etwas weiter gekommen. Aber noch nicht so ganz zu frieden.

Da ist erstmal mein Script:

Der Headbereich:

HTML:

<style type="text/css">
    * {margin: 0; padding: 0;}
    img {border: none;}
    ul.thumb {
        float: left;
        list-style: none;
        margin: 0; padding: 10px;
    }
    ul.thumb li {
        margin: 0; padding: 5px;
        float: left;
        position: relative;
        width: 50px;
    }
    ul.thumb li img {
        width: 44px; height: 46px;
        padding: 5px;
        background: url(grafikgaleriesammlung/icons/thumb1.png);
        position: absolute;
        left: 0; top: 0;
        -ms-interpolation-mode: bicubic; 
    }
    ul.thumb li img.hover {
        background:url(grafikgaleriesammlung/icons/corporatedesign.png) no-repeat center center;
        border: none;
    }
</style>
<script type="text/javascript" src="grafikgaleriesammlung/icons/jquery-latest.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){
        //Larger thumbnail preview 

    $("ul.thumb li").hover(function() { 
    $(this).css({'z-index' : '10'});
    $(this).find('img').addClass("hover").stop()
    .animate({width: '65px', height: '70px',}, 200);


      } , function() {                                      

        $(this).css({'z-index' : '0'});         
    $(this).find('img').removeClass("hover").stop()
        .animate({width: '44px', height: '46px',}, 400);
    });
    });
</script>

Der Bodybereich

HTML:

<ul class="thumb" id="table_icons">
    <li><a href="corporate_design.html"><img src="grafikgaleriesammlung/icons/thumb1.jpg" alt="" /></a></li>
    <li><a href="typografie.html"><img src="grafikgaleriesammlung/icons/thumb2.jpg" alt="" /></a></li>
    <li><a href="grafische_produkte.html"><imggrafikgaleriesammlung/icons/thumb3.jpg" alt="" /></ src="a></li>
    <li><a href="lailos_group.html"><img src="grafikgaleriesammlung/icons/thumb4.jpg" alt="" /></a></li>
    <li><a href="fotografie.html"><img src="grafikgaleriesammlung/icons/thumb5.jpg" alt="" /></a></li>
    <li><ahref="bildbearbeitung.html"><img src="grafikgaleriesammlung/icons/thumb6.jpg" alt="" /></a></li>
    <li><a href="plastik.html"><img src="grafikgaleriesammlung/icons/thumb7.jpg" alt="" /></a></li>
    <li><a href="malerei.html"><img src="grafikgaleriesammlung/icons/thumb8.jpg" alt="" /></a></li>
</ul>

Die noch auftretenden Probleme:

Die Icons werden zwar animiert vergrößert, aber dabei aus der Mitte geschoben.

Nach dem onMouseover - quasi beim runtergehen mit der Maus rastert es das Icon
in einem größerem Rahmen mehrfach bevor es in die eigentlich Ursprungsgröße zurückspringt und ich
weiß nicht genau wo ich das im Script beeinflusssen kann.

Und ein nächstes Problem ist das immer nur die gleiche Grafik in allen 8 "Rahmen" erscheint. Wie speise ich die verschiedenen
Grafiken durch das Script?

Und noch eine allgemeine Frage: Muss ich irgendwo im Script angeben woher das jquery stammt oder darf ich es frei nutzen?

Danke schon mal nochmal

Gulu · 03.05.2010

AW: On Mouse Over Effekt per Grafikaustausch

Zum Thema mouse_over:

Der Mouseover Effekt - onmouseover javascript beispiele script java scripte mouse-over mouse over mausover

Nur wer will...

sokie · 03.05.2010

AW: On Mouse Over Effekt per Grafikaustausch

declaudi schrieb:
Die Icons werden zwar animiert vergrößert, aber dabei aus der Mitte geschoben.

das lässt sich verhinden, indem du im animate() auch noch ein ,'left':'-= xxpx,'top':'-=yypx' notierst, wobei xx und yy jeweils die hälfte der pixel sind um die kleine und vergrösserte img unterscheiden.

declaudi schrieb:
Nach dem onMouseover - quasi beim runtergehen mit der Maus rastert es das Icon
in einem größerem Rahmen mehrfach bevor es in die eigentlich Ursprungsgröße zurückspringt und ich
weiß nicht genau wo ich das im Script beeinflusssen kann.

das hat mit dem Script nichts zu tun, sondern daran, dass du ein Hintergrundbild für den ul.thumb li img im css hast, was unnötig ist.
Das führt zu dem falschen Schluss -> :

declaudi schrieb:
Und ein nächstes Problem ist das immer nur die gleiche Grafik in allen 8 "Rahmen" erscheint. Wie speise ich die verschiedenen
Grafiken durch das Script?

hier wird nur das im vorigen Punkt angesprochene unnötige Hintergrundbild angezeigt, weil vermutlich deine BildURLs falsch sind. sollten hier

Code:

<[COLOR=Purple]ul[/COLOR] class=[COLOR=Blue]"thumb"[/COLOR]  id=[COLOR=Blue]"table_icons[/COLOR]">
    <[COLOR=Purple]li[/COLOR]><[COLOR=Purple]a[/COLOR]  href=""><[COLOR=Purple]img[/COLOR]  src="[URL="http://www.psd-tutorials.de/modules/Forum/view-source:file://F:/jquery_portfolio/grafikgaleriesammlung/icons/thumb1.jpg"]grafikgaleriesammlung/icons/thumb1[COLOR=Red][B].jpg[/B][/COLOR][/URL]" alt=""  /></[COLOR=Purple]a[/COLOR]></[COLOR=Purple]li[/COLOR]>
    <[COLOR=Purple]li[/COLOR]><[COLOR=Purple]a[/COLOR]  href=""><[COLOR=Purple]img[/COLOR]  src="" alt=""  /></[COLOR=Purple]a[/COLOR]></[COLOR=Purple]li[/COLOR]>
    <[COLOR=Purple]li[/COLOR]><[COLOR=Purple]a[/COLOR]  href=""><[COLOR=Purple]img[/COLOR] src="" alt=""  /></[COLOR=Purple]a[/COLOR]></[COLOR=Purple]li[/COLOR]>
    <[COLOR=Purple]li[/COLOR]><[COLOR=Purple]a[/COLOR]  href=""><[COLOR=Purple]img[/COLOR]  src="" alt=""  /></[COLOR=Purple]a[/COLOR]></[COLOR=Purple]li[/COLOR]>
    <[COLOR=Purple]li[/COLOR]><[COLOR=Purple]a[/COLOR]  href=""><[COLOR=Purple]img[/COLOR]  src="" alt=""  /></[COLOR=Purple]a[/COLOR]></[COLOR=Purple]li[/COLOR]>
    <[COLOR=Purple]li[/COLOR]><[COLOR=Purple]a[/COLOR]href=""><[COLOR=Purple]img[/COLOR]  src="" alt=""  /></[COLOR=Purple]a[/COLOR]></[COLOR=Purple]li[/COLOR]>
    <li><[COLOR=Purple]a[/COLOR] href=""><[COLOR=Purple]img[/COLOR]  src="" alt=""  /></[COLOR=Purple]a[/COLOR]></[COLOR=Purple]li[/COLOR]>
    <[COLOR=Purple]li[/COLOR]><[COLOR=Purple]a[/COLOR]  href=""><[COLOR=Purple]img[/COLOR]  src="" alt=""  /></[COLOR=Purple]a[/COLOR]></[COLOR=Purple]li[/COLOR]>
<[COLOR=Purple]/ul[/COLOR]>

nicht alle Deine img auf .png enden ?

declaudi schrieb:
Und noch eine allgemeine Frage: Muss ich irgendwo im Script angeben woher das jquery stammt oder darf ich es frei nutzen?

ja, die jquery Gemeinde und John Resig freuen sich, wenn du jquery nutzt, solange der copyright header in der.js Datei bleibt

John Redig schrieb:
/*!
* jQuery JavaScript Library v1.4.2
* jQuery: The Write Less, Do More, JavaScript Library
*
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* License – jQuery Project
*
* Includes Sizzle.js
* Sizzle JavaScript Selector Library
* Copyright 2010, The Dojo Foundation
* Released under the MIT, BSD, and GPL Licenses.
*
* Date: Sat Feb 13 22:33:48 2010 -0500
*/

http://jquery.org/license

PS: bitte pack doch deine Codes mit den Wekzeugen in die Codebeählter - das lässt sich dann einfacher lesen.

declaudi · 04.05.2010

AW: On Mouse Over Effekt per Grafikaustausch

@ sokie: oh das meiste waren echt nur Denkfehler ...

Leider gibt es immer noch einige Probleme

Das mit der mittigen Ausrichtung hat noch nicht geklappt.
Wenn ich 'left':'-= xxpx,'top':'-=yypx' in animate () notiere und es ausrichte dann verutscht das Icon nur nach der Vergrößerung in die dort angegebene Position.

Der IE kommt damit nicht klar und animiert garnichts davon. Kann man da was machen?

Ich habe auch schon ein animiertes Navigationsmenü über JS in meinem Script ... jedoch sind nun die Icons immer im Vordergrund und
ich kann ab der Stelle wo die Icons sitzen das Menü nicht mehr nutzen und es wird ab dieser Stelle ausgeblendet ausgeblendet.

Und weil es meine erste Seite ist die ich mal nicht nur zu Testzwecken erstelle, bin ich natürlich auch noch sehr verspielt und es müssen ja auch noch unbedingt Tausende von Effekten sein (wie Hintergrundmusik, Buttonsound, eine kleine Hintergrundanimation und ein Mausverfolgungseffekt) ... wie das halt so ist ... *freuendes grins*

Aber seit dem ich Icons und Menü eingefügt habe gehen auch diese nicht mehr ... :'

'

'( ... vorher lief alles perfekt

Sollte ich lieber komplett auf sowas verzichten? Mit welcher Konsequenz muss ich rechnen wenn ich doch nicht verzichte? Kann der User meiner Seite nur den Teil nicht lesen den es ausbremst oder kann es auch passieren das er garnichts von meiner Seite hat?

sokie · 04.05.2010

AW: On Mouse Over Effekt per Grafikaustausch

hallo declaudi,
also das mit dem zentrieren (und beim animieren zentriert bleiben) das ist ja so:
das icon wird vergrössert, und das es ja positioniert ist(links oben) geschieht das vergrössern natürlich nach unten und nach rechts. als muss sich das Ding auch gleichzeitig nach oben und links um jeweils den halben Betrag verschieben, damit es optisch an der Position bleibt.
Beim Verkleinern (also beim mouseout) muss natürlich beides auch wieder zurückgenommen werden, bzw.das icon wieder an der alten platz gesetzt werden. Am praktischten geht das mit animate("top":0,"left":0).
ein Beipspiel (allerdings mit anderen icons alle 48x48) hier
ich habe das ein wenig ausgemistet. die klasse .hover wird nicht benötigt und ist nicht mehr drin.
Funktioniert allerdings auch im alten ie6...

declaudi schrieb:
und es müssen ja auch noch unbedingt Tausende von Effekten sein

wenn eins klar ist, dann doch wohl das

(Stichwort "blubseffekte")
ich finde das auch gut.man muss ja schliesslich die Erfahrungen machen - und leider auch die, dass 'alles' zusammen nicht ungeregelt gehen kann (aus gutem Grund haben Chöre meisst einen Dirigenten, und einigen sich zumindest darauf, zeitgleich das selbe Lied zu singen..)

für den Auftritt der Seite hinterher, sollten dann aber doch die Inhalte die ersteStelle haben,und die blubse eher moderat gehalten werden, oder? (was man in dem wenigen an Code zumindest herauslesen kann ist, dass du eine Reihe interessanter Inhalte hast - ich bin jedenfalls gespannt.

DieKonsequnzen liegen liegen doch auf der Hand - wenn die tausende von Effekten funktionieren ist dein Besucher schnell überfordert (wenn er beim absurfen gern seine klassische Chormusik hört vielleicht sogar verärgert).
Wenn vieles nicht funktioniert ist das weniger schlimm, solange es nicht dazu führt, dass die funktion nicht beeinträchtigt wird. Am Beispiel der Button-effekte wird dasschnell klar -selbst wenn die Effekte ausbleiben,funktioniert trotzdem der Klick auf den Button, und der Aufruf der gewünschten Seiten.
Inhalte wie "Typografie" oder "Corporate Design" etc. verlangen aber schon vom Rahmen ein bisschen Disziplin, Zurückhaltung und ein klares Konzept - da sindvon tausend Effekten vielleicht schnell 999 gar nicht gefragt, oder gar nicht erwünscht.