Frage zu mouseover ("kompliziert")

N

Nova Sentinel

Grünschnabel
Hi,

Ich weiß bereits wie man einenmouseover Effekt bewirkt.....
Das hab ich bei http://www.drweb.de gefunden:

<a href="http://www.drweb.de/trickkiste/tricks48.shtml" onMouseOver="image.src='images/bild1.jpg';" onMouseOut="image.src='images/bild2.jpg';">
<img name="image" src="images/bild2.jpg" border="0" ></a>

So nun habe ich folgendes Problem:

Ich hab mir eine Navigationsleiste gemacht, die, wie ich glaube, nicht schlecht aussieht.

Ich wollte die "Tasten" bei einem drübergehen eindrücken lassen. Das geht mit dem oben stehenden Code leicht.

1.Frage:
Wie kann ich das so machen, dass wenn ich nun draufklicke es "gedrückt" bleibt?

Wenn ich nun auf die nächste Taste klicke soll die vorherige Taste wieder "normal" werden und die ausgewählte dafür "gedrückt" sein.
und so weiter...
Ich hoffe ich kann das einigermaßen gut erklären.....

2.Frage:
Nun steigern wir die Schwierigkeit ein wenig (aus meiner Sicht, evtl ist es ja ganz leicht und ich zu dumm)!

OK. Ich hab dafür 2 Bilder ins Netz hochgeladen, damit Ihr es euch genauer anschauen könnt, für den Fall das ich es nicht genug erläutern kann.

normal.jpg

So ist es normal, also "ungedrückt"

over.jpg

Und so wenn es "gedrückt" ist.

Ich habe das Problem mit dem roten Kreis markiert.
Ich habe eine Schräge als Abtrennung für die einzelnen Elemente gewählt, weil es meines erachtens einfach schöner aussieht.

Da diese "Schräge" nun aber in beiden Bildteilen vorkommt muss ich nun also per mouseover, bzw Javascript, diesen Übergang und das vorhergehende Bild nutzen.
Ich habe also vor es folgendermaßen zu teilen:

Anfang Leiste | Schräge | erstes Mittelstück | 2te Schräge | 2tes Mittelstück | ...

Diese Schräge ist also Teil beider Bilder.
Um es für beide verfügbar zu machen, muss es also ein eigenständiges Bild sein, da Tabellen ja immer nur senkrecht oder horizontal sind. Bei einem mouseover muss sich also sowohl "Anfang Leiste" als auch "Schräge" verändern, und beim anklicken müssen beide "gedrückt" sein.
Selbes gilt für "Schräge" und "erstes Mittelstück", "2te Schräge" und "2tes Mittelstück", und so weiter...

Ich habe bis jetzt noch nichts im Internet gefunden was das ermöglichen könnte.
Deswegen wende ich mich an Euch.
Ich hoffe das es möglich ist, denn sonst müsste ich mir wieder was anderes ausdenken.

Schon mal ein "Danke!" für Eure (eventuellen) Bemühungen!

Nova S.

[Ach herje.....bei der Besschreibung blicke ich ja kaum durch, ich hoffe Ihr kommt damit klar!]
 
Hallo,

ich weis genau was du meinst, habs auch schon angefangen eins zu schreiben. Dabei ist mir aber ein Fehler in der Theorie aufgefallen. Und zwar brauchst du nicht jeweils ein "Mittelstück", sondern zwei. Eines falls der Linke Button gerückt wurde, une eins falls der Rechte gedrückt wurde. Das macht das ganze ziemlich komplex. Eigentlich brauchst du für jedes Zwischenstück sogar 3 Grafiken! Denn wie sieht es aus wenn du einen gedrückt hast - der somit down ist, und dann fährst du über einen Benachbarten?

Ok, Vorschlag: Du machst mir follgende Grafiken (schön zugeschnitten bitteschön ;) )

01) "Gerade"-up
02) "Gerade"-down
03) "Linkes-Ende"-up
04) "Linkes-Ende"-down
05) "Rechtes-Ende"-up
06) "Rechtes-Ende"-down
07) "Schräge-Rechts"-up
08) "Schräge-Rechts"-down
09) "Schräge-Links"-up
10) "Schräge-Links"-down
11) "Doppel-Schräge"-up
12) "Doppel-Schräge"-down

und hängst sie gezippt ans Posting, und ich versuche mich am Menü, der Plan steht ja schon...

Ok, dann gute N8

ciao
 
Hier die Bilder

Ok......
also hier sind die Bilder, aber wehe du nutzt das für deine eigenen Homepage ;) :p

Ich bin in 40-50min in Ingolstadt :-)
 

Anhänge

Hi,

suche ebenfalls ein Script, bei dem die MouseOver Grafik erhalten bleibt, bis man den nächsten Link anklickt.

Meine Navigation ist registermässig aufgebaut, d.h. ich brauche nur 2 Bilder - onmouseover und onmouseout.

So soll es ausschauen:
menusample.gif


Das ist der jetzige Code:
<a href="home.html" target="home"
onmouseover="img1.src='Graphics/menu1.gif'"
onmouseout="img1.src='Graphics/menu1out.gif'"><img
src="Graphics/menu1.gif" border="0" width="126" height="14"
name="img1"></a>

und das sind die Bilder:
menu1.gif

menu1out.gif


Wie stelle ich es also an, das die MouseOver Grafik solange "aktiv" bleibt, bis der nächste Link angeklickt wird (und dabei der Code auch noch schön klein und übersichtlich bleibt)?

Ich bin für jede Hilfe dankbar.
Jenny
 
Hallo Jenny und welcome on Board,

2 Sahen:

1) Hast du evtl die HTML Datei (+pix) für mich, wenn ja -> Anhang...
2) Wenn du erst bei OnClick die Grafik wechseln willst, dann lass doch einfach den "OnMouseOver" raus und wechsel die Grafik nur bei OnClick - simuliert imo auch besser das "Windows Feeling"... Oder hab ich das jetzt verplant?

ciao


//@ Nova -> you got PM
 
Hi Crono,

zu 1: Zip-Datei hängt an. Da es sich um ein Frameset handelt, sind noch ein paar mehr Dateien dabei. Die entscheidene Datei ist die menu1.html. Außerdem ist mittlerweile noch ein anderes Script zum wechseln zweier Frames in der menu1.html gespeichert (das läüft!).

zu 2: An onclick hatte ich auch schon gedacht, hatte da auch ein Script zu, aber die beiden Scripte kamen sich in die Quere, sprich es klappte nicht.

Der Hover Effekt kann ruhig fehlen, aber die Grafik des aktuellen Registerreiters soll im Vordergrund sein, bis der nächste Link angeklickt wird. Und es muss sich mit dem anderen Script vertragen.

Danke schon mal für deine Hilfe,
Gruss,
Jenny
 

Anhänge

Also, ich hab mir die Freiheit genommen, das Javascript etwas anzupassen. Das wichtigste - du brauchst nicht für jeden Link einen neue Funktion (sehr beliebter Anfängerfehler)... Schaus dir einfach mal an, sollte Klärungsbedarf sein - einfach fragen.


bye
Andreas
 

Anhänge

Hi Andreas,

erstmal danke für die Hilfe. Im großen und ganzen verstehe ich das verbesserte Script zwar (ich muss noch ein bisschen nachlesen, ich bin halt Anfänger), ich weiss aber nicht wie ich es anpassen soll.

Daher meine Frage: Das Script geht von menu1.gif und menu1out.gif aus. Wenn ich aber die Registereiter beschrifte, habe ich im Endeffekt 14 Bilder, und zwar menu1-7.gif und menu1-7out.gif.

Bei der menuline hast du das Script so umgeschrieben, das automatisch durchgezählt wird. Im Dateinamen der Bilder verändert sich ja auch jeweils nur die Zahl. Wie geht das für die Bilder?


Ich hänge das Zip Archiv mit allen Bildern an.

Danke,
Jenny
 

Anhänge

Hallo,
nur ganz schnell, muss zur Matrix Vorpremiere :)... Ändere den Oberern Teil in follgendes:

PHP: 
function start(cat)
{
    var anzahl_images = 7; //Anzahl der Menüpunkte
    for(var x=0; x<anzahl_images; x++)
    {
         document.images[x].src = "Graphics/menu"+(x+1)+"out.gif";
    }
    document.images[cat-1].src = "Graphics/menu"+cat+".gif";
    parent.menuline.location = "menuline"+cat+".html";

ciao
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück