XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   Button bei onload anders darstellen (http://xhtmlforum.de/showthread.php?t=72245)

macfms 05.08.2015 21:05

Button bei onload anders darstellen
 
Hallo zusammen,

ich möchte gerne meinen ersten Menüpunkt (menu-item1), wenn die Seite geladen ist als grünes Bild darstellen, damit man sieht wo man sich aktuell befindet.

Hab hierzu folgenden Code:

HTML:
<div class="submenu">
<div id="menu-items">
<ul>
<li class="menu-item1"><a href="#stacks_in_20320_page4_panel1"></a></li>
<li class="menu-item2"><a href="#stacks_in_20320_page4_panel2"></a></li>
<li class="menu-item3"><a href="#stacks_in_20320_page4_panel3"></a></li>
<li class="menu-item4"><a href="#stacks_in_20320_page4_panel4"></a></li>
<li class="menu-item5"><a href="#stacks_in_20320_page4_panel5"></a></li>
</ul>
</div>


JS:

document.onload = function (){
document.getElementByid('#menu-items li a menu-item1').style.backgroundImage = "url('%resource(Buttons/Wohnhaus_neues_Gruen.jpg)%')";
}

Leider geht es nicht. Was ist falsch?

protonenbeschleuniger 06.08.2015 08:35

Benutze Bitte die Möglichkeit Code formatiert darzustellen, das erleichtert für Andere deinen Code zu lesen. Danke

Dein JS ist Fantasiecode. Aber warum machst du das nicht einfach mit CSS?
Du musst nur den richtigen Selektor verwenden.

cloned 06.08.2015 09:14

Was möchtest du genau? Wenn du weißt dass es der erste Punkt ist, dann mach doch folgendes:
Code:

<li class="menu-item1 active"> ..... </li>

.active{background-image: url("... " );}

Wozu willst du hier JS verwenden?

macfms 06.08.2015 19:23

Also, ich hab euch hier mal den Link beigefügt.

Ihr seht dort lauter Bilder (mein Untermenü) für die verschiedenen Texte darunter, die ich als Tab's eingefügt hab. Klickt ihr auf eines dieser Bilder und geht mit der Maus wieder weg, wird das Bild grün. Man sieht also wo man gerade ist. Grob gesehen klappt das ja auch schon, aber

1. ich möchte, wenn diese Seite aufgerufen wird, daß gleich das erste Bild grün ist, da der Text dazu ja schon automatisch da steht.

2. Wie ihr bemerkt, wird das Hover nicht deaktiviert, wenn ihr auf eines der Bilder klickt. Somit wird es erst grün, wenn man das Bild mit der Maus verlassen hat. Suboptimal. Am besten wäre es, direkt nach dem Loslassen der Maustaste grün zu werden und für das aktive Bild (Button) die Mouseevents komplett zu deaktivieren, da man ja nichts anklicken muß, was gerade eh aktiv ist.

Mit JS kenn ich mich leider null aus und würde es auch lieber als css machen, aber mir fehlt die zündende Idee.

cloned 07.08.2015 08:51

Wie schon von mir gesagt, du brauchst doch nur die Klasse "selected" zusätzlich zu deinem Menü ausgeben. Was passt denn daran nicht?


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:44 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023