Die wohl bekannteste Methode, Text durch ein Bild zu ersetzen (z.B. in einem Logo), ist wahrscheinlich die -9999px-Variante.  Ein Artikel im 37signals-Blog brachte mich dazu, über weitere Methoden nachzudenken. – In diesem Artikel habe ich sie zusammengefasst.

Methode 1 – text-indent: -9999px

1
2
3
4
5
6
7
8

#logo {
    width: 200px;
    height: 50px;
    background: url(logo.png);
   
    overflow: hidden;
    text-indent: -9999px;
}

Der Klassiker muss hier natürlich erwähnt werden.

Methode 2 - line-height: 9999px

1
2
3
4
5
6
7
8

#logo {
    width: 200px;
    height: 50px;
    background-image: url(logo.gif);
   
    overflow: hidden;
    line-height: 9999px;
}

Ist mir erst vor Kurzem zufällig auf Spreeblick aufgefallen.

Methode 3 – display: none

1
2
3
4
5
6
7
8
9

#logo {
    width: 200px;
    height: 50px;
    background-image: url(logo.gif);
}
 
#logo span {
    display: none;
}

Diese Methode erfordert ein zusätzliches <span>-Element.

Methode 4 – height: 0

1
2
3
4
5
6
7
8
9

#logo {
    width: 200px;
    padding-top: 50px;
    background: url(logo.png);
   
    height: 0;
    overflow: hidden;
    display: inline-block;
}

Hier wird padding-top für die Höhe des Bilder verwendet. Quelle: Another -9999px

Methode 5 - text-indent: 100%

1
2
3
4
5
6
7
8
9

#logo {
    width: 200px;
    height: 50px;
    background: url(logo.png);
   
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

Performanter als die -9999px-Variante, da hier keine riesige Box vom Browser gerendert werden muss. Quelle: Replacing the 9999px hack (new image replacement)

Methode 6 – Glider/Levin

1
2
3
4
5
6
7
8
9
10
11
12

#logo {
    width: 200px;
    height: 50px;
    position: relative;
}
 
#logo span {
    background: url(logo.png) no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;  
}

Quelle: Glider-/Levin-Methode

Methode 7 – Pseudo-Elemente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#logo {
   width: 200px;
   height: 50px;
 
   padding: 0;
   margin: 0;
   overflow: hidden;
}
 
#logo:before {
   content: url(logo.png);
   display: inline-block;
   font-size: 0;
   line-height: 0;
}

Quelle: CSS image replacement with pseudo-elements (NIR)

Methode 8 – font: 0/0 a

1
2
3
4
5
6
7
8
9
10
11

#logo {
    width: 200px;
    height: 50px;
    background: url(logo.png);
 
    border: 0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    background-color: transparent;
}

Quelle: Update CSS image replacement technique (HTML5 Boilerplate)

Die Snippets habe ich auch als Gist auf GitHub angelegt. Alle meine Gists sind außerdem nach Kategorie sortiert im Snippet-Bereich meiner DevZone zu finden.

Welche von den oben genannten Methoden nutzt ihr?
Oder gibt es vielleicht noch bessere Wege?

Kategorie: Webentwicklung » HTML & CSS | Tags:

zum Artikel | 4 Kommentare

Image Data URIs sind eine nützliche Methode HTTP-Requests beim Aufruf einer Seite zu sparen. Anstelle der normalen Adresse zu einem Bild, ist es möglich die Bilddaten in Form eines Base64-kodierten Strings innerhalb des src-Attributs zu platzieren.

Ein kleines Beispiel

Zur Demonstration habe ich zwei identische Bilder eingebunden:

links mit Adresse im src-Attribut,
rechts mit Image Data URI

An dieser Stelle lohnt sich ein Blick in den Quelltext. Dort findet man folgenden Inhalt im src-Attribut des zweiten Bildes:

data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFBAcHwMHBFBcX7+/voaKiQ0VFIyYm4
ODggYODYmRk0NDQU1VVsLGxkZKSMzY2cnR0////l9YmXAAAABF0Uk5T/////////////////////wAlrZliAAAC7klEQVR42uyayW4sIQxFzTzUlP//2tcvUhaRuuDamGpFwo
te4tM2UNi+9PVhowWwABbAAlgAC2ABLIA/CpD2vAVLPxZC9vUxAOdLpDdmtyPNB3A+UMNONgMPIBVLPdvMNAATCLLTTwFIoPvvTWnUAVwmlm1OF8BEYpo9NAEuEhgWBATAnSS
yWHUAqiWhWa8BsIv9v8yPA3gasjIKMOi/T9AB2GnYjhGAascBOvugCeA0/BNVMcCp4p+sEwJcpGRBBmBIzQ4JgIt6AJQEAJei/0YSbgESqZpnAwRdgMgFMETPhICeCcB9CG4A
anOxy+qF4AagNNcy7lILwXsA117r9eiu/BwZBoAHlvLcPBQGwIn8F26pYHGABAYz8fKwwwAezuYeR3PwFmDDtxMnDxEGsJz9zMhDAgES80DBedhBgJ17otE8ZBAg868ULA8BB
AiSOw0p4ONMgFfg+lcjCCC81b/SJjgGmgD9PJjZAL08YABpBKCdBwzADAE08/AMgCuDAHUM4LAf3YTm/OgpcOWzx/Do3YUVAzhlAObUuopF34Je9O+epSQpzI0g+pzPsWcDgM
30CwSoTID+V7BRHr59lPIAMlwiVRQgMAAYowwLP8sPGACO/vcEAwaoKEBmFageL06xhw13kORwgAwAJG6HYGOU56kLwK3Nb3s0JOlRGV5V3GoP3AG0qzMv6aFlXptOs1Hc7Nn
TrFkRGID7Vm18JgD3AOaZADTa9arN2uj4AMkqAhjJyObQ819kQ6swPwFtAKeVhCqdG1Yd/14+uvWTN0B/eJ1n+++O78uo/9MNChjKXP+AhGNogFm6ShpAxOKn5R+V8Rg74/xx
hExJJCSAZESolEtwHEE1GSpm447p4q4u5+OM6WxGxXQcQaODC7Hi8FVZkk53RNV/zwb4XzB0bsbNMxfky3rdXm7iYDfv2MvJhM3VX+H3hgjlkCmbR6Td1Rjjj9ePGVhkidsXw
AJYAAtgASyABbAAPg7wT4ABAEYSjudgB/2SAAAAAElFTkSuQmCC

Zur besseren Lesbarkeit darf übrigens Whitespace vorhanden sein.

Image Data URI Generator

Um an die Data URI zu gelangen, habe ich einen kleinen Generator in meiner DevZone gebastelt, der eine URL zu seinem beliebigen Bild im Web entgegennimmt und die passende Image Data URI zurückgibt.

Image Data URI Generator

Hier geht’s zur App →

Weiterführende Links

Auf Wikipedia gibt es eine ausführliche Auflistung der Vor-und Nachteile. Außerdem werden dort die unterstützten Browser aufgelistet. Bedauerlicherweise wird der IE7 nicht supportet und im IE8 sind die Data URIs auf 32 kB beschränkt.

Kategorie: Webentwicklung » HTML & CSS | Tags: Adresse, App, Attribut, Base64, Beispiel, Bild, Browser, Demo, Generator, HTTP, IE7, IE8, Image Data URI, Nachteile, Quelltext, Request, String, Vorteile, Whitespace, Wikipedia

zum Artikel | 2 Kommentare

money.js ist eine kleine (<1kb) JavaScript-Bibliothek zur Währungsumrechnung. Gedacht ist die Zusammenarbeit mit der stündlich aktualisierten Open Source Exchange Rates API. Es können jedoch auch eigene Wechselkurse angegeben werden.

Beispiele

Hier ein paar der offiziellen Beispiele:

1
2
3
4
5
6
7
8
9
10

// From any currency, to any currency:
fx.convert(12.99, {from: "GBP", to: "HKD"});
 
// Chaining sugar:
fx(1000).from("USD").to("GBP");
fx(1000).to("AED");
 
// With simple settings and defaults, making this possible:
fx.convert(5318008);
fx(5318008).to("AED");

Weiterführende Links

• Offizielle Website
• Demo Playground
• Dokumentation
• GitHub Repository
• Open Source Exchange Rates API

Kategorie: Webentwicklung » JavaScript | Tags: Bibliothek, money.js, Open Source Exchange Rates API, Währungsumrechnung, Wechselkurs

zum Artikel | 4 Kommentare

Mittlerweile gibt es unzählige Möglichkeiten die Dropbox produktiv zu nutzen. Eine davon ist, den Public-Ordner als Download-Server zu verwenden. Wie das mit der eigenen Domain funktioniert, werde ich euch in diesem Artikel beschreiben.

Schritt 1: Die persönliche ID

Zunächst benötigen wir die persönliche ID des eigenen Public-Ordners. Den Link zu einer Datei in eurem Public-Ordner erhaltet ihr über das Kontextmenü. Dieser entspricht folgendem Schema:

http://dl.dropbox.com/u/123456/ordner/datei.abc

Der rot markierte Teil ist die ID.

Schritt 2: (Sub-)Domain anlegen

Nun legt ihr die Domain oder eine Subdomain an. Für mein Beispiel nutze ich folgende Subdomain:

download.pehbehbeh.de

Schritt 3: .htaccess-Datei erstellen

Damit die erstellte Domain jetzt zu unserem Public-Ordner weiterleitet, ist eine .htaccess-Datei im Root-Verzeichnis der Domain mit folgendem Inhalt nötig:

1
2
3
4

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteRule ^(.*)$ http://dl.dropbox.com/u/839455/$1 [L,QSA]
</IfModule>

Nicht vergessen die eigene ID einzutragen!

Beispiele

Folgende Anfragen…

download.pehbehbeh.de/beispiel.txt
download.pehbehbeh.de/test/mit/ordner/123.txt
download.pehbehbeh.de/mein_riesiges_archiv.zip

…landen jetzt hier:

dl.dropbox.com/u/839455/beispiel.txt
dl.dropbox.com/u/839455/test/mit/ordner/123.txt
dl.dropbox.com/u/839455/mein_riesiges_archiv.zip

Kategorie: Webentwicklung | Tags: .htaccess, Datei, Domain, Download, Dropbox, ID, Ordner, Public, Subdomain, Verzeichnis

zum Artikel | 3 Kommentare

Lang ist’s her: Im April letzten Jahres schrieb ich den ersten Artikel zur Serie WebSockets mit JavaScript und PHP. Da ich es verpennt habe, die Serie fortzusetzen und es mittlerweile ein paar sehr gute Tutorials da draußen gibt, möchte ich die Reihe mit diesem Artikel und ein paar WebSocket-Linktipps abschließen.

Entwicklung

„Damals” steckte das Thema noch in den Kinderschuhen – doch mittlerweile sind WebSockets neben Chrome auch in den neuesten Versionen von Safari implementiert. Für den Firefox war zwar die Version 3.7 angepeilt – doch wegen einer Sicherheitslücke im Protokolldesign, werden es die WebSockets nicht einmal in die finale Version von Firefox 4.0 schaffen. (Quelle) In Opera sind sie deshalb seit Version 11 standardmäßig deaktiviert und lassen sich nur über einen Eintrag in der Config wieder aktivieren. (Quelle)

Linktipps

Wikipedia: Websockets

• allgemeiner Überblick

Websocket.org

• kurze Zusammenfassung
• Beispiele mit Testserver
• genauere Betrachtung & Vorteile von WebSockets

Comet Daily: State of Websocket Support

• Welche Browser unterstützen WebSockets?

Nettuts+: Start Using HTML5 WebSockets Today

• Was sind WebSockets?
• Was ersetzen WebSockets?
• Implementierung von Websockets
  (Server, URLs & Ports, Client, Events, etc…)

David Walsh: WebSocket und Socket.IO

• Was ist die WebSocket API?
• Verwendung der WebSocket API
• WebSockets mit Socket.IO
• dojox.Socket und Socket.IO

Solltet ihr noch weitere gute Linktipps haben, schreibt sie einfach in die Kommentare. Ich werde die Liste dann ergänzen.

Kategorie: Webentwicklung » JavaScript | Tags: API, Artikel, Browser, Comet Daily, David Walsh, Entwicklung, Firefox, Firefox 3.7, Firefox 4.0, Google Chrome, JavaScript, Kompatibilität, Linktipps, Nettuts+, Opera, PHP, Protokoll, Safari, Serie, Sicherheitslücke, Socket.IO, Tutorial, Version, WebSocket API, Websocket.org, WebSockets, Wikipedia

zum Artikel | ein Kommentar

Etwas überraschend wurde das offizielle HTML5-Logo veröffentlicht. Ich finde es persönlich sehr gelungen und wenn es dazu beträgt, HTML5 stärker zu verbreiten – warum nicht? Doch ich will euch nicht länger auf die Folter spannen…

So sieht es aus:

Auf der offiziellen Seite gibt es das Logo in sämtlichen Variationen und Größen zum Download als PNG- oder SVG-Datei. Zudem sind noch sogenannte Technology Classes verfügbar, mit denen Technologien dargestellt werden können, die zum Einsatz kommen:

3D Effects	Connectivity	Device Access	Multimedia
Offline Storage	Performance	Semanticss	Styling

Neben den verschiedenen Logos und Technology Icons gibt es noch den Badge Builder, mit dem man kinderleicht ein Badge für die eigenen Website erstellen kann. Beispiel: Folgendes Badge enthält Performance, Semantics und Styling:

Zu guter Letzt können noch T-Shirts und kostenlose Sticker bestellt werden…

Kategorie: Webentwicklung » HTML & CSS | Tags: 3D Effects, Badge, Badge Builder, Connectivity, Device Access, Download, HTML5, HTML5 Logo, Logo, Multimedia, Offline Storage, Performance, PNG, Semantics, Sticker, Styling, SVG, T-Shirt, Technologie, Technology Classes, Website

zum Artikel | keine Kommentare

In sozialen Netzwerken wie Facebook und Twitter ist es üblich nicht den Zeitstempel eines Postings anzuzeigen, sondern die verstrichene Zeitspanne seit der Erstellung. In WordPress ist dies mit der Funktion human_time_diff() möglich, die sich schon seit Version 1.5 im Core befindet – doch was steckt eigentlich hinter dieser Funktion?

Die Funktion in WordPress

Der Funktion human_time_diff() besitzt einen Pflichtparameter ($from) und einen optionalen Parameter ($to). Zwischen diesen beiden Zeitstempeln wird die Differenz berechnet und in einem lesbaren Format zurückgegeben. Sollte kein zweiter Wert angegeben werden wird immer der aktuelle Zeitstempel verwendet, was in den meisten Fällen ausreichen sollte.

Beispiel 1: Artikel

1

<?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?>

Beispiel 2: Kommentare

1

<?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?>

Die eigene Funktion

Möchte man dieses Feature in die eigene (nicht-WordPress) Seite integrieren, muss man entweder selbst Hand anlegen oder in die wp-includes/formatting.php schauen. Dort findet man den Schnipsel der Funktion, der sich natürlich noch an die eigenen Bedürfnisse (z.B. die deutsche Sprache) anpassen lässt.

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

function human_time_diff( $from, $to = '' ) {
        if ( empty($to) )
                $to = time();
        $diff = (int) abs($to - $from);
        if ($diff <= 3600) {
                $mins = round($diff / 60);
                if ($mins <= 1) {
                        $mins = 1;
                }
                /* translators: min=minute */
                $since = sprintf(_n('%s min', '%s mins', $mins), $mins);
        } else if (($diff <= 86400) && ($diff > 3600)) {
                $hours = round($diff / 3600);
                if ($hours <= 1) {
                        $hours = 1;
                }
                $since = sprintf(_n('%s hour', '%s hours', $hours), $hours);
        } elseif ($diff >= 86400) {
                $days = round($diff / 86400);
                if ($days <= 1) {
                        $days = 1;
                }
                $since = sprintf(_n('%s day', '%s days', $days), $days);
        }
        return $since;
}

Kategorie: Webentwicklung » PHP | Tags:

zum Artikel | keine Kommentare

Wenn wir uns im Netz bewegen bestehen alle Websites irgendwie aus Kästen. Alles ist in irgendeiner Art und Weise irgendwie rechteckig. Zwar geben uns neue CSS3-Techniken die Möglichkeit unsere Elemente abzurunden, aber dennoch: Sie sind Kästen. Wen man eine schöne (nicht rechteckige) Grafik anklickbar machen möchte – und zwar nicht den gesamten Kasten, in dem sie sich befindet, muss man zum Beispiel auf arbeitsintensive Image Maps oder Flash zurückgreifen.

In diesem Artikel möchte ich euch zeigen, dass es mit Hilfe des Canvas-Elements aus HTML5 auch anders funktioniert. Das Element wird dabei nur als Hilfsmittel genutzt und nicht dazu, die Grafik einzubinden.

Die Idee

Die Idee stammt zugegebenermaßen nicht von mir selbst – die Umsetzung in diesem Artikel jedoch schon. Ich schaute letztens eine interessantes Video über die Erstellung einer Game Engine in JavaScript. Im Video wurde darüber gesprochen Canvas als ein Tool zu benutzen um Pixeldaten aus einem Bild auszulesen – genauer gesagt aus einer PNG-Datei, die Transparenz beinhaltet.

So lässt sich ein zweidimensionales Array aus Nullen und Einsen erstellen, mit Hilfe dessen man leicht entscheiden kann, ob die Maus sich auf oder neben dem Objekt befindet. Dabei ist man noch nicht einmal beschränkt auf Klick-Events. Nette Hover-Effekte lassen sich genauso gut erstellen.

Demonstration

Obwohl es in allen modernen Browsern funktionieren sollte, habe ich die Demo kurz im Firefox abgefilmt, sodass auch wirklich jeder in den Genuss kommen kann. Im Video ist ein Hover-Effekt zu sehen, der die Deckkraft der Bilder verändert.

Link zur Live-Demo »

Setup

HTML

Wie ich anfangs bereits erwähnte, können Bilder ganz normal in die Seite eingebunden werden, wie man es gewohnt ist. In meinem Beispiel habe ich Divs erstellt, die ein Hintergund-Bild besitzen.

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

<div id="main" class="container">
    <div class="clickable arrow"></div>
    <div class="clickable build"></div>
    <div class="clickable building"></div>
    <div class="clickable folder"></div>
    <hr />
    <div class="clickable home"></div>
    <div class="clickable interact"></div>
    <div class="clickable paint"></div>
    <div class="clickable pathing"></div>
    <hr />
    <div class="clickable pen"></div>
    <div class="clickable people"></div>
    <div class="clickable phonebook"></div>
    <div class="clickable plus"></div>
    <hr />
    <div class="clickable printer"></div>
    <div class="clickable school"></div>
    <div class="clickable vault"></div>
    <div class="clickable world"></div>
    <hr />
</div>

CSS

Die CSS-Regeln sind ebenfalls überschaubar. Die Deckkraft wird bei allen Bildern etwas verringert. Im Internet Explorer funktioniert der Effekt eh nicht, deswegen müssen wir uns auch auch nur um die Deckkraft bei den anderen Browsern kümmern.

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
27
28
29
30
31
32
33
34
35
36
37
38

hr {
    clear: left;
}
 
.clickable {
    float: left;
    width: 128px;
    height: 128px;
    margin-right: 30px;
    -moz-opacity: 0.5;
    opacity: 0.5;
}
 
.hover {
    -khtml-opacity: 1.0;
    -moz-opacity: 1.0;
    opacity: 1.0;
}
 
.arrow    { background: url('../img/arrow.png');      }
.build    { background: url('../img/build.png');      }
.building { background: url('../img/building.png');   }
.folder   { background: url('../img/folder.png');     }
 
.home      { background: url('../img/home.png');      }
.interact  { background: url('../img/interact.png');  }
.paint     { background: url('../img/paint.png');     }
.pathing   { background: url('../img/pathing.png');   }
 
.pen       { background: url('../img/pen.png');       }
.people    { background: url('../img/people.png');    }
.phonebook { background: url('../img/phonebook.png'); }
.plus      { background: url('../img/plus.png');      }
 
.printer   { background: url('../img/printer.png');   }
.school    { background: url('../img/school.png');    }
.vault     { background: url('../img/vault.png');     }
.world     { background: url('../img/world.png');     }

JavaScript

Ich folgenden JavaScript-Teil werde ich jQuery-Funktionen nutzen, die mir das Leben hier und da etwas einfacher machen. Die Funktionen sind aber keinesfalls für die Umsetzung notwendig.

Insgesamt ist der oben gezeigt Hover-Effekt in drei Teile aufgeteilt:

1. Die Maus betritt den Div (mouseenter)
2. Die Maus bewegt sich im Div (mousemove)
3. Die Maus verlässt den Div (mouseleave)
   

Natürlich muss jeder selbst wissen, wie man es letzendlich implementiert. Ich möchte lediglich die Grundidee mit diesem Beispiel veranschaulichen.

1. Event: mouseenter

Wenn die Maus den Div betritt, muss das Array erzeugt werden, das die Bild-Daten enthält. Dazu wird ein Canvas-Element erstellt, in dem das Hintergrundbild des Divs gezeichnet wird. Danach können die Pixel ausgelesen werden. Anhand des Alpha-Wertes (jeder vierte Wert) wird die Transparenz abgefragt und eine Clickmap erzeugt (0=nichts, 1=Objekt).

Zum Schluss wird die Clickmap gespeichert, damit wir sie im nächsten Schritt abfragen können.

Mit den jQuery-Funktionen ist alles recht simpel und schick gelöst. Nur mit der Abfrage des Hintergrundbildes bin ich noch nicht ganz zufrieden. Genaueres dazu hatte ich bereits letztens in einem anderen Artikel geäußert.

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
27
28
29
30
31
32

$('.clickable').mouseenter(function(e) {
    var obj = $(this);
 
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
 
    var img = new Image();
    img.onload = function() {
        // Bild nachzeichnen & ImageData auslesen
        canvas.width  = img.width;
        canvas.height = img.height;
        context.drawImage(img, 0, 0);
 
        var imageData = context.getImageData(0, 0, img.width, img.height);
 
        // Clickmap erstellen
        var clickMap = [];
        for (var i=0, n=imageData.data.length; i<n; i+=4) {
            var row = Math.floor((i/4)/img.width);
            var col = (i/4) - (row * img.width);
 
            if (!clickMap[row]) clickMap[row] = [];
            clickMap[row][col] = (imageData.data[i+3] == 0) ? 0 : 1;
        }
 
        // Clickmap speichern
        obj.data('clickMap', clickMap);
    }
 
    // Bild-Quelle angeben und onload-Event auslösen
    img.src = obj.css('backgroundImage').replace(/\"/g, '').slice(4, -1);
});

2. Event: mousemove

Wenn wir die Maus über dem Div bewegen wird abgefragt ob wir uns auf einem sichtbaren Pixel befinden. Wenn dies der Fall ist, wird dem Div eine CSS-Klasse hinzugefügt bzw. wieder entfernt, wenn der Cursor sich auf einem transparenten Pixel befindet. In diesem Beispiel ändert die CSS-Klasse die Deckkraft.

Bei der Berechnung der Cursor-Position werden Seitenabstand und Scrollweite berücksichtigt. Die Offset-Werte müssen gerundet werden, da es im Firefox zu Dezimalwerten kommen kann.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$('.clickable').mousemove(function(e) {
    var obj = $(this);
 
    if ("undefined" === typeof(obj.data('clickMap'))) {
        return;
    }
 
    var offset = obj.offset();
    var xPos = e.clientX - Math.round(offset.left) + $(window).scrollLeft();
    var yPos = e.clientY - Math.round(offset.top)  + $(window).scrollTop();
 
    if (obj.data('clickMap')[yPos][xPos]) {
        obj.addClass('hover');
    } else {
        obj.removeClass('hover');
    }
});

3. Event: mouseleave

Da der Fall auftreten könnte, das jemand die Maus besonders Schnell aus dem Div zieht oder das Bild am Rande des Divs einen sichtbaren Pixel besitzt sollte die CSS-Klasse auf jeden Fall entfernt werden, sobald man den Div verlässt.

1
2
3

$('.clickable').mouseleave(function(e) {
    $(this).removeClass('hover');
});

Fazit

Das war’s. Hat mich zwar einige Zeit gekostet diesen Effekt zu basteln, aber wenn man es jetzt so sieht, steckt nicht wirklich viel dahinter. Ich hoffe, dass ich euch damit weiterhelfen oder zumindest inspirieren konnte. Ich finde es zunmindest erstaunlich, wie neue Web-Technologien uns die Arbeit erleichtern können.

Kategorie: Webentwicklung » JavaScript | Tags: Alpha-Wert, Artikel, Browser, Canvas, Clickmap, CSS-Klasse, CSS3, Cursor, Deckkraft, Demo, Demonstration, Div, Effekt, Element, Event, Firefox, Flash, Funktion, Game Engine, Grafik, Hilfsmittel, Hover, HTML5, IE, Image Map, jQuery, mouseenter, mouseleave, mousemove, Offset, Pixel, Seitenabstand, Tool, Transparenz, Video

zum Artikel | 11 Kommentare

Heute stand ich mal wieder vor einem kleinen Problem und bin mir bis jetzt nicht sicher, ob ich es optimal gelöst habe. Ich hoffe auf Verbesserungsvorschläge oder Zustimmung von euch. Mein Problem: Die Hintergrundbild-URL eines Divs muss ausgelesen werden…

Das Problem

An sich ist es kein Problem auf bestimmte Style-Werte von Elementen zuzugreifen. Wenn man jedoch die URL eines Hintergrundbildes (style.backgroundImage) abfragt, erhält man – je nach Browser-Engine – unterschiedliche Rückgabewerte:

Gecko (z.B. Firefox)

url("http://pfad.de/zum/bild.png")

Webkit (z.B. Chrome & Safari)

url(http://pfad.de/zum/bild.png)

Das haben zumindest meine Tests mit den neusten Versionen der jeweiligen Browser ergeben. Bei Chrome und Safari wird die URL nicht in Anführungszeichen gesetzt. Wenn man sich jetzt als Ziel gesetzt hat, nur die URL des Hintergrundbildes abzufragen, muss man beide Engines beachten.

Die Lösung

Meine Lösung besteht darin, dass ich zunächst die Anführungszeichen aus der Zeichenkette entferne und danach alle Zeichen – bis auf die ersten Vier sowie das Letzte – mittels slice() extrahiere:

1

var url = document.getElementById('foo').style.backgroundImage.replace(/\"/g, '').slice(4, -1);

Der Internet Explorer 8 verhält sich in diesem Fall wie der Firefox. Andere Versionen habe ich nicht getestet. Was haltet ihr von dieser Lösung? Gibt es eine bessere oder einfachere Umsetzung?

Kategorie: Webentwicklung » JavaScript | Tags: backgroundImage, Element, Engine, Firefox, Gecko, Google Chrome, Hintergrundbild, IE8, Lösung, Problem, Safari, Style, URL, Webkit

zum Artikel | 2 Kommentare

Es ist mal wieder Zeit für einen neuen Part der Artikelserie “Exotische PHP-Funktionen“. Heute stelle ich euch eine Funktion vor, mit der eindeutige IDs generiert werden.

Die Funktion

Die Rede ist von uniqid(). Die offizielle Beschreibung der Funktion lautet: “Erzeugt eine eindeutige ID”. So einfach ist das. Der Rückgabewert ist ein 13 Zeichen langer String. Natürlich lässt sich hier, wie bei fast jeder Funktion, noch Einiges über Parameter anpassen.

Parameter

• prefix – fügt der generierten ID einen Präfix hinzu.
  Das kann in dem Falle hilfreich sein, wenn auf einem Server zur gleichen Mikrosekunde mehrere IDs erstellt werden. Diese würden sich andernfalls gleichen, da die Funktion zeitabhängig ist.
• more_entropy – erhöht die Eindeutigkeit der ID, falls auf true gesetzt.
  Die ID verlängert sich von 13 Zeichen auf 23 Zeichen.

Beispiele

1
2
3
4
5
6
7
8
9
10
11

echo uniqid(); // 4c5bdd5b6909c
echo uniqid();  // 4c5bdd5b690a4
 
echo uniqid('foo_'); // foo_4c5bdd5b690bc
echo uniqid('foo_'); // foo_4c5bdd5b690c0
 
echo uniqid(null, true); // 4c5bdd5b690ab7.28264218
echo uniqid(null, true); // 4c5bdd5b690b58.23513105
 
echo uniqid('foo_', true); // foo_4c5bdd5b690c56.41912889
echo uniqid('foo_', true); // foo_4c5bdd5b690cb0.45755308

Hinweise

Solltet ihr noch auf PHP 4 fahren, ist der Parameter prefix noch nicht optional.

Kategorie: Webentwicklung » PHP | Tags: Beispiel, eindeutig, Funktion, ID, Parameter, PHP 4, Präfix, Rückgabewert, String, uniqid

zum Artikel | keine Kommentare