Loading only one image and position it when hovering over it

It takes just a little modification in the images and the "hover"-methode.
First: the image that is shown by default and the 2nd image, that ist shown when hovering over the first, have to be combined to one image. Just put the 2nd image directly under the 1st via an image tool and save it as a new image. So this new image should be exactly twice the size of the original ones. Then use this new image in the "background"-attribute in your div. The "height" of the div must be exactly the half of the height of the new image. Furthermore you have to set the "background-position" in the div to "top". This way only the upper half of the image is shown. And finally you set the "background-position" in your "hover"-element to "bottom". So when hovering over the image it just gets "moved" to the top and only the bottom half can be seen.

In the attachment you can see what it would look like, when combining the 2 images.

Here is an example where the comined image is 100px wide and 60px high:

#button_home {
#button_home:hover {

This way everytime the page is loaded the combined image is loaded and there will be no delays.


Image with a text overlay that is dynamically generated

I want to display an image with a title that lays on top of the image. This title should be dynamically generated, therefore no photo editing tool can be used in this situation. The text comes from a dynamically generated JSON object, which then can be used by a JavaScript in order to inject the title information into a website. The only technologies that can here be used is web technologies such as XHTML and CSS.

examples of rich set JSF components

I need good examples of UI components I can integrate in a web application that uses JSF.

Embedding customized web fonts using CSS and @font-face

To ensure the best cross-browser support it is necessary to convert a font file (usually in OTF or TTF) to OTF, TTF, EOT, WOFF and SVG files. This can be done with e.g. Font2Web or Font Squirrel .

The next step is writing the CSS. In the example below the font Atype 1 is embedded. /fonts/Atype1.[extension] denotes the relative path to the file:
@font-face {
font-family: 'Atype1';
src: url('/fonts/Atype1.eot');
src: url('/fonts/Atype1.eot?#iefix') format('eot'),
url('/fonts/Atype1.svg') format('svg'),
url('/fonts/Atype1.woff') format('woff'),
url('/fonts/Atype1.ttf') format('truetype');
font-weight: normal;
font-style: normal;

Now the font can be used by referencing it:
h1 {
font-family: 'Atype1', Arial, sans-serif;

Creating a web audio player with GWT

Google Web Toolkit (GWT) is a set of tools that allows for creating JavaScript applications in Java. For a web application I was working on with GWT, I had to create an audiovisualization unit. For that purpose it was necessary to implement an audio player that would play/pause/resume/stop a sound file by request.

Effects for Web Pages

In the 1990s web pages were really boring because they offered only static content that did not interact with the user's actions. Nowadays, thanks to technologies like AJAX and Flash we have the possibility to enhance websites with stunning effects and interactivity. <strong>Challenge:</strong> <ul> <li>Find an easy way of adding stunning effects and interactivity to your web page.</li> </ul>

Using Piwik (open source web analytics)

Piwik is an Open Source alternative to Google Analytics.

  • You'll need access to web server (via shell or FTP) that supports at least PHP 5.1.3 an MySQL 4.1
  • Go to www.piwik.org and download the latest version of piwik (zip-file).
  • Unzip it and upload the files into a folder on your web server, e.g. yourserver.com/piwik
  • In your webbrowser, navigate to the URL you installed Piwik on.
  • Now you are guided through the installation process. Follow the instructions.
  • At the end of the installation process, Piwik will provide you a JavaScript code snippet which you will have to embed in the website you want to analyze. You can paste it into the body of footer-tag.


Change data sent using POST method of HTTP

The main HTTP methods used for sending data to the web server are GET and POST method. When using the <strong>GET method</strong>, the data is encoded directly in the requested URL, specifically to the query part of it. The query part starts with a question mark and consists of pairs key, value in a form <code>key=value</code>, the pairs are divided by an ampersand. For instance to inform the web server that a user wants to log off, quite often the URL of the form <code>index.php?action=logout</code> is used. Therefore it is very easy to change the sent data. The <strong>POST method</strong> uses the body of the HTTP message to store the data. The user has no direct possibility to change the data. We want to find an easy way to do so.

jQuery UI - autocomplete

jQuery is a powerful javascript liberary, which dramatically simplify the manipulation of elements on a web page and much more.
jQuery UI is a set of user interface objects implemented by jQuery. jQuery UI contains an autocomplete widged which I find very useful.

To implement the widget:

  1. Download the jQuery UI liberary from http://jqueryui.com/download
  2. Place the needed javascript files on your web server. These files are:
    • jquery.js
    • jquery-ui.js
    • jquery.ui.core.js
    • jquery.ui.widget.js
    • jquery.ui.autocomplete.js
  3. Add a script tag to the header of your page for each of these files, e.g.
    <script type="text/javascript" src="js/ui/jquery.ui.autocomplete.js"></script>
    Where js/ui is the relative path to the folder where your files from previous point are located.
  4. Add a javascript into you source code:

    $(function() {
    $( "#i1".autocomplete({
    source: "data.php",
    minLength: 1


    Where i1 is the ID of the input field you want to have autocomplete on. 'data.php' is the file responding to the queries of the widget.

E-Mail Filters

Many people get huge amounts of mail every day. It can be painful to sort, categorize and handle all those mails manually. Furthermore, it costs a lot of valuable time that you could spend elsewhere. However, there is an automatic approach that can save you a lot of this time: E-Mail Filtering <strong>Challenge:</strong> <ul><li>Choose an E-Mail client (either desktop client or web mail)</li> <li><strong>Create the following filters:</strong></li><li>a filter that automatically labels mails from tuwien.ac.at with "TU" or moves them to a folder called "TU"</li><li>a filter that sends unwanted mails (containing words of your choice) to the spam folder</li><li>a filter that marks e-mails containing the words "Knowledge Management" as important (e.g. by flagging or starring)</li></ul>


Subscribe to web