Hi, hätte wer Zeit mit folgendes zu programmieren:
Ich brauche ein Script oder eine Site wo es sowas gibt:
Also man hat 3 Links
zum beispiel
Krankenhäuser
Bürogebäude
Privatgebäude
Und jetzt soll das neben einander sein, und links daneben
ist eine Grafik die sich immer in die Richtung dreht.
geht das? Oder soll ich was Zeichnen so wie es ausschauen soll?
Danke im Voraus
Das geht am einfachsten, wenn man 3 Grafiken hat, die ausgetauscht werden 
<div>
<img class='left' src='no_hover.png' id='dreh_dich' />
<ul class='right'>
<li onmouseover="img('first.png')" onmouseout="img('no_hover.png')" />
<!-- noch mehr -->
</ul>
</div>und der JS:
function img(new_src)
{
document.dreh_dich.src=new_src;
}Tja, ich bin mir nicht sicher, ob ich das Problem richtig
verstanden habe, also folgendes sorgt dafür, daß Bild und
Verweise nebeneinander sind (als XHTML):
<img … /><a …>Krankenhäuser<a …>Bürogebäude<a …>Privatgebäude
Soll sich die Graphik wirklich selbst drehen oder nur das in der
Graphik Dargestellte? Ersteres wäre dann eher SVG. Letzteres
vielleicht auch, da gibt es aber diverse Möglichkeiten mit jeweils
spezifischen Vor- und Nachteilen.
Und in welche Richtung soll sich das drehen, wenn alles
nebeneinander steht?
Eine Zeichnung oder eine SVG-Animation wäre da ganz
hilfreich, letzteres vermutlich auch schon die Antwort auf die
Frage, womit man das machen kann und damit auch implizit
darauf, ob das geht - ja es geht, ohne Skript, auch ohne
Pixelgraphik, recht einfach mit einem Texteditor sogar …
So, habs jetzt schnell mal gezeichnet
also links der gelbe pfeil dreht sich immer zu der Schrit auf dem die Maus ist.
Aha, also die Wörter stehen untereinander, das Bild daneben.
Sofern es nur jeweils eine diskrete Drehung sein soll,
kann man auch mit CSS lösen, mit wenigen Tricks,
irgendwie sowas:
XHTML:
<ul class="nav">
<li class="navli"><a ...>Krankenhäuser</a><img class="pfeil" src="pfeilKrank.png" alt="" /></li>
<li class="navli"><a ...>Bürogebäude</a><img class="pfeil" src="pfeilBureau.png" alt="" /></li>
<li class="navli"><a ...>Privatgebäude</a><img class="pfeil" src="pfeilPrivat.png" alt="" /></li>
</ul>
CSS:
ul.nav
{list-style: none inside; margin: 0; padding: 0;
position: relative; left: 150px; top: 0px; min-height: 100px}
ul.nav li.navli
{list-style: none inside; margin: 0; padding: 0}
ul.nav li.navli img.pfeil
{position: absolute; left: -150px; top: 0px; display: none}
ul.nav li.navli:hover img.pfeil
{display: block}
Ist ungetestet und man kann da einige Variationen finden,
die Bilder auch als Hintergrundgraphik mit CSS angeben. Das
Prinzip ist aber immer ähnlich.
Jedenfalls verwendet man je img ein Bild mit dem passenden
Pfeil. Angenommen ist hier eine Bildgröße von maximal 150px
mal 100px, muß man gegebenenfalls anpassen.
Ungelöst ist dabei das Problem, welches auftritt, wenn sich der
Pfeil wirklich aus der anfänglichen Position zur aktuellen
kontinuierlich drehen soll, das ist eine interessante Anwendung
von Animationen (etwa to-animate in SVG, müßte man dann
wohl alles mit SVG machen, nicht alle browser können aber
in den aktuellen Versionen animiertes SVG darstellen).
