komplizierte Navigation ... Kann einer helfen?

[Ramona]

Hallo, ich habe eine prima Idee für meine Navigation, allerdings fehlt es mir daran das in die Praxis umzusetzen ...

Ich habe so eine Art Fachbegriff-Lexikon rund um den Film in Arbeit.
Es geht mir jetzt darum einen Scheinwerfer unter einen Halbkreis von Bustaben (A-Z) zu platzieren, der dann immer der Maus folgt, aber nur in der Richtung, er soll seine Position halten.

Es werden dann praktisch die Bustaben angeleuchtet über die ich mit der Maus fahre ...

Hoffe dass man so einigermaßen versteht was ich meine und mir vieleicht jemand helfen kann ...

[Maniac]

Hallo Ramona,

es scheint mir eine sehr aufwändige, jedoch die am einfachsten zu realisierende Möglichkeit zu sein, wenn Du den Scheinwerfer in den 26 verschiedenen Positionen jeweils als eigenes Bild abspeicherst und dann per OnMouseOver jeweils dem entsprechenden Buchstaben zuordnest.

Gruß, Maniac

[Ramona]

Habe ich auch schon dran gedacht, aber dazu reicht der Platz nicht ...

Gibt es nicht irgend ein Script dass eine Grafik die Richtung wechseln lässt, dass der Scheinwerfer praktisch immer dem Cursor hinterher leuchtet?

[Utz]

Hallo Ramona,

Habe ich auch schon dran gedacht, aber dazu reicht der Platz nicht ...

Was meinst Du mit "reicht der Platz nicht"? Den Plattenplatz auf dem Server? Der sollte wohl auf alle Fälle reichen. Oder den Platz auf der Seite? Auch der muss auf alle Reiche reichen, sonst _kann_ das ja gar nicht funktionieren - in dem Fall würd ich von einem quadratischen Ausgangsbild ausgehen.

Gibt es nicht irgend ein Script dass eine Grafik die Richtung wechseln lässt, dass der Scheinwerfer praktisch immer dem Cursor hinterher leuchtet?

Ne, Bilder sind immer so wie sind sind auf der Seite[1].

Grüße,

Utz

[1] War das jetzt CSS3 oder tatsächlich schon 2, wo zumindest Spiegeln möglich wäre, aber noch kein Browser kann es?

[Ramona]

Zu den Seiten hin wird es eng (Mainframe) ...

Ich habe ein Script, in dem man mehrere Sichtweisen eines Bildes erstellt, abspeichert und dann die Position errechnet wird und dementsprechnd das Bild gewählt wird ...

Also pragtisch eine Grafik die dem Cursor folgt und dabei die Bilder/ Sichtweisen ändert. Könnte man das nicht so umschreiben dass die Grafik nicht dem Cursor folgt sondern die Position hält aber die Sichtweisen ändert?

[Utz]

Hallo,

Also pragtisch eine Grafik die dem Cursor folgt und dabei die Bilder/ Sichtweisen ändert. Könnte man das nicht so umschreiben dass die Grafik nicht dem Cursor folgt sondern die Position hält aber die Sichtweisen ändert?

Das war exakt das, was Maniac Dir vorschlug zu tun, woraufhin Du meintest, dafür reiche der Platz nicht aus.

Grüße,

Utz

[Ramona]

hier einfach mal das script was ich habe:

var Ver4=parseInt(navigator.appVersion.charAt(0))>=4
var IE=navigator.appName.indexOf("Microsoft")!=-1
var al, imagesrc, ex=-32, ey=-32, x0=-32, y0=-32

function BewegeSkate()
{ // Neue Position des Skate berechnen
  if (Math.abs(ex-x0)>=10) { x0+=Math.floor((ex-x0)*0.1) }
  else if (ex!=x0) { x0+=Math.abs(ex-x0)/(ex-x0) }
  if (Math.abs(ey-y0)>=10) { y0+=Math.floor((ey-y0)*0.1) }
  else if (ey!=y0) { y0+=Math.abs(ey-y0)/(ey-y0) }

// entsprechende Grafik in Bezug zur Maus-Position waehlen
  imagesrc=""
  if ( (ex<x0) && ( (x0-ex) > Math.abs(y0-ey)/2 ) )
  { imagesrc="skate-l.gif"
    if ( (x0-ex) < Math.abs(y0-ey)*2 )
    { if (ey<y0) imagesrc="skate-lo.gif"
      if (ey>y0) imagesrc="skate-lu.gif"
    }
  }
  if ( (ex>x0) && ( (ex-x0) > Math.abs(y0-ey)/2) )
  { imagesrc="skate-r.gif"
    if ( (ex-x0) < Math.abs(y0-ey)*2 )
    { if (ey<y0) imagesrc="skate-ro.gif"
      if (ey>y0) imagesrc="skate-ru.gif"
    }
  }
  if (imagesrc=="")
  { if (ey<y0) imagesrc="skate-o.gif"
    if (ey>y0) imagesrc="skate-u.gif"
    if ((ex==x0)&&(ey==y0)) imagesrc="skate.gif"
  }

// Grafik und Position setzen
  if (Ver4)
  { if (!IE)
    { document.SkateLayer.document.images.skate.src=imagesrc }
    else document.all.SkateLayer.document.images.skate.src=imagesrc
  }
  al.left=x0-32
  al.top=y0

setTimeout("BewegeSkate();",100)
}

function MeinMausEvent(e)
{ // Position des Maus-Cursors ermitteln
  if (Ver4)
  { if (!IE)
    { ex=e.pageX
      ey=e.pageY }
    else
    { ex=event.clientX + document.body.scrollLeft
      ey=event.clientY + document.body.scrollTop }
  }
}

function ScriptSetup()
{ // Alle Skate-Grafiken laden
  isIm = (document.images) ? 1 : 0
  if (isIm)
  { arImLoad = new Array
    ('skate','skate-u','skate-o','skate-l','skate-r',
     'skate-lu','skate-lo','skate-ru','skate-ro')
    arImList = new Array ()
    for (counter in arImLoad)
    { arImList[counter] = new Image()
      arImList[counter].src = arImLoad[counter] + '.gif'
    }
  }

// Globale Variablen setzen und Maus-Event initialisieren
  if (Ver4)
  { if (!IE)
    { al=document.SkateLayer
      document.captureEvents(Event.MOUSEMOVE)
    }
    else
    { al=document.all.SkateLayer.style }
    document.onmousemove = MeinMausEvent
    BewegeSkate()
  }
}

function Copyright()
{ window.focus()
  alert("Hast du ´n Plan? Nee? www.hastnplan.de !") }

function ZeigeSkate()
{ // Setzen der Block-Level Container zur Anzeige der Grafiken
  if(Ver4)
  { s ='<DIV STYLE="visibility:hidden"></DIV>'
    s+='<DIV ID="SkateLayer" STYLE="position:absolute; '
    s+='top:-32; left:-32; width:32; height:32">'
    s+='<A HREF="javascript:Copyright();">'
    s+='<IMG NAME="skate" SRC="skate.gif" border=0>'
    s+='</A></DIV>'
    document.writeln(s)
  }
}

window.onload = ScriptSetup
ZeigeSkate()

So sieht es zur Zeit aus, aber es folgt wie gesagt dem Cursor, wenn man das so umschreiben könnte dass die Grafik praktisch eine Position hat und hält würde es schon fast klappen ...

[Odium]

Hallo,

wenn du schon ein script hast das dies kann, brauchst du ja nur noch den positionsteil entfernen...

Odium

[Maniac]

Zu den Seiten hin wird es eng (Mainframe) ...

iiih *scnr*

Ich habe ein Script, in dem man mehrere Sichtweisen eines Bildes erstellt, abspeichert und dann die Position errechnet wird und dementsprechnd das Bild gewählt wird ...

Das klingt ja fast nach meinem Vorschlag...

Also pragtisch eine Grafik die dem Cursor folgt und dabei die Bilder/ Sichtweisen ändert. Könnte man das nicht so umschreiben dass die Grafik nicht dem Cursor folgt sondern die Position hält aber die Sichtweisen ändert?

Ja das könnte man bestimmt. Den "Positionsteil" entfernen. Aber dafür bräuchte man immernoch viele verschiedene "Sichtweisen"-Grafiken. Und das willst Du anscheinend vermeiden.

Wenn Du nach einer Methode suchst, um ein Bild um x Grad zu rotieren, so gibt es diese meines (allerdings noch recht beschränkten) Wissens nicht.

Gruß, Maniac

[Ramona]

Die einzelnen Grafiken (26) kann ich erstellen, kein Problem, das wäre es dann nur das Script dementsprechend umzuschreiben ...

Theoretisch müßte ich die dementsprechende Zeile kopieren (um auf die 26 zu kommen) und die Werte anzupassen, oder?

[Maniac]

So, wie ich es mir vorgestellt habe, brauchst Du eigentlich gar nicht so ein umfangreiches Script.

Erstelle Dir mit einem Grafikprogramm die nötigen Grafiken - und zwar inklusive des Buchstabenhalbkreises. Das sieht nämlich dann auch besser aus, wenn der Buchstabe, der vom Scheinwerfer beleuchtet wird, auch tatsächlich "angestrahlt" aussieht. Mir fällt dabei übrigens ein, daß Du dann 27 Grafiken benötigst, denn wenn Du gerade mal nicht aktiv auf einen der Buchstaben zeigst, sollte wohl auch keiner beleuchtet werden (Scheinwerfer aus?!).

Sobald Du die Grafiken alle hast (probeweise kann man ja auch mal mit drei bis vier anfangen...), mach Dir einfach ne imagemap mit den entsprechenden links und OnMouseOver/OnMouseOut. Das dürfte wirklich die einfachste Lösung sein (glaub' ich zumindest).

Gruß, Maniac

[Ramona]

Aber dann müßte der Scheinwerfer ziemlich schrumpfen ... habe zwischen den einzelnen Bustaben meist nur ca. 3-5 mm Platz

Oder wie meinst du das?

[Utz]

Hallo,

Aber dann müßte der Scheinwerfer ziemlich schrumpfen ... habe zwischen den einzelnen Bustaben meist nur ca. 3-5 mm Platz

Nö, müsste nicht - es müsste eh jeweils ein "großes" inkl. Scheinwerfer und aller Buchstaben sein, der Scheinwerfer selber kann also im Prinzip beliebig groß sein, lediglich der Scheinwerferstrahl darf halt nicht so breit sein, dass er mehr als einen Buchstaben trifft *g*

PS: Dein Script von [pref:t=35732&m=195117] ist dafür tatsächlich nicht zu gebrauchen, das ist ne komplett andere Baustelle.

Grüße,

Utz

[Ramona]

Eine große Grafik?

Komme nicht ganz mit ...
Wie kann ich mit einer Grafik 26 bzw. 27 Mouseover machen?

[Utz]

Hallo,

Wie kann ich mit einer Grafik 26 bzw. 27 Mouseover machen?

Wie Maniac schon weiter oben sagte: Definiere die Grafik als Imagemap und lege die Mouseovers auf die einzelnen Hotspots.

Grüße,

Utz

[Maniac]

Wie Maniac schon weiter oben sagte: Definiere die Grafik als Imagemap und lege die Mouseovers auf die einzelnen Hotspots.

Anm. d. Maniac:
1. http://selfhtml.teamone.de/html/grafiken/verweis_sensitive.htm
2. http://selfhtml.teamone.de/javascript/sprache/eventhandler.htm#onmouseover
3. http://selfhtml.teamone.de/javascript/sprache/eventhandler.htm#onmouseout

[Ramona]

Na dann werde ich es einfach mal so probieren, ersteinmal vielen Dank!

Melde mich ob es geklappt hat oder nicht ...

[Maniac]

Aber dann müßte der Scheinwerfer ziemlich schrumpfen ... habe zwischen den einzelnen Bustaben meist nur ca. 3-5 mm Platz

Hast Du die 3-5 mm auf Deinem Bildschirm abgemessen?! Und ob der Scheinwerfer dann "schrumpfen" müsste, kann ich Dir nur sagen, wenn ich weiß, wie groß er jetzt ist. Vielleicht müsste ja auch der Halbkreis größer werden?! Hast Du möglicherweise einen Link, auf dem man sich so etwas mal anschauen könnte? (Mir fällt es schwer, mir das von Dir beabsichtigte Ergebnis momentan vorzustellen...)

Gruß, Maniac

[Ramona]

Nein, nicht abgemessen ... schätzungsweise 3 - 5 mm

Habe nicht wirklich ein Beispiel, du könntest höchstens kurz hier gucken http://www.stonepictureproduction.de/

Unter Lexikon, da kommt praktisch dann das hin was ich jetzt mache ... (Mometan gehts da allg. um Computer/ Web)

Da siehst du diesen Halbkreis aus Bustaben, bloß dass es bei mir genau umgekehrt ist (die Beule geht nach oben) und der Scheinwerfer soll mittig darunter ...

[Ben]

Hallo Ramona,

ich würde dir da zu Flash oder Swish (billige Alternative) raten. Das Problem ist natürlich, dass Leute ohne Flash keine Navigation sehen und du wohl noch eine Alternative anbieten müsstest.

Mit Flash wäre es wohl aber per Masken usw. kein Problem.

Viele Grüße
Ben

[Ramona]

Ich denke das wäre kein Problem, ich könnte ja einen Flah-Player
zum Download anbieten, allerdings hab ich relativ wenig Ahnung
von Flash ... gibt es dazu irgendwo eine Online-Anleitung?

[Ben]

Hallo Ramona,

auf http://www.tutorialzone.de/index.php?s=4ac11405d6f93be98aa149cbe4db7db3&section=tutorials&action=show&kategorie=3&subkategorie=08 gibt es auf jeden Fall Tutorials zur Mauszeigerverfolgung mit Flash. Und was über Masken findest du dort sicher auch (habe jetzt nicht so lange geschaut).

Viel Erfolg! :-)

Viele Grüße
Ben

PS: Nur den Player zum Download anbieten halte ich nicht für gut. Ich glaube, man kann überprüfen, ob Flash installiert ist und sollte dem Benutzer den Download höchstens anbieten, aber auch eine "effektlose" Navigation bereitstellen. Es gibt nämlich einige Leute, die kein Flash installieren möchten.

[Ramona]

Vielen Dank!
Mache mich dann mal schlau ...

[Ben]

Tu das,

wenn du irgendwo hängst, frag einfach wieder hier nach. Zwar bin auch nicht kein Flash-Könner (eher Anfänger), aber mit Hilfe einiger hier klappt das schon! :-)

Viele Grüße
Ben

[Ben]

Zwar bin auch nicht kein Flash-Könner...

<?php

$meinposting = str_replace("nicht","ich",$meinposting);

echo $meinposting;

?>

Wie peinlich... hoffentlich hat es keiner bemerkt! ;-)

Viele Grüße
Ben

[Ramona]

??? Was war das (kenne mich mit PHP überhaupt nicht aus)

Werde mich gern wieder an diese Forum wenden, wenn ich Probleme habe, habe mir eben ersteinmal ein paar flash-kurse abgespeichert und werde es mir nach feierabend zu gemüte führen ...

[Ben]

Hi Ramona,

keine Sorge, das hieß nur, dass in diesem Satz das nicht durch ein ich ausgetauscht werden sollte, weil er so total falsch war:

Zwar bin auch nicht kein Flash-Könner...

War etwas wie ein PHP-Insider (ziemlich billig ok, ich gebe es zu)...

Viele Grüße
Ben

[Alexander Foken]

Moin Moin !

PS: Nur den Player zum Download anbieten halte ich nicht für gut. Ich glaube, man kann überprüfen, ob Flash installiert ist und sollte dem Benutzer den Download höchstens anbieten, aber auch eine "effektlose" Navigation bereitstellen. Es gibt nämlich einige Leute, die kein Flash installieren möchten.

Ich auch nicht. Es soll durchaus Plattformen (=Betriebssysteme) geben, für die kein Flash-Player verfügbar ist.

Wenn es der Optik wegen Flash sein soll, muß eine alternative Navigation her, die ohne Flash auskommt.

Alexander