Thema: Bild mit Rahmen aus einzelnen Bildern
Einzelnen Beitrag anzeigen
  #3 (permalink)  
Alt 11.04.2006, 13:38
phpfuchs phpfuchs ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 05.03.2006
Beiträge: 11
phpfuchs befindet sich auf einem aufstrebenden Ast
Standard
Ich hab das Problem mit dem Rahmen unter Verwendung mehrerer DIV's und CSS erreicht:

Code:
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
  background-color:#fff;
}

.picture {
  position:relative;
}

.picture .image {
  position:absolute;
  top:18px;
  left:18px;
  background-color:#f4f4f4;
}

.picture .n {
  position:absolute;
  left:18px;
  background:url(border_n.jpg);
  height:18px;
}

.picture .nw {
  position:absolute;
  top:0px;
  left:0px;
  background:url(border_nw.jpg) no-repeat;
  width:18px;
  height:18px;
}

.picture .ne {
  position:absolute;
  top:0px;
  background:url(border_ne.jpg) no-repeat;
  width:18px;
  height:18px;
}

.picture .sw {
  position:absolute;
  left:0px;
  background:url(border_sw.jpg) no-repeat;
  width:18px;
  height:18px;
}

.picture .se {
  position:absolute;
  background:url(border_se.jpg) no-repeat;
  width:18px;
  height:18px;
}

.picture .w {
  position:absolute;
  top:18px;
  left:0px;
  background:url(border_w.jpg);
  width:18px;
}

.picture .s {
  position:absolute;
  left:18px;
  background:url(border_s.jpg);
  height:18px;
}

.picture .e {
  position:absolute;
  top:18px;
  background:url(border_e.jpg);
  width:18px;
}

.picture:hover .image img {
  margin-left:4px;
  margin-top:4px;
}

.picture:hover .n {
  background:url(border_n_hover.jpg);
}

.picture:hover .nw {
  background:url(border_nw_hover.jpg);
}

.picture:hover .ne {
  background:url(border_ne_hover.jpg);
}

.picture:hover .w {
  background:url(border_w_hover.jpg);
}

.picture:hover .sw {
  background:url(border_sw_hover.jpg);
}

.picture:hover .s {
  background:url(border_s_hover.jpg);
}

.picture:hover .e {
  background:url(border_e_hover.jpg);
}

.picture:hover .se {
  background:url(border_se_hover.jpg);
}
</style>
</head>
<body>
<div class="picture" style="width:276px;height:216px">
  <div class="nw"></div>
  <div class="ne" style="left:258px;"></div>
  <div class="sw" style="top:198px;"></div>
  <div class="se" style="top:198px;left:258px;"></div>
  <div class="n" style="width:240px;"></div>
  <div class="s" style="width:240px;top:198px;"></div>
  <div class="w" style="height:180px;"></div>
  <div class="e" style="left:258px;height:180px;"></div>
  <div class="image">
    [img]beispielbild.jpg[/img]
   </div>
</div>
</body>
</html>
Etwas viel Code ist dennoch nötig pro Bild, und ein paar Angaben (top,left,width,height) muss ich per PHP in Abhängigkeit von der Bildgröße einfügen.

Sogar einen Hover-Effekt habe ich erreicht, das Bild taucht nach unten, wenn man mit der Maus drüberfährt, allerdings funktioniert das nur beim Firefox und nicht beim IE. (Opera und Netscape hab ich noch nicht getestet).

Das Resulat läßt sich sehen unter http://www.phpfuchs.de/ext/xhtml/rahmen/.

Hat jemand noch irgendwelche Verbesserungsvorschläge?

mit freundlichen Grüßen

Egon Schmid
Mit Zitat antworten