Wie erstellt man sowas?

Hy Liebe Fories

Hab mal wieder ein Problem bei meiner Homepage.

Beim Stammbaum möchte ich gerne, wenn man auf den Namen geht mit dem Mauszeiger, dass dann das betreffende Foto erscheint. Guckst Du hier: Kiba - Pedigree

Habe aber keine Ahnung wie ich dies machen muss, hab auch bei Tante Google nichts gefunden. Arbeite mit einem Mac:D

Hoffe, dass mir irgendwer helfen kann, bin langsam am verzweifeln.

Bitte Bitte:love:

Naja... Wenn du die Seite mit rechts anklickst, kannst du dir den Seitenquelltext - also den geschriebenen html-Code - anschauen. Die haben dafür ein Javascript verwendet:

<script type="text/javascript">
function setChild(which, show) {
var node = which.firstChild;
while (node) {
if (node.nodeType = 3 && node.nodeName.toLowerCase() === 'div') {
node.parentNode.style.zIndex = (show ? '10' : '1');
node.style.display = (show ? 'block' : 'none');
return;
}
node = node.nextSibling;
}
}
</script>

<div class="petigree row1">Wild Hill Forest Kiba</div>

<div class="petigree row2">

<div class="father" onmouseover="setChild(this, true);" onmouseout="setChild(this);">
B.B. Dream Dancer in Heaven<br>Deutschland
<div><img src="photos/petigree/B-B-Dream-Dancer-in-Heaven.jpg" alt="B.B. Dream Dancer in Heaven">B.B. Dream Dancer in Heaven</div>
</div>
<div class="mother" onmouseover="setChild(this, true);" onmouseout="setChild(this);">
Wild Hill Forest Paikia<br>Deutschland
<div><img src="photos/petigree/Paikia.jpg" alt="Wild Hill Forest Paikia">Wild Hill Forest Paikia</div>
</div>
</div>

Allerdings weiss ich nicht, inwieweit du das einfach übernehmen kannst... da kann dir aber sicher jemand weiterhelfen. :)

Aahh, vielen Dank. Weisst Du zufälliger weise, ob man das noch änderst machen kann? Denn mit den Html-Codes bin ich nicht so bewandert. Leider, ansonsten wäre wahrscheinlich meine HP schon längst fertig:love:

Auswendig weiss ich sowas nicht mehr aber Google wird da weiterhelfen können mit rollover - popup - bild :) (hoffe das hilft wenigstens ein bisschen)

Wenn es nicht exakt genau so aussehen muss, wäre die lightbox vielleicht eine Alternative. Statt einem thumb würdest du das Bild mit der Grösse deiner Wahl einfach einem Text zuordnen...

Ohne html und/oder Java-Kenntnisse wirst du das leider kaum machen können.

Denn selbst wenn du ein fertiges Script im Google findest, welches diese Funktion beinhaltet (oder das von Nora gepostete verwendest), musst du zumindest ein paar Werte anpassen und das Ganze in deine Seite einbauen.

Moni

Hallo BlackyShy,

wie hast du deinen Stammbaum gestaltet? Als einzelnes Bild oder als mehrere Kästchen (HTML)?

Die Lösung, welche du gezeigt hast arbeitet mit HTML-Kästen, die schön formatiert wurden, dass es aussieht wie ein Bild. Dabei ist in jedem der Kästen ein zweiter Kasten drin mit Bild, der jedoch standardmässig versteckt ist.

Erst wenn man mit dem Mauszeiger über den äusseren (=sichtbaren) Kasten fährt, wird dann das Bild sichtbar.

Das Prinzip ist eigentlich einfach, aber den Stammbaum anstatt als Bild in HTML-Kästen zu gestalten ist leider alles andere als einfach. Ich denke, wenn es an etwas scheitern könnte, dann am ehesten daran.

Andererseits liesse sich der ganze Code für den Stammbaum sicher kopieren, da die Struktur immer die gleiche ist. Das ist aber nicht gerade die feine Art und ganz ohne Anpassungen ginge es sicher auch nicht. Insofern wären Kenntnisse schon sinnvoll.

Ansonsten wie schon erwähnt wäre Lightbox eine interessante Alternative, nicht ganz so elegant, aber sie liesse sich relativ einfach einrichten und sieht auch optisch gut aus. Der passende Stammbaum dazu müsste aber dann immer noch irgendwie erstellt werden, entweder mit einer Tabelle oder mit Kästen.

Allerdings weiss ich nicht, inwieweit du das einfach übernehmen kannst... da kann dir aber sicher jemand weiterhelfen. :)

Ich habe den Code nicht ausprobiert, aber ich würde sagen, dass er wahrscheinlich funktioniert und man tatsächlich Bilder ein und ausblenden kann, aber standardmässig werden alle eingeblendet, da die Info zum Ausblenden fehlt und wahrscheinlich werden keine Bilder angezeigt, da der Pfad zum Bild nicht mehr stimmt, sobald es auf dem eigenen Computer oder auf dem eigenen Webspace gespeichert wird. Es müssten also die Pfade angepasst und durch eigene Bilder ersetzt werden.

@Magi und Frau_D

Werde mir das mal genauer ansehen und hoffe auf ein wenig Grips von mir und dass es verständlich ist:unsure:

@Octodons.ch

Ich habe den Stammbaum normal mit Page gemacht siehe Pedigree - sky-australianshepherd Deckrüde Webseite!

Ich danke jedenfalls allen!!! :thanks: