Forum Wiki Galerie Kontakt Wie man Fragen richtig stellt. Tutorial Forum
Zurück   GIMP-Forum 3.0 > Arbeiten mit Gimp > Tutorials

Hinweise
Alt 26.11.2006, 22:02   #1
XSS Killer
Neuer Benutzer
 
Benutzerbild von XSS Killer
 
Registriert seit: 26.11.2006
Beiträge: 6
Standard Thumbnail für Bildergalerie erstellen (+ Bildhervorhebung)

Hi!

In diesem Tutorial geht es weniger um Bildbearbeitung als um das erstellen einer Bildergallerie.

Natürlich lernt ihr hier nicht, wie man eine Bildergallerie in PHP schreibt
Es geht hier mehr darum, dass ihr einen kleinen aber schönen Effekt lernt, der die Bilder hervorhebt.

Als Ausgangsbild für mein Beispiel dient das folgende Bild:



Also dann, let's go^^

Lade das Bild, welches du als Thumbnail (Vorschaubild) machen willst, in Gimp.

Dann verkleinerst du das Bild mit Bild->Bild skalieren. Ich habe dabei die Größe 183*137 ausgewählt. Danach blendest du den Rand aus (ein schöner effekt) mit Script-Fu->Dekoration->Rand ausblenden. Hier lässt du alles auf Standart AUßER die Farbe. Hier kommt die Hintergrundfarbe deiner Gallerie rein.
Jetzt speicherst du das ganze unter einem Namen wie "tn_01_h.png", tn für thumbnail, 01 die nummer des bildes und h für hover.

Und was dieses Hover bedeutet: Wenn du über das Bild fährst (mit der maus und ned dem auto^^), erscheint diese version des bildes.

Aber jetzt weiter. Geh auf Bild->Modus->Graustufen. Dieses Bild speicherst du nun zB unter dem Namen "tn_01_n.png", wobei n für normal steht.

Das machst du jetzt mit allen Bildern (viel spaß, musste das mal bei 100 bildern machen).

Jetzt legst du ein HTML-Dokument an.

Hier fügst du für jedes Bild folgende Zeile an:

Code:
<a href="fs_01.html"><img src="tn_01_n.png" border="0" onMouseOver="this.src='tn_01_h.png'" onMouseOut='tn_01_n.png'"/></a>
Mit <a...> Legen wir einen Link zur Datei fs_01.html an. fs steht übrigens für fullsize. Auf deutsch: volle bildgröße. und jetzt ist die funktion dieser datei logisch: hier ist das komplette bild in voller größe enthalten.
<img.../> legt einen verweis zu der bilddatei an. src="tn_01_n.png" ist der normalzustand. Mit OnMouseMove legen wir das Bild fest, welches aufgerufen wird wenn der Benutzer mit der Maus über das Bild fährt. Dabei ändern wir mit this.src den verweis auf das Thumbnail als Hoverbild. Mit this sprechen wir das img-tag an und mit src das attribut. Aber das müsst ihr ned verstehen, reicht wenn ihr den codeteil kopiert und die richtigen bildernamen einfügt^^. Mit OnMouseOut wird das Bild wieder in den Normalzustand versetzt, wenn die Maus vom Bild entfernt wird.

Alles ganz einfach.

Hier also ein Beispiel:

Zitat:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bildergallerie</title>
</head>
<body>
<h1>Bildergallerie</h1>

<a href="fs_01.html"><img src="tn_01_n.png" border="0" onMouseOver="this.src='tn_01_h.png'" onMouseOut='tn_01_n.png'"/></a>

</body>
</html>
Den gesamten HTML-Code werde ich jetzt nicht erklären, wer mehr wissen will, geht auf de.selfhtml.org und schaut selber nach^^

Hier noch die zwei Bildversionen:

Normalzustand:


Hoverzustand:


Und das war es auch schon.

Tip: wenn ihr viele bilder habt: macht euch ne lösung mit nem xml-dokument und php. braucht nur nen hoster mit php5.
__________________

XSS Killer ist offline   Mit Zitat antworten
 

Lesezeichen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist An.
Smileys sind An.
[IMG] Code ist An.
HTML-Code ist Aus.

Gehe zu


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:18 Uhr.


Powered by vBulletin® Version 3.8.2 (Deutsch)
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.