Ich weiß, das Thema wurde schon hundertmal durchgekaut, eine befriedigende Lösung habe ich trotzdem nicht gefunden.

Ich habe so gut wie keine Ahnung von Java Script aber die Sache dürfte eigentlich nicht so schwer sein.

Ich möchte ein Menü erstellen mit 3 verschiedenen Grafiken: ein Button_normal, ein Button_mouseover, und ein Button_aktiv. Das Button soll bei anklicken so lange auf aktiv bleiben, bis man im Menü auf ein anderes Button klickt. Wie kann man das am einfachsten realisieren?

Danke für Antworten

Kastalonien

Was war denn an den 100 bisherigen Lösungen unbefriedigend?

Egal...Skript#101

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<script type="text/javascript"> <!-- clicked=false; function btn_init() {   pattern=/(normal|hover|active)\./i;   btns = document.getElementsByName('btn');   for(b=0;b<btns.length;++b)     {       btns[b].onmouseover=function()         {           if(clicked!=this)             {               this.src=this.src.replace(pattern,'hover.');             }         }       btns[b].onmouseout=function()         {           if(clicked!=this)             {               this.src=this.src.replace(pattern,'normal.');             }         }       btns[b].onclick=function()         {               if(clicked)                 {                   clicked.src = clicked.src.replace(pattern,'normal.');                 }               this.src=this.src.replace(pattern,'active.');               clicked=this;         }     } } window.onload = btn_init; //--> </script>

Was du ansonsten noch tun musst:
Gebe allen Buttons den Namen "btn".

Die Benennung der Grafiken muss nach folgendem Schema erfolgen:
dateiname_normal.gif
dateiname_hover.gif
dateiname_active.gif

(kann natürlich auch jpg oder png sein).

Das wars schon.... Test

Schonmal vielen dank für deine hilfe, alle anderen scripte haben bei mir nicht funktioniert oder nur beim mouseover oder nur bei active...

habe jetzt nur noch ein Problem: Das Laden der Grafiken dauert beim mouseover und beim active Status zu lange...wie kann ich in das Script jetzt noch ne funktion einbauen, das er die Grafiken schon preloaded ?

Danke für Hilfe

Kastalonien

Die Suche nach dem Begriff Preloader sollte in diesem Forum eine quasi unglaubliche Anzahl an Threads liefern.

Beispielsweise so:

Code :

1 2 3 4 5 6 7

// Image-Preloader image1 = new Image(); image1.src = "dateiname_normal.gif"; image2 = new Image(); image2.src = "dateiname_hover.gif"; image3 = new Image(); image3.src = "dateiname_active.gif";

Mit:

image1 = new Image();
image1.src = "dateiname_normal.gif";

hab' ich's ja probiert, geht aber nicht...

Heißen die Grafiken auch dateiname_... und handelt es sich hierbei um GIF-Grafiken?

Stimmt der Verzeichnispfad zu den Grafiken?

die heißen "Dateiname_", sind aber jpgs...verzeichnispfad stimmt auch...

Na bitte, da haben wir doch die Fehlerquellen entdeckt

Code :

1 2 3

image1 = new Image(); image1.src = "[b]D[/b]ateiname_normal.[b]jpg[/b]"; // usw.

das heißt, es müssen auf jeden Fall GIF-Dateien sein? JPGs gehen nicht?

Das Grafikformat spielt hierbei keine Rolle, wichtig ist, daß im Scriptcode auch das verwendete Format genannt wird.

Ebenso ist die Groß- und Kleinschreibung bei Dateinamen zu berücksichtigen.

Vergleiche hierzu nochmal mein letztes Code-Beispiel mit deiner Aussage:

die heißen "Dateiname_", sind aber jpgs [...]

Ich hab' jetzt alles ausprobiert und hab' keine Ahnung wo der Fehler ist

Hier mein Code:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87

<script type="text/javascript">   <!--   if (document.images){   button_news_link = new Image(); button_news_link.scr = "../grafix/buttom/buttom_news_link.jpg"; button_news_link = new Image(); button_news_link.scr = "../grafix/buttom/buttom_news_mouseover.jpg"; button_news_link = new Image(); button_news_link.scr = "../grafix/buttom/buttom_news_acitve.jpg";   button_cd_link = new Image(); button_cd_link.scr = "../grafix/buttom/buttom_cd_link.jpg"; button_cd_mouseover = new Image(); button_cd_mouseover.scr = "../grafix/buttom/buttom_cd_mouseover.jpg"; button_cd_active = new Image(); button_cd_active.scr = "../grafix/buttom/buttom_cd_acitve.jpg";   button_artists_link = new Image(); button_artists_link.scr = "../grafix/buttom/buttom_artists_link.jpg"; button_artists_mouseover = new Image(); button_artists_mouseover.scr = "../grafix/buttom/buttom_artists_mouseover.jpg"; button_artists_active = new Image(); button_artists_active.scr = "../grafix/buttom/buttom_artists_acitve.jpg";   button_reviews_link = new Image(); button_reviews_link.scr = "../grafix/buttom/buttom_reviews_link.jpg"; button_reviews_mouseover = new Image(); button_reviews_mouseover.scr = "../grafix/buttom/buttom_reviews_mouseover.jpg"; button_reviews_active = new Image(); button_reviews_active.scr = "../grafix/buttom/buttom_reviews_acitve.jpg";   button_distribution_link = new Image(); button_distribution_link.scr = "../grafix/buttom/buttom_distribution_link.jpg"; button_distribution_mouseover = new Image(); button_distribution_mouseover.scr = "../grafix/buttom/buttom_distribution_mouseover.jpg"; button_distribution = new Image(); button_distribution_active.scr = "../grafix/buttom/buttom_distribution_acitve.jpg";   button_contact_link = new Image(); button_contact_link.scr = "../grafix/buttom/buttom_contact_link.jpg"; button_contact_mouseover = new Image(); button_contact_mouseover.scr = "../grafix/buttom/buttom_contact_mouseover.jpg"; button_contact_active = new Image(); button_contact_active.scr = "../grafix/buttom/buttom_contact_acitve.jpg"; }   clicked=false; function btn_init() {   pattern=/(link|mouseover|active)\./i;   btns = document.getElementsByName('btn');   for(b=0;b<btns.length;++b)     {       btns[b].onmouseover=function()         {           if(clicked!=this)             {               this.src=this.src.replace(pattern,'mouseover.');             }         }       btns[b].onmouseout=function()         {           if(clicked!=this)             {               this.src=this.src.replace(pattern,'link.');             }         }       btns[b].onclick=function()         {               if(clicked)                 {                   clicked.src = clicked.src.replace(pattern,'link.');                 }               this.src=this.src.replace(pattern,'active.');               clicked=this;         }     } } window.onload = btn_init;     //-->   </script>

Wo ist mein Fehler?

Code :

1	button_news_link.[B]scr[/B]

Mache mal überall aus dem "scr" ein "src"


Und "acitve" sollte besser active heissen.

Und korrigiere mal diese Blöcke:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14

button_news_link = new Image(); button_news_link.scr = "../grafix/buttom/buttom_news_link.jpg"; button_news_[color=red]link[/color] = new Image(); button_news_[color=red]link[/color].scr = "../grafix/buttom/buttom_news_mouseover.jpg"; button_news_[color=red]link[/color]= new Image(); button_news_[color=red]link[/color].scr = "../grafix/buttom/buttom_news_acitve.jpg";     button_distribution_link = new Image(); button_distribution_link.scr = "../grafix/buttom/buttom_distribution_link.jpg"; button_distribution_mouseover = new Image(); button_distribution_mouseover.scr = "../grafix/buttom/buttom_distribution_mouseover.jpg"; button_distribution[color=red]...[/color] = new Image(); button_distribution_active.scr = "../grafix/buttom/buttom_distribution_acitve.jpg";

Danke für den Tip... ....ich und meine Schusseligkeit...

Der Witz ist bloß, dass es trotzdem nicht funktioniert....

// edit

hab' den Fehler selber gefunden

Setze die Preload Funktion einfach unter die HoverActive Funktion, keine Ahnung warum, aber dann geht's jeden Falls...

Vielen Dank für eure Hilfe...