<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Hasodes</title>
	<atom:link href="http://blog.hasodes.com/?feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://blog.hasodes.com</link>
	<description></description>
	<lastBuildDate>Mon, 23 Nov 2009 18:21:48 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>BDD mit Cucumber</title>
		<link>http://blog.hasodes.com/?p=54</link>
		<comments>http://blog.hasodes.com/?p=54#comments</comments>
		<pubDate>Mon, 23 Nov 2009 18:11:59 +0000</pubDate>
		<dc:creator>Juri</dc:creator>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[bdd]]></category>
		<category><![CDATA[cucumber]]></category>
		<category><![CDATA[rails]]></category>
		<category><![CDATA[ruby]]></category>
		<category><![CDATA[webrat]]></category>

		<guid isPermaLink="false">http://blog.hasodes.com/?p=54</guid>
		<description><![CDATA[Ich bin über den RailsCast #155 von dem immer wieder großartigen Ryan Bates auf Cucumber aufmerksam geworden. Cucumber ist eine Bibliothek für Behavior-Driven-Development (BDD). BDD ist mit Test-Driven-Development (TDD) vergleichbar, nur werden hier nicht die Anforderungen an das System über Tests definiert, sondern über Szenarien, die noch näher am Benutzer bzw. Kunden sind.
Cucumber ermöglicht eine [...]]]></description>
			<content:encoded><![CDATA[<p>Ich bin über den RailsCast <a href="http://railscasts.com/episodes/155-beginning-with-cucumber">#155</a> von dem immer wieder großartigen Ryan Bates auf Cucumber aufmerksam geworden. <a href="http://cukes.info/">Cucumber</a> ist eine Bibliothek für Behavior-Driven-Development (BDD). BDD ist mit Test-Driven-Development (TDD) vergleichbar, nur werden hier nicht die Anforderungen an das System über Tests definiert, sondern über Szenarien, die noch näher am Benutzer bzw. Kunden sind.</p>
<p>Cucumber ermöglicht eine natürlichsprachliche Spezifikation der Software, die Szenarien sind sehr einfach zu schreiben und können gut auch von Kunden oder Benutzern verstanden werden.<br />
Gleichzeitig führt Cucumber den Programmierer durch den Entwicklungsprozeß und forciert eine stark fokussierte Entwicklung. Unnötige Komplexitäten können so gut vermieden werden, ganz nach dem Motto <a href="http://en.wikipedia.org/wiki/You_ain%27t_gonna_need_it">&#8220;You ain&#8217;t gonna need it&#8221;.</a></p>
<p>Rails-Anwendungen können sehr gut mit <a href="http://github.com/brynary/webrat">Webrat</a>, einem headless Browser, getestet werden. Da ich im Moment an einer REST API bastle und die bei Webrat mitgelieferten Steps, das sind die einzelnen Schritte die nach und nach von Cucumber ausgeführt werden, das nicht unterstützen, hier einfache Restful Steps die auch auf Webrat basieren.</p>
<p><script src="http://gist.github.com/241230.js?file=restful_steps.rb"></script></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.hasodes.com/?feed=rss2&amp;p=54</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Interfaces mit JUnit 4.x testen</title>
		<link>http://blog.hasodes.com/?p=42</link>
		<comments>http://blog.hasodes.com/?p=42#comments</comments>
		<pubDate>Mon, 21 Sep 2009 19:07:55 +0000</pubDate>
		<dc:creator>Juri</dc:creator>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[JUnit]]></category>
		<category><![CDATA[Testing]]></category>

		<guid isPermaLink="false">http://blog.hasodes.com/?p=42</guid>
		<description><![CDATA[Mit Unit-Tests lassen sich die Implementierungen eines Interfaces nicht ohne weiteres testen.
Natürlich ist es möglich für jede Implementierung einen extra Testcase zu schreiben: Aber entweder man testet speziell die Implementierung und macht damit das Interface überflüssig oder man dupliziert den Testcase per copy/paste. Letzteres würde aber dem empfehlenswerten DRY Prinzip arg widersprechen.
Mit JUnit 4.x gibt [...]]]></description>
			<content:encoded><![CDATA[<p>Mit Unit-Tests lassen sich die Implementierungen eines Interfaces nicht ohne weiteres testen.</p>
<p>Natürlich ist es möglich für jede Implementierung einen extra Testcase zu schreiben: Aber entweder man testet speziell die Implementierung und macht damit das Interface überflüssig oder man dupliziert den Testcase per copy/paste. Letzteres würde aber dem empfehlenswerten <a href="http://en.wikipedia.org/wiki/Don%27t_repeat_yourself">DRY</a> Prinzip arg widersprechen.</p>
<p>Mit JUnit 4.x gibt es aber parametrisierte Testcases, die es relativ einfach ermöglichen mehrere Implementierungen eines Interfaces auf einmal zu testen:</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// We run this test parameterized</span>
@RunWith<span style="color: #009900;">&#40;</span>value <span style="color: #339933;">=</span> Parameterized.<span style="color: #000000; font-weight: bold;">class</span><span style="color: #009900;">&#41;</span>
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> IntafaceTest <span style="color: #009900;">&#123;</span>
&nbsp;
    @Parameters
    <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">static</span> <span style="color: #003399;">Collection</span> implementations<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #666666; font-style: italic;">// For each test run the implementation is injected</span>
        <span style="color: #003399;">Object</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> data <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">Object</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#123;</span>
            <span style="color: #009900;">&#123;</span>IntafaceImplA.<span style="color: #000000; font-weight: bold;">class</span>.<span style="color: #006633;">getCanonicalName</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span>,
            <span style="color: #009900;">&#123;</span>IntafaceImplB.<span style="color: #000000; font-weight: bold;">class</span>.<span style="color: #006633;">getCanonicalName</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
        <span style="color: #000000; font-weight: bold;">return</span> <span style="color: #003399;">Arrays</span>.<span style="color: #006633;">asList</span><span style="color: #009900;">&#40;</span>data<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000000; font-weight: bold;">Class</span> _implName<span style="color: #339933;">;</span>
    <span style="color: #000000; font-weight: bold;">private</span> Intaface _sut<span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000000; font-weight: bold;">public</span> IntafaceTest<span style="color: #009900;">&#40;</span><span style="color: #003399;">String</span> implName<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">try</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000000; font-weight: bold;">this</span>._implName <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">Class</span>.<span style="color: #006633;">forName</span><span style="color: #009900;">&#40;</span>implName<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">catch</span> <span style="color: #009900;">&#40;</span><span style="color: #003399;">ClassNotFoundException</span> e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000000; font-weight: bold;">throw</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">RuntimeException</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    @Before
    <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> setUp<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">throws</span> <span style="color: #003399;">InstantiationException</span>, <span style="color: #003399;">IllegalAccessException</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #666666; font-style: italic;">// The implementation is instanciated</span>
        _sut <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>Intaface<span style="color: #009900;">&#41;</span> _implName.<span style="color: #006633;">newInstance</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    @Test
    <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> test1<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">assert</span><span style="color: #009900;">&#40;</span>_sut.<span style="color: #006633;">foo</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://blog.hasodes.com/?feed=rss2&amp;p=42</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Preview Screenshots als PNG</title>
		<link>http://blog.hasodes.com/?p=32</link>
		<comments>http://blog.hasodes.com/?p=32#comments</comments>
		<pubDate>Wed, 26 Aug 2009 09:54:50 +0000</pubDate>
		<dc:creator>Juri</dc:creator>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[macos]]></category>
		<category><![CDATA[plist]]></category>
		<category><![CDATA[Preview.app]]></category>
		<category><![CDATA[screenshot]]></category>

		<guid isPermaLink="false">http://blog.hasodes.com/?p=32</guid>
		<description><![CDATA[Ich benutze Preview.app auf dem MacOS (Leopard) um Screenshots zu machen. Das funktioniert wunderbar. Allerdings stört mich, dass die Screenshot als TIFF abgelegt werden.

defaults write com.apple.Preview Preview -dict-add
PVImageScreenCaptureFileFormat "public.png"

(Den Zeilenumbruch rausnehmen, die Zeile in der kompletten Länge sprengt leider das Layout)
Diese Zeile im Terminal bei geschlossenem Preview.app sorgt dafür, dass PNG verwendet wird. Alternativ kann [...]]]></description>
			<content:encoded><![CDATA[<p>Ich benutze Preview.app auf dem MacOS (Leopard) um Screenshots zu machen. Das funktioniert wunderbar. Allerdings stört mich, dass die Screenshot als TIFF abgelegt werden.</p>
<pre>
defaults write com.apple.Preview Preview -dict-add
PVImageScreenCaptureFileFormat "public.png"
</pre>
<p>(Den Zeilenumbruch rausnehmen, die Zeile in der kompletten Länge sprengt leider das Layout)</p>
<p>Diese Zeile im Terminal bei geschlossenem Preview.app sorgt dafür, dass PNG verwendet wird. Alternativ kann &#8220;public.png&#8221; durch &#8220;public.jpeg&#8221; ersetzt werden.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.hasodes.com/?feed=rss2&amp;p=32</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Einfache Diskussionsthreads</title>
		<link>http://blog.hasodes.com/?p=28</link>
		<comments>http://blog.hasodes.com/?p=28#comments</comments>
		<pubDate>Sun, 23 Aug 2009 14:00:51 +0000</pubDate>
		<dc:creator>Juri</dc:creator>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[discuss]]></category>
		<category><![CDATA[projects]]></category>
		<category><![CDATA[rails]]></category>

		<guid isPermaLink="false">http://blog.hasodes.com/?p=28</guid>
		<description><![CDATA[Es kommt ab und an vor, dass ich mich mit kleinen Gruppen von Leuten auf ein bestimmtes Vorgehen einigen möchte. Auf der Arbeit wird das dann meistens per Email gemacht. Jemand schreibt einen Vorschlag an alle wie vorgegangen werden soll und dann kommt es zu einer Diskussion.
Allerdings geht meistens nach einer gewissen Zeit der Überblick [...]]]></description>
			<content:encoded><![CDATA[<p>Es kommt ab und an vor, dass ich mich mit kleinen Gruppen von Leuten auf ein bestimmtes Vorgehen einigen möchte. Auf der Arbeit wird das dann meistens per Email gemacht. Jemand schreibt einen Vorschlag an alle wie vorgegangen werden soll und dann kommt es zu einer Diskussion.<br />
Allerdings geht meistens nach einer gewissen Zeit der Überblick verloren, wer was vorgeschlagen hat und wer welchem Vorschlag zugestimmt hat.</p>
<p>Um das zu vereinfachen habe ich ein kleines Projekt gestartet: <a href="http://discuss.hasodes.com">Discuss!</a></p>
<p>Dabei wird nicht verlangt sich einzuloggen, ein neuer Diskussionthread kann sehr schnell erstellt und mit anderen Leuten geteilt werden. </p>
]]></content:encoded>
			<wfw:commentRss>http://blog.hasodes.com/?feed=rss2&amp;p=28</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Ein jQuery Plugin für Image-Overlays</title>
		<link>http://blog.hasodes.com/?p=5</link>
		<comments>http://blog.hasodes.com/?p=5#comments</comments>
		<pubDate>Mon, 01 Jun 2009 12:15:41 +0000</pubDate>
		<dc:creator>Juri</dc:creator>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Image-Overlay]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Plugin]]></category>

		<guid isPermaLink="false">http://blog.hasodes.com/?p=5</guid>
		<description><![CDATA[
Gut ist es, wenn Bilder auf Webseiten einen Titel haben. Dafür gibt innerhalb des img Tags das alt Attribut, das als Tooltip angezeigt wird. Das bohre ich etwas mit einem selbstgeschriebenen jQuery Plugin auf.


Dabei wird jedes über den jQuery Selektor ausgewählte Bild durch ein gleich großes div ersetzt und diesem div dann als hintergrundbild zugewiesen. [...]]]></description>
			<content:encoded><![CDATA[<p>
Gut ist es, wenn Bilder auf Webseiten einen Titel haben. Dafür gibt innerhalb des <em>img</em> Tags das <em>alt</em> Attribut, das als Tooltip angezeigt wird. Das bohre ich etwas mit einem selbstgeschriebenen jQuery Plugin auf.
</p>
<p>
Dabei wird jedes über den jQuery Selektor ausgewählte Bild durch ein gleich großes <em>div</em> ersetzt und diesem <em>div</em> dann als hintergrundbild zugewiesen. Zusätzlich wird ein weiteres div eingefügt, in dem dann der Text aus dem <em>alt</em> Attribut gerendert werden kann. Vorteilhaft an diesem Ansatz ist, dass dabei der Tooltip nicht angezeigt wird. Ist allerdings Javascript ausgeschaltet, funktioniert der Tooltip.
</p>
<p>
Hier ein Beispiel: Ein Bild mit einem Image-Overlay, das angezeigt wird, wenn der Benutzer mit der Maus über dem Bild ist.
</p>
<p><img class="example_img" src="http://blog.hasodes.com/wp-content/uploads/2009/06/_overlay.png" alt="Das ist ein Image-Overlay (Foto von sebastiankippe)." width="595" height="300"/></p>
<p>
Das Plugin wird ganz normal über einem jQuery Objekt aufgerufen nachdem der DOM Baum fertig ist. Zwei Optionen sind möglich, die Positionierung des Overlays auf dem Bild und die Angabe einer eigenen CSS Klasse.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;img&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">imgoverlaytitle</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #006600; font-style: italic;">// With parameters ...</span>
  <span style="color: #006600; font-style: italic;">// $(&quot;img&quot;).imgoverlaytitle(</span>
    <span style="color: #006600; font-style: italic;">//{ vertical_align : &quot;top&quot;, </span>
    <span style="color: #006600; font-style: italic;">//overlay_class : &quot;my_class&quot; });</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

</p>
<p>
Das Overlay kann per CSS nach Wunsch gestylt werden. Bei dem Beispiel wurden folgende Stylesheets verwendet:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.img_overlay</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#161616</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#FFFFFF</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">3px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#161616</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

</p>
<p>
Hier ist der Code des Plugins: (Gibt es auch als <a href="http://blog.hasodes.com/wp-content/uploads/2009/06/imgoverlaytitle.jquery.js">Download</a>)</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// imgoverlaytitle.jquery.js</span>
<span style="color: #006600; font-style: italic;">// Juri Glass</span>
&nbsp;
<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
    $.<span style="color: #660066;">fn</span>.<span style="color: #660066;">imgoverlaytitle</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>options<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">var</span> opts <span style="color: #339933;">=</span> $.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span>$.<span style="color: #660066;">fn</span>.<span style="color: #660066;">imgoverlaytitle</span>.<span style="color: #660066;">defaults</span><span style="color: #339933;">,</span> options<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #003366; font-weight: bold;">var</span> $this <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">// Creating the overlay</span>
            <span style="color: #003366; font-weight: bold;">var</span> overlay <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;div class=&quot;'</span> <span style="color: #339933;">+</span> opts.<span style="color: #660066;">overlay_class</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot;&gt;'</span> 
&nbsp;
                <span style="color: #006600; font-style: italic;">// The text from the alt attribute                </span>
                <span style="color: #339933;">+</span> $this.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'alt'</span><span style="color: #009900;">&#41;</span> 
                <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">// Creating a replacement div with the image as background</span>
            <span style="color: #006600; font-style: italic;">// and the image dimensions.</span>
            <span style="color: #003366; font-weight: bold;">var</span> replacement <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;div/&gt;'</span><span style="color: #009900;">&#41;</span>
                .<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'background-image'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'url('</span> <span style="color: #339933;">+</span> $this.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'src'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">')'</span><span style="color: #009900;">&#41;</span>
                .<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;height&quot;</span><span style="color: #339933;">,</span> $this.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;height&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
                .<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;width&quot;</span><span style="color: #339933;">,</span> $this.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;width&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
&nbsp;
                <span style="color: #006600; font-style: italic;">// The position of the overlay</span>
                .<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;display&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;table-cell&quot;</span><span style="color: #009900;">&#41;</span>
                .<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;vertical-align&quot;</span><span style="color: #339933;">,</span> opts.<span style="color: #660066;">vertical_align</span><span style="color: #009900;">&#41;</span>
&nbsp;
                <span style="color: #006600; font-style: italic;">// The insertion of the overlay</span>
                .<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span>overlay<span style="color: #009900;">&#41;</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">// The actual replacement</span>
            $this.<span style="color: #660066;">replaceWith</span><span style="color: #009900;">&#40;</span>replacement<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">// Enable the mouseover</span>
            replacement.<span style="color: #660066;">hover</span><span style="color: #009900;">&#40;</span>
                <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> overlay.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
                <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> overlay.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
                <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
    $.<span style="color: #660066;">fn</span>.<span style="color: #660066;">imgoverlaytitle</span>.<span style="color: #660066;">defaults</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
        vertical_align <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;bottom&quot;</span><span style="color: #339933;">,</span>
        overlay_class <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;img_overlay&quot;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p><script src="http://blog.hasodes.com/wp-content/uploads/2009/06/imgoverlaytitle.jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" charset="utf-8">
$(function() {
  $(".example_img").imgoverlaytitle();
});</script><br />
<style type="text/css">
.img_overlay {
    display: none;
    color: #161616;
    background-color: #FFFFFF;
    padding: 3px;
    border: 1px solid #161616;
}
</style></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.hasodes.com/?feed=rss2&amp;p=5</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
