Startseite mit Portraitfotos

[lutznet]

Hallo Leuts,
ich möchte meine Website neu gestalten. Die Startseite komplett soll aus
250px x 250px verschiedenen png (die einzelnen Portraits) bestehen, die aneinandergekachelt die Website ausfüllen. Beim Aufrufen der Site sind alle Fotos in Graustufen zu sehen. Beim überfahren mit der Maus wird dann das jeweilige Foto farbig. (Hovereffekt, Verlinkung auf die Unterseite).

Gibts eine Möglichkeit dies ohne grossen Aufwand zu realiesieren.?

Vielen Dank für die Antworten

 

[Pixelverwender]

AW: Startseite mit Portraitfotos

<img src="sw-bild.jpg" name="meinBild" alt="sw-version" onmouseover="document.name.src='farb-bild.jpg';" onmouseout="document.name.src='sw-bild.jpg' "/>

 

[stoerchu]

AW: Startseite mit Portraitfotos

Ich habe etwas ähnliches auf meiner homepage. Dies funktioniert sehr gut eigentlich.


Mein code ist allerdings etwas umständlicher, funktioniert aber auch mit deaktiviertem javascript.

<div class="link_pic" style="display: inline-block;">
<a href="#" style="width: 150px; height: 150px; background-image: url(pic.jpg);">
<span style="width: 150px; height: 150px; background-image: url(pic_hover.jpg);"/>
</a>
</div>

link_pic beinhaltet einige styledinge, die nicht besnders relevant sind hier. Dies ist aber der Grundaufbau.

 

[Mackymesser111]

AW: Startseite mit Portraitfotos

<div class="link_pic" style="display: inline-block;">
<a href="#" style="width: 150px; height: 150px; background-image: url(pic.jpg);">
<span style="width: 150px; height: 150px; background-image: url(pic_hover.jpg);"/>
</a>
</div>

Das tut mir irgendwie weh beim lesen…

Ich würde die Bilder Als Schwarzweiß/Farbversion direkt nebeneinander in ein png packen und dann per css verschieben.
Oder: schreib in einen image-tag alle farbigen Bilder rein und wechsel die dann per Javascript im header oder sogar im extra-file alle aus. Ist ein bisschen was zu lernen, aber im endeffekt die weitaus sinnvollste Lösung.
--> jedenfalls wenn du willst das die Besucher bei ausgeschaltetem Javasript die Farbigen Bilder sehen. Sonst ist Pixelverwender`s vorschlag besser

 

[Erdi]

AW: Startseite mit Portraitfotos

Wenn du Pixelverwenders Code nehmen möchtest und willst verlinken, könnte das so aussehen:

<a href="bild01.html" target="_parent"><img  src="bilder/bild_01_sw.jpg" name="meinBild" alt="sw-version"  onmouseover="src='bilder/bild_01_farbe.jpg';"  onmouseout="src='bilder/bild_01_sw.jpg' "/></a>

 

[Myhar]

AW: Startseite mit Portraitfotos

Wieso bieten hier alle eigentlich eine Lösung mit onmouseover/-out Beispielen an? Das ist doch viel eleganter komplett in Javascript zu lösen. Auch wird bei den geposteten Beispielen zB der Alternativtext nicht berücksichtigt. Ändert sich das Bild, muss dieser auch angepasst werden.
Was ist mit der Tastaturnavigation, wenn der Link per "tabben" angesprochen wird? Dann soll sich das Bild doch auch ändern, um ein konsistentes Nutzererlebnis zu gewährleisten. Vielleicht soll die Website auch mit Smartphones betrachtet werden (Gibt ja immerhin schon 1-2 Leute, die so etwas haben). Wie soll dort der s/w - Farbe Effekt erzielt werden? Dort gibt es ja kein "hover", reicht dort die s/w Variante aus? Oder soll dort gleich die Farbvariante angezeigt werden?

Mein Rat also: Vergiss die angebotenen Halb-Lösungen und setz das lieber ordentlich und komplett mit JS um. Vergib deinen Links, welche ein Bild zum wechseln haben, eine Klasse und binde dann die entsprechenden Eventhandler auf die Links (Und nicht auf die Bilder, wie es die Vorposter gemacht haben)

 

[der_fou]

AW: Startseite mit Portraitfotos

Aber ist es nicht schön zu sehen, dass es auch manchmal ohne JS geht?
Okay, ich will jetzt hier keine Grundsatzdiskussion über JS anstiften, sondern auch gern mal über alternative Wege lesen. ;-)

LG und allzeit "gut Licht"!

der fou

 

[Myhar]

AW: Startseite mit Portraitfotos

Nein, hier ist die Umsetzung mit reinem CSS leider nicht wirklich möglich. Man kann mit CSS nur die Hintergrundbilder eines Elements verändern, nicht aber den Pfad eines Bildes. Die Bilder hier sind aber keine Hintergrundbilder sondern wichtig für das Layout der Seite, also gehören sie auch mittels img-Tag in die Seite eingebunden.
Auch ist das beliebige Ändern der Bilder bei einer Lösung mit CSS nicht so leicht möglich, da es bei jeder Änderung angepasst werden muss. Mit der JS Lösung kann man dies recht leicht lösen, indem man ein bestimmtes Muster für die Namen der Bilder verwendet. Hier kann zB das s/w Bild die Endung -sw.jpg haben, diese Endung läßt sich leicht durch .jpg ersetzen.

 

[Erdi]

AW: Startseite mit Portraitfotos

lutznet hat was einfaches mit Hovereffekt und Verlinkung auf die Unterseite erfragt. Da wir nicht wissen, wie es mit seine JS Fähigkeiten steht, würde ich nicht sagen, er soll die angebotenen Halb-Lösungen vergessen.
Kommt aber bestimmt auch noch drauf an, von wieviel Bildern er redet.
Mal abwarten was lutznet zu den Lösungsvorschlägen sagt.

 

[lutznet]

AW: Startseite mit Portraitfotos

Vielen Dank allen, die sich mit meiner Frage beschäftigt und geantwortet haben.
Erdi liegt ziemlich richtig, meine JS Fähigkiten gehen gegen null.
Deshalb ist eine CSS basierte Lösung die für mich praktikabelste.
Zur Anzahl der Fotos. Es sollten schon möglichst viele (40 - 45? skaliert) auf der Startseite zu sehen sein.
Ich werde die hier angebotenen Lösungen austesten.
Schöne Woche von lutznet