DevTrain

Autor: Hannes Preishuber

Dynamische Bilder für schönere Web Seiten

Seit Monaten schwirrt mir schon die Idee im Kopf herum. Das lästige bearbeiten von Bildern für die Web Seite muss doch auch irgendwie automatisch funktionieren. Konkret sind es die kleinen Banner (Teaser) mit einem runden Rahmen rum. Das sollte doch auch irgendwie mit den GDI+ Klassen gehen.

Unser Teaser hat die Größe 150x100. Aussenrum ist ein dünner Rahmen mit runden Ecken. Ausserhalb der Ecken muss die Fläche Weiss sein. Ich habe mir dazu erst einmal eine Schablone gebaut die als Template dient. Die innere eigentliche Teaser Fläche ist Transparent. Hier muss man auf das Grafikformat achten. Transparent wird nur von GIF und PNG unterstützt. Diese Schablone legt man dann einfach additiv über das fertige Bild. Fertig ist der Teaser.

Schablone

Bild

Ergebnis

Das ganze lasse ich mir von einem Stück Code berechnen. Das Bild wird aus dem Query String ermittelt und geladen. Daraus wird ein Graphics Objekt erstellt, das zum weiteren Malen benötigt wird. Dann wird das Teaser Template geladen und auf das Bild gelegt. Die Ausgabe wird in den Response Stream per Save geschrieben.
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Dim myImageBase As Image
        myImageBase = New Bitmap(Request.QueryString("bild"))
        Dim g As Graphics = Graphics.FromImage(myImageBase)
        Dim imgBorder As Image
        imgBorder = New Bitmap("teasertemplate.gif")
        g.DrawImage(imgBorder, 0, 0, 150, 100)
        myImageBase.Save(Response.OutputStream, ImageFormat.Jpeg)
End Sub

Damit wird im Browser keine eigentliche Web Seite mehr erzeugt sondern ein direktes Bild.
Ein Bild muss immer mit dem IMG Tag eingebettet werden.
Also lege ich den Code in eine Teaserdraw.aspx die dann das eigentliche Bild zeichnet. Das Bild wird in einer weitere Seite eingebettet.

<img src="teaserdraw.aspx?bild=goto.jpg" alt="mein Alt Text">

Um die Lösung universell verwenden zu können verwenden wir hier ein Usercontrol. Dort wird das Bild eingebettet.

<%@ Control Language="vb" AutoEventWireup="false" Codebehind="teaser.ascx.vb" Inherits="Teaser.teaser" %>
<img src="teaserdraw.aspx?bild=<%=bild%>" alt="<%=alt%>">

Der Alt Tag wird der Vollständigkeit halber mitgeliefert.
Um das User Control von aussen mit Werten steuern zu können werden zwei Public Variablen deklariert.

Public Class teaser
    Inherits System.Web.UI.UserControl
    Public bild As String
    Public alt As String
...

Das User Control wird dann einfach in einer Webseite deklariert. Das kann der unbedarfte User sogar mit Frontpage machen ohne die Seite neu zu kompilieren.

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="Teaser.WebForm1"%>
<%@ Register TagPrefix="uc1" TagName="teaser" Src="teaser.ascx" %>
Markieren und Quellcode hier einfügen

Die platzierung des Teasers erfolgt dann im HTML Code. Die beiden Attribute bild und alt dienen für Bild und ALT Text.
<uc1:teaser id="Teaser1" runat="server" bild="goto.jpg" alt="mein Al Text"></uc1:teaser>

Die von mir hier gezeigte Lösung ist natürlich mit minimalen Aufwand realisiert. Bei den Bildern müssen Sie eventuell mit Formaten und kompression vareieren um das optimale Ergebnis zu erzielen.
Optisch die schönste Lösung wäre natürlich ein Custom Control.

 

 


Erfasst am: 01.12.2004 - Artikel-URL: http://www.devtrain.de/news.aspx?artnr=940
© Copyright 2003 ppedv AG - http://www.ppedv.de