mouseover

Duddle · 07.02.2011

AW: mouseover

Wow, deine Lösung ist zwanzig Mal umständlicher und vorallendingen sehr schwer erweiterbar. Mein (nicht idealer, aber definitiv besserer) Ansatz passt sich ohne Mühe an neue Inhalte an.

Darfst du kein Framework wie jQuery benutzen, oder warum löst du das so?

Duddle

susiH · 07.02.2011

AW: mouseover

das war nur mein ansatz...
es sieht jetz anders aus, aber nach deinen maßstäben wahrscheinlich immer noch mies

aliasltb · 07.02.2011

AW: mouseover

@ Duddle
Ich wollte schon sagen, dass du auch erwähnen musst, dass du jQuery verwendest. Denn ihm jQuery zu präsentieren bringt ihm nichts, wenn er es dann einfügt aber nicht die entsprechenden Dateien vorher aus dem Netz lädt und in seine Seite einbindet.

Dann hätte das den gleichen Effekt wie als wenn du Kaffee ohne Filter aufkochst.. nämlich nur irgendeine Plörre..

Duddle · 07.02.2011

AW: mouseover

Zweiter Versuch, diesmal klarer:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>susiH</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" language="javascript" charset="utf-8">
            $(document).ready(function() {
                    $("#navigation li[id]").not("#alleklassen").hover(
                        function() {
                            //hover in
                            $("#alles img").stop().fadeTo("fast", 1);
                            var tag = $(this).attr("id");
                            $("#alles img:not(."+tag+")").stop().fadeTo("fast", 0.5);
                        }, 
                        function() {
                            //hover out, nix machen
                    });
                    $("#alleklassen").hover(
                        function() {
                            $("#alles img").stop().fadeTo("fast", 1);
                    });

            });		
        </script>
    </head>
    <body>
        <div id="navigation"> 
            <ul> 
                <li id="alleklassen" ><a href="http://www.cottbus-werbung.de/wordpress/index.php"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/alles.gif" border="0" alt="alles" align=""></a></li> 
                <li><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/trenner.gif" /></li> 
                <li id="gestaltung"><a href="#" ><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/gestaltung.gif" border="0"/></a></li> 
                <li><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/trenner.gif" /></li> 
                <li id="werbung"><a href="#"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/werbung.gif" border="0" /></a></li> 
                <li><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/trenner.gif" /></li> 
                <li id="druck"><a href="#"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/druck.gif" border="0" /></a></li> 
                <li><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/trenner.gif" /></li> 
                <li id="internet"><a href="#"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/internet.gif" border="0" /></a></li> 
                <li><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/trenner.gif" /></li> 
                <li><a href="http://www.cottbus-werbung.de/wordpress/produktabc/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/produkt.gif" border="0" alt="produkt a-b-c" align=""></a></li> 
                <li><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/trenner.gif" /></li> 
                <li><a href="http://www.cottbus-werbung.de/wordpress/kontakt/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/kontakt.gif" border="0" alt="kontakt" align=""></a></li> 
            </ul> 
        </div>
        <!--alles.php-->


        <div id="alles">
            <div class="bilder">
                <a href="http://www.cottbus-werbung.de/wordpress/flyer/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/flyer.png" name="flyer" border="0" alt="flyer" class="design druck werbung"></a>
                <a href="http://www.cottbus-werbung.de/wordpress/fahrzeugbeschriftung/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/fahrzeugbeschriftung.png" name="fahrzeugbeschriftung" border="0" alt="flyer" class="design druck werbung"></a>

                <a href="http://www.cottbus-werbung.de/wordpress/aktion/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/aktion.png" name="aktion" border="0" alt="aktion" class="druck internet"></a>
                <a href="http://www.cottbus-werbung.de/wordpress/planenbanner/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/planenundbanner.png" name="planenundbanner" border="0" alt="planen und banner" class="werbung"></a>
                <a href="http://www.cottbus-werbung.de/wordpress/anfrage/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/anfrage.png" name="anfrage" border="0" alt="anfrage" class="gestaltung "></a>
            </div>


            <div class="bilder">

                <a href="http://www.cottbus-werbung.de/wordpress/newsletter/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/newsletter.png" name="newsletter" border="0" alt="newsletter"></a>    
                <a href="http://www.cottbus-werbung.de/wordpress/messe/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/messe.png" name="messe" border="0" alt="messe"></a>
                <a href="http://www.cottbus-werbung.de/wordpress/aussenwerbung/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/aussenwerbung.png" name="aussenwerbung" border="0" alt="aussenwerbung"></a>
                <a href="http://www.cottbus-werbung.de/wordpress/leuchtwerbung/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/leuchtwerbung.png" name="leuchtwerbung" border="0" alt="leuchtwerbung"></a>
                <a href="http://www.cottbus-werbung.de/wordpress/beschriftung/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/beschriftung.png" name="beschriftung" border="0" alt="beschriftung"></a></div>


            <div class="bilder">

                <a href="http://www.cottbus-werbung.de/wordpress/photographie/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/photographie.png" name="photographie" border="0" alt="photographie"></a>
                <a href="http://www.cottbus-werbung.de/wordpress/logounderscheinungsbilder/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/logosunderscheinungsbilder.png" name="logosunderscheinungsbilder" border="0" alt="logosunderscheinungsbilder"></a>
                <a href="http://www.cottbus-werbung.de/wordpress/satzundlayout/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/satzundlayout.png" name="satzundlayout" border="0" alt="satzundlayout"></a>
                <a href="http://www.cottbus-werbung.de/wordpress/geschaeftsausstattung/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/geschaeftsausstattung.png" name="geschaeftsausstattung" border="0" alt="geschaeftsausstattung"></a>
                <a href="http://www.cottbus-werbung.de/wordpress/textildruck/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/textildruck.png" name="textildruck" border="0" alt="textildruck"></a></div>


            <div class="bilder">
                <a href="http://www.cottbus-werbung.de/wordpress/aufkleberundetiketten/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/aufkleberundetiketten.png" name="aufkleberundetiketten" border="0" alt="aufkleberundetiketten"></a>
                <a href="http://www.cottbus-werbung.de/wordpress/plakate/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/plakate.png" name="plakate" border="0" alt="plakate"></a>
                <a href="http://www.cottbus-werbung.de/wordpress/webdesign/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/webdesign.png" name="webdesign" border="0" alt="webdesign"></a>
                <a href="http://www.cottbus-werbung.de/wordpress/contentmanagementsysteme/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/contentmanagementsysteme.png" name="contentmanagementsysteme" border="0" alt="contentmanagementsysteme"></a>
                <a href="http://www.cottbus-werbung.de/wordpress/wegeundleitsysteme/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/wegeundleitsysteme.png" name="wegeundleitsysteme" border="0" alt="wegeundleitsysteme"></a></div>


            <div class="bilder">
                <a href="http://www.cottbus-werbung.de/wordpress/webbanner/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/webbanner.png" name="webbanner" border="0" alt="webbanner"></a>

                <a href="http://www.cottbus-werbung.de/wordpress/geschaeftspapiere/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/geschaeftspapiere.png" name="geschaeftspapiere" border="0" alt="geschaeftspapiere"></a>
                <a href="http://www.cottbus-werbung.de/wordpress/schilder/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/schilder.png" name="schilder" border="0" alt="schilder"></a>
                <a href="http://www.cottbus-werbung.de/wordpress/fahnen/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/fahnen.png" name="fahnen" border="0" alt="fahnen"></a>
                <a href="http://www.cottbus-werbung.de/wordpress/merchandising/"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/merchandising.png" name="merchandising" border="0" alt="merchandising"></a></div>


        </div>
    </body>
</html>

Das ist so ziemlich genau das, was du brauchst. Die <script>-Tags von Zeile 8 bis 27 sind wichtig. Auch, dass in der Navigation die <li> den Kategorien entsprechende IDs haben. Die Zuordnung für die <img> in der Bilderreihe selbst erfolgt über das class-Attribut (im Beispielcode nur für die erste Reihe zugewiesen).

Duddle