Über­sicht

<div class="tile" id="tile1">
<a href="<?php print url('node/2650'); ?>">
<span class="teaser"><span class="bold">Schon gewusst:</span> Handys<br />können Leben retten. Wie<br />das geht und mehr Tipps<br />zur cleveren Handynutzung<br />findest du hier!</span>
</a>
</div>
<div class="tile" id="tile2">
<a href="<?php print url('node/2657'); ?>">
<span class="teaser"><span class="bold">Einfach nur telefonieren<br />war doch gestern, oder?</span><br />Die Handys von heute<br />können viel mehr. Was<br />genau, erfährst du hier!</span>
</a>
</div>
<div class="tile" id="tile3">
<a href="<?php print url('node/2661'); ?>">
<span class="teaser"><span class="bold">Schriller Klingelton!</span><br />Und billig war er auch<br />nicht! Wo es schnell mal<br />teuer wird und wie du das<br />vermeiden kannst, das<br />erfährst du hier!</span>
</a>
</div>
<div class="tile" id="tile4">
<a href="<?php print url('node/2668'); ?>">
<span class="teaser"><span class="bold">Handystrahlen sind<br />gefährlich?!</span> Stimmt so<br />nicht! Denn wer sich gut<br />auskennt, muss sich auch<br />keine Sorgen machen.<br />Mehr dazu hier!</span>
</a>
</div>
<br class="clear" />

<style type="text/css">

body.page-handyguide #handyguide .content {
height: 562px;
margin: 0;
}

#tile1 a {
background: transparent url(/sites/default/files/handyguide/guide_category_01.jpg) 0 0 no-repeat;
}

#tile1 a:hover {
background: transparent url(/sites/default/files/handyguide/guide_category_01_over.jpg) 0 0 no-repeat;
}

#tile1 a .teaser {
width: 213px;
left: 52px;
top: 76px;
}

#tile2 a {
background: transparent url(/sites/default/files/handyguide/guide_category_02.jpg) 0 0 no-repeat;
}

#tile2 a:hover {
background: transparent url(/sites/default/files/handyguide/guide_category_02_over.jpg) 0 0 no-repeat;
}

#tile2 a .teaser {
width: 212px;
right: 64px;
top: 76px;
}

#tile3 a {
background: transparent url(/sites/default/files/handyguide/guide_category_03.jpg) 0 0 no-repeat;
}

#tile3 a:hover {
background: transparent url(/sites/default/files/handyguide/guide_category_03_over.jpg) 0 0 no-repeat;
}

#tile3 a .teaser {
width: 200px;
left: 64px;
top: 76px;
}

#tile4 a {
background: transparent url(/sites/default/files/handyguide/guide_category_04.jpg) 0 0 no-repeat;
}

#tile4 a:hover {
background: transparent url(/sites/default/files/handyguide/guide_category_04_over.jpg) 0 0 no-repeat;
}

#tile4 a .teaser {
width: 200px;
right: 64px;
top: 76px;
}

.tile {
float: left;
margin: 0;
overflow: hidden;
}

.tile a {
color: #006ab1;
display: block;
font-size: 18px;
width: 442px;
height: 277px;
position: relative;
text-decoration: none;
}

.tile a span.teaser {
display: none;
position: absolute;
text-align: center;
}

.tile a span.bold {
font-weight: bold;
}

body.page-handyguide #handyguide {
background-image: url(/sites/default/files/handyguide/bg_stage_02.jpg);
}

</style>

<script type="text/javascript">

$(function () {

// Verhalten der "Kacheln" auf iPad anpassen
if (-1 !== navigator.platform.indexOf('iPad')) {

$('.tile a').click(function (e) {

// Bereits zuvor "beruehrt"?
var touched = $(this).hasClass('touched');

// Kennzeichnung aller vorherigen "Beruehrungen" entfernen
$(this)
.parents('.content')
.find('.tile a')
.removeClass('touched');

// Nach zwei Beruehrungen hintereinander Ziel aufrufen
if (!touched) {
e.preventDefault();
$(this).addClass('touched');
}
});
}

$('.tile a').hover(function () {

$(this)
.find('.teaser')
.css('display', 'block');

}, function () {

$(this)
.find('.teaser')
.hide();
});
});

</script>

Deine Meinung

  • Ist super
    8
  • Ist lustig
    10
  • Ist okay
    12
  • Lässt mich staunen
    6
  • Macht mich traurig
    10
  • Macht mich wütend
    11