Bildeffekte mit Dreamweaver CS4?

Computer: Software & Programmierung HTML & CSS
#1

Hallo zusammen,

ich wollte mich mal danach erkundigen, wie man die Bilddarstellung bei Dreamweaver oder generell bei einer Website einstellen kann?

Ich würde gerne eine Ansicht haben, bei der man mit der Maustaste über das Bild fährt und es in einem seperaten Bild mit Rand z. B. dargestellt wird.

Wie auf dieser Seite:
http://www.cardomain.com/ride/2513955

Was ganz praktisch ist, ist dass man dort auch gleich weiter klicken kann und sich das Fenster dem Bild anpasst.

Meine Seite ist:
http://www.nk-designed.com/vektorgrafiken.html

Danke!

Kaiti

#2

Hi, Kaiti!

Der Effekt (bzw. das zugehörige Script), den Du beim Öffnen des Bildes bekommst, nennt sich „Lightbox“.
Mittlerweile gibt es dafür eine Dreamweaver-Extension. Schau Dir dazu mal folgende Seiten an:

http://www.lupin3000.de/extensions_viewit.php?viewid…
http://www.fourlevel.com/dreamweaver/extensions/ligh…

Was den Rahmen betrifft: arbeitest Du nur über die Benutzeroberfläche oder bist Du in der Lage, CSS manuell zu bearbeiten?

Gruß, Caro

#3

Danke erst mal für die hilfreiche Antwort!

Ja, ich bin auch in der Lage die CSS zu verändern.

)

#4

Tach, Kaiti!

Erst mal die Kurzfassung an einem faulen Samstagabend. Ich beschreib Dir mal, wie Du einen ähnlichen, aber etwas uneleganteren Effekt erzielst:

Dein Bild braucht erst mal eine Klassenbezeichnung. Wenn Du die Lightbox verwendest, ist diese Klasse vermutlich vorgegeben und heißt „lightbox“ (sinnigerweise). Ansonsten musst Du sie selbst vergeben, im Sourcecode sieht das dann ungefähr so aus:

in den CSS steht dann:

a.dieklassefuersbild{border:solid black 1px;} 
a.dieklassefuersbild:hover{border:solid black 3px;}

Die obere Zeile beschreibt dabei den Rahmen im Ruhezustand, die untere Zeile beim Rollover. Du kannst dabei die Rahmenstärke, die Farbe und die Art (durchgehend, gepunktet, gestrichelt …) ändern. Nähere Infos gibts hier:
http://de.selfhtml.org/css/eigenschaften/rahmen.htm

Der exakte Effekt auf Deiner Beispielseite ist noch etwas komplexer, da muss ich mich erst mal einlesen (aber heute nicht mehr …)

Gruß, Caro

#5

Hallo :smile:

Danke für die Erklärung der Lightbox!

Nun weiß ich nicht was mein Problem ist, aber ich kriegs nicht mit dem Code hin, bzw. dass die Lightbox im Source Code eingefügt wird.

Könnte mir da vielleicht jemand weiterhelfen?

Wär super.

Danke!

Grüße