[ERLEDIGT] Bei Mouseover von Bild anderem Element Klasse zuweisen

[ldb]

Hallo liebe HTML-ler, JavaScriptler etc.!
Ich melde mich nach längerer Zeit mal wieder, weil ich ein Problem habe:
Ich habe mir eine Startseite für eine Homepage kreiert, die sowohl eine Navigation durch Bilder wie auch durch Text hat, aber vomn den Menüpunkten her identisch ist. Wenn man über eines der Bilder fährt, sollte deshalb der entsprechende Menüpunkt in der Textnavigation hervorgehoben werden. Das möchte ich logischerweise mit CSS machen, also wäre das eigentliche Ziel, bei einem mouseover von einem der Bilder dem entsprechenden Text-Menüpunkt eine Klasse namens "aktiv" zuzuweisen. Diese Klasse wird in meinem CSS angesprochen und ist für das Vorherheben des Menüpunkts zuständig. Wenn ihr Mühe habt, euch vorzustellen, wie das Ganze ungefähr aussehen sollte, geht am besten auf die Seite
Thomas Finn - Startseite und fahrt über die Bilder. Die entsprechenden Menüpunkte werden oben hervorgehoben.

Meine Seite findet ihr unter
Nöis vom Lukas Bieri

Ich möchte noch anmerken, dass ich wirklich extrem wenig von JavaScript verstehe, deshalb wäre ich froh um eine möglichst einfache Lösung :)

Ich danke euch allen im Vorraus ganz herzlich!

Liebe Grüsse,
Lukas

P.S: Das Design ist noch nicht fertig, die Bilder in den Rahmen sind auch nur Platzhalter...

 

[Cheffchen]

Hallo,

das ist einfach eine javascript funktion.
schau dir einfach mal den quellcode an.
Mit jquery dürfte das halbwegs machbar sein und auch überschaubar.
ein funktion die per hover ansprichtst und dann ist gut.
am einfachsten gibst jedes paar ein gleiche classe die kannst dann per jquery am einfachsten snprechen

der Link könnte dann so sein

onmouseover="hover('classHome')"

jetzt mit der funktin hover das classHome abfangen und alle Links mit der classe classHome ein aktiv classe geben.
beim verlasen löscht einfach die aktiv wider.

Das ist das gerüst, fröhliches probieren :O).

Cheffchen

 

[threadi]

Gib den Links im Menü eineindeutige IDs. Dann kannst Du per onmouseover diese direkt ansprechen und die Klasse setzen. Beispiel (als onmouseover-Eventhandler):

<img src="bild.png" alt="" onmouseover="document.getElementById('eineMenuID').className='aktiv';" onmouseout="document.getElementById('eineMenuID').className='';">

Wenn man es ganz modern machen möchte, dann sollte man beim Laden der Seite (Stichwort onload) die Bilder mit den Eventhandlern versehen und hierfür auch noch eine JavaScript-Funktion nutzen. Mit o.g. Code solltest Du aber auch so erstmal einen Einstieg finden.

 

[ldb]

Hallo zusammen, vielen Dank für eure Tipps! Ich habe leider nicht ganz alles verstanden beim Kommentar von Cheffchen, ich werde aber gleich mal den Tipp von threadi ausprobieren! Melde mich bei Problemen einfach nochmal :)
Schönen Abend!
Lukas

 

[Tronjer]

Für so etwas gibt es in jQuery die Funktionen mouseover(), mouseout() und hover().

Beispiel:

// Selector ist ein Menüpunkt
$(selector).hover(
    function() {
        // tu was mit irgend einem Element beim mouseover
    },
    function() {
        // tu was mit irgend einem Element beim mouseout
    }
);

Um nun nicht für jeden Menüpunkt eine extra Funktion zu schreiben, muss man einen logischen Bezug zwischen den Elementen, über die gehovert wird und den auszutauschenden Bildern herstellen. Man könnte z.B. beiden dieselbe CSS-Klasse zuweisen oder das Data-Atribut von HTML verwenden.


Beispiel:

$.each(['home', 'about', 'blog'], function(index, value) {
    $('.' + value).mouseover(function() {
            $('img').hasClass(value).attr('src', 'bild_b.png');
    });
    $('.' + value).mouseout(function() {
            $('img').hasClass(value).attr('src', 'bild_a.png');
    });
})

Das ist jetzt ungetestet und nicht für copy & paste bestimmt, sollte aber das Prinzip verdeutlichen. Nähere Angaben dazu finden sich in der Api Doku von jQuery.

 

[Tronjer]

Gib den Links im Menü eineindeutige IDs. Dann kannst Du per onmouseover diese direkt ansprechen und die Klasse setzen. Beispiel (als onmouseover-Eventhandler):

<img src="bild.png" alt="" onmouseover="document.getElementById('eineMenuID').className='aktiv';" onmouseout="document.getElementById('eineMenuID').className='';">

Wenn man es ganz modern machen möchte, dann sollte man beim Laden der Seite (Stichwort onload) die Bilder mit den Eventhandlern versehen und hierfür auch noch eine JavaScript-Funktion nutzen. Mit o.g. Code solltest Du aber auch so erstmal einen Einstieg finden.

Das ist wahrscheinlich die einfachste Variante, aber kein besonders guter Stil. So wie man bei Webseiten heutzutage auf Tabellenlayout verzichtet, CSS zum Styling einsetzt und kein HTML mittels echo ausgibt, sollte man auch auf strikte Trennung von HTML und JavaScript achten.

 

[ldb]

Hallo Tronjer, vielen Dank für deine Mühe!
Leider bin ich in javaScript noch lange nicht so fit, dass ich davon alles verstehe...
Ich habe mal versucht, threadi's Vorschlag umzusetzen, das hat bei den ersten zwei Menüeinträgen auch geklappt, aber auf einmal werden ale meine Text-menüeinträge verschoben... Und der Validatior gibt mir die mir unklare Fehlermeldung aus:

1. 
   Line 23, Column 131: Duplicate ID gallery.
   …e='aktiv';" onmouseout="document.getElementById('gallery').className=' ';"></a> ✉
2. 
   Line 13, Column 21: The first occurrence of ID gallery was here.
   <li id="gallery"><a href='gallery.html' onfocus="blur()" >Galerie</a></li>
   
   
   Was könnte wohl das Problem sein? Hier ist mein Code:
   
   

   <!DOCTYPE html>
   <html lang="de">
     <head>
       <meta charset="utf-8" />
       <title>N&ouml;is vom Lukas Bieri</title>
       <link rel="stylesheet" href="css/style_main.css" type="text/css" />
     </head>
     <body>
   
       <div id="wrapper">
           <nav>
               <ul id="nav">
                   <li id="gallery" ><a href='gallery.html' onfocus="blur()" >Galerie</a></li>
                   <li id="aboutme" ><a href='about_me.html' onfocus="blur()" >&Uuml;ber mich</a></li>
                   <li><a href='blog.html' onfocus="blur()" >Blog</a></li>
                   <li><a href='search.html' onfocus="blur()" >Suche</a></li>
               </ul>
           </nav>
   
           <div id="bilder" class="clearfix">
   
               <a href="gallery.html" onfocus="blur()"><img id="gallery" src="img/gallery.png" alt="" height="378" width="339" 
   onmouseover="document.getElementById('gallery').className='aktiv';" onmouseout="document.getElementById('gallery').className='';"></a>
               <a href="search.html" onfocus="blur()"><img id="search" src="img/search.png" alt="" height="507" width="237"
   onmouseover="document.getElementById('aboutme').className='aktiv';" onmouseout="document.getElementById('aboutme').className='';"></a>
               <a href="about_me.html" onfocus="blur()"><img id="about_me" src="img/portrait.png" alt="" height="267" width="267" onmouseover="document.getElementById('aboutme').className='aktiv';" onmouseout="document.getElementById('aboutme').className='';"></a>
               <a href="blog.html" onfocus="blur()"><img id="blog" src="img/book_closed.png" alt="" height="705" width="544"></a>
   
           </div>
       </div>
   
   
   
     </body>
   </html>

Ich danke euchschon im Vorraus :)


-----------------
EDIT:
Hat sich erledigt!

 

[ldb]

Ups! Da habe ich eine id doppelt vergeben gehabt *sich-schäm*
Tut mir echt leid, jetzt funktioniert alles wunderbar! Dass der Stil vielleicht nicht besonders gut ist, kann mir in diesem Fall auch egal sein, damit kann ich leben ;)
Vielen, vielenDank an alle, die mir so freundlich und schnell geholfen haben!
Ihr seid die besten :)

Schönen Abend wünscht
Lukas