• Keine optimale Suchmaschinerkennung
• Hoher Änderungs- und Verwaltungsaufwand
• Text nicht kopierbar
• Problem der Barrierefreiheit

Neben der Bilderlösung dürfte sIFR eine bekannte Methode sein. Hier wird der Text aus einem bestimmten HTML-Tag gelesen und durch einen Flashfilm mit eingebettem Font ersetzt. In der Theorie gut, in der Praxis schwierig wegen eines enorm hohen Konfigurationsaufwands.

Nach dem gleichen Prinzip funktioniert das js-Plugin Typeface. Nur ist es etwas praktischer in der Handhabung.
Der folgende Code bindet einen normalen Font und einen später beschriebenen Bold-Font ein:

1
2
3

<script src="typeface-0.14.js"><!--mce:0--></script>
<script src="mysrcFont.typeface.js"><!--mce:1--></script>
<script src="mysrcFontBold.typeface.js"><!--mce:2--></script>

Um dem Text die entsprechende Schriftart zuzuweißen, benutzt man einfach die CSS Anweisung font-family.

1
2

<div id="text" style="font-family: mySrc Font;">
Lorum ipsolum...</div>

Den Namen des im syle-Attribut verwendeten Fonts kann man in den jeweiligen js-Dateien nachlesen.
Das Ganze hat zwei Nachteile, wie sie auch schon auf der Website beschrieben werden. Performanceprobleme bei größeren Textmengen und Standard-CSS Hovereffekte funktionieren nicht mehr.
Damit der Font in eine Javascript Datei umgewandelt werden muss er in einem Truetype oder Opentype Format vorliegen. Nicht immer ist bei diesen Schriften auch die fette Variante integriert. Um das in den Griff zu bekommen, kann man mit einem Font Bearbeitungstool nur die Bold-Variante exportieren und diese ebenfalls umwandeln. Bindet man nun diese beide JS-Dateien ein und weist die Bold-Schrift einem einem HTML-Element zu, passiert abgesehen von einer Fehlerausgabe in der Firebug Konsole nichts.
Die Lösung dafür ist ganz einfach. Der Font-Converter auf der Typeface Website integriert auch Informationen über Schriftschnitte weshalb der CSS-Selektor diese Info auch benötigt:

1
2
3
4
5
6
7
8

#text{
  font-family: mySrc Font, Verdana, Arial;
}
 
#boldFont{
  font-family: mySrc Boldfont, Verdana, Arial;
  font-weight: bold;
}

Damit ist der Workaround für die Einbettung von normalen und bold Schriften perfekt.

Cufón – Eine Javascript alternative zu sIFR
sIFR 3 r436 – scroll-Problem im Firefox 3, ie6/7

Ähnliche Artikel

• 15. April 2009 -- jQuery versus CSS
• 12. April 2009 -- jQuery UI CSS Framework
• 8. April 2009 -- jQuery Media Plugin zum Einbinden verschiedener Mime-Types

1
2
3
4
5
6
7
8
9
10
11

<div id="picGallery">
    <h2>CSS-Code</h2>
    <a href="someBigPic.jpg">
        <span></span>
        <img src="someSmallerPic.jpg" alt="" />
    </a>
    <a href="anotherBigPic.jpg">
        <span></span>
        <img src="AnotherSmallPic.jpg" alt="" />
    </a>
</div>

Das CSS sähe dabei so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

#picGallery{
    width:       100%;
    overflow:  hidden;
}
#picGallery a {
    position:   relative;
    float:         left;
    margin:     5px;
}
#picGallery a span {
   display:none;
   background-image:url(zoom.png);
   background-repeat:no-repeat;
   width:48px;
   height:48px;
   position:absolute;
   left:15px;
   top:15px;
}
#picGallery img {
   border:    solid 1px #999;
   padding:  5px;
}
#picGallery  a:hover span {
   display:   block;
}

Soweit sogut. Nun mit Hilfe von jQuery. Der HTML Teil ist fast identsich. Allerdings brauchen wir hier die span-Tags noch nicht.

1
2
3
4
5
6
7
8
9

<div id="picGallery">
    <h1>jQuery Code</h1>
    <a href="someBigPic.jpg">
        <img src="someSmallerPic.jpg" alt="" />
    </a>
    <a href="anotherBigPic.jpg">
        <img src="AnotherSmallPic.jpg" alt="" />
    </a>
</div>

Der JS-Code erzeugt den span und kümmert sich um das Einblenden..

1
2
3
4
5
6
7
8
9
10
11

   $(document).ready(function(){
      //Füge jedem a-tag in dem div mit der id "picGallery" ein span-Tag hinzu
      $("#picGallery a").append("<span></span>");
      //Standard fading Funktionen von jQuery
      $("#gallery2 a").hover(function(){
      $(this).children("span").fadeIn(600);
      },
      function(){
      $(this).children("span").fadeOut(200);
      });
});

Das wars auch schon. Natürlich muss das CSS im HTML Dokument referenziert werden, allerdings kann dann die a:hover Eigenschaft weggelassen werden. Bei Click würde das Bild in einem neuen Fenster geöffnet, bei Bedarf ließe sich noch ein Bildergalerie Skript damit verbinden. Ich hoffe das bei Gelegenheit noch vorstellen zu können.
Viel Erfolg!!

Ähnliche Artikel

• 1. Dezember 2010 -- jQuery Mobile – Der Seitenaufbau
• 25. November 2010 -- jQuery Mobile – Web-Apps mit jQuery
• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)

Auch wird die Umsetzung von “Rounded corners” mit CSS3 unterstützt. Natürlich in den Browsern, die sich nach dieser W3C Empfehlung richten. Der IE6 gehört natürlich nicht dazu, hierfür muss auch mit dem jQuery CSS Framework individuell angepasst werden. Genauso werden bisher noch keine transparente png’s im IE6 unterstützt, was sich aber bald ändern soll. Aber hierfür ist bisher noch der alte CSS pngfix notwenig.
Allgemein mehr über das CSS Framework könnt ihr unter Theming API herausfinden.

Auch äußerst interessant ist der ThemeRoller. Hält man sich an die Standards der Theming API lassen sich damit einfach ansprechende Benutzeroberflächen gestalten, die auf die eigene Seite als CSS übernommen werden können.

Ähnliche Artikel

• 16. Oktober 2009 -- jQuery – Accessible-RIA – Widgets für jedermann
• 27. Juli 2009 -- jQuery Tutorial – Closing an Accordion automatically
• 24. März 2011 -- MooTools MenuMatic – Firefox 4 zweizeilig Problem