Personligt ville jeg aldrig vælge at lade popup'en følge musen. For mig ligner det noget, der ikke er meningen! Anyway, hvis du kan lide det ... =)
Du kunne gøre noget i stil med:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Bureauet for KLAR Kommunikation - Referencer</title>
<link href="
http://www.klarkommunikation.net/css/main.css" rel="stylesheet" type="text/css">
<link href="
http://www.klarkommunikation.net/css/referencer.css" rel="stylesheet" type="text/css">
<style type="text/css">
.pop-up {
position: absolute;
width: 250px;
left: 0;
top: 0;
padding: 15px;
background: #000;
display: none;
}
</style>
<script type="text/javascript">
var elmActPop = null;
function showPop(e) {
var elmSrc = e.target||e.srcElement,
sTag = elmSrc.nodeName.toLowerCase();
if (sTag=="img") elmSrc = elmSrc.parentNode
else if (sTag!="a") return;
elmActPop = document.getElementById("pop_"+elmSrc.getAttribute("id").split("lnk_")[1]);
var css = elmActPop.style,
elmDoc = document.documentElement;
css.left = ((e.clientX+10)+elmDoc.scrollLeft) + "px";
css.top = ((e.clientY+10)+elmDoc.scrollTop) + "px";
css.display = "block";
}
function hidePop(e) {
var elmSrc = e.target||e.srcElement,
sTag = elmSrc.nodeName.toLowerCase();
if (sTag!="a" && sTag!="img") return;
elmActPop.style.display = "none";
elmActPop = null;
}
function mMove(e) {
if (!elmActPop) return;
var css = elmActPop.style,
elmDoc = document.documentElement;
e = e ? e : event;
css.left = ((e.clientX-125)+elmDoc.scrollLeft) + "px";
css.top = ((e.clientY+15)+elmDoc.scrollTop) + "px";
}
if (document.addEventListener) document.addEventListener("mousemove", mMove, false);
else document.attachEvent("onmousemove", mMove);
</script>
</head>
<body>
<div>
<iframe class="menu" src="
http://www.klarkommunikation.net/!menu-hvid.htm" frameborder="0" scrolling="No" allowtransparency="true"></iframe>
</div>
<div class="references-wrap" onmouseover="showPop(event)" onmouseout="hidePop(event)">
<div class="references-pics">
<a id="lnk_0" href="#" class="trigger"><img alt="" src="
http://www.klarkommunikation.net/billeder/referencer/astellas.png"></a>
</div>
<div class="references-pics">
<a id="lnk_1" href="#" class="trigger"><img alt="" src="
http://www.klarkommunikation.net/billeder/referencer/sv-michelsen.png"></a>
</div>
<div class="references-pics">
<a id="lnk_2" href="#" class="trigger"><img alt="" src="
http://www.klarkommunikation.net/billeder/referencer/bitte-kai-rand.png"></a>
</div>
<div class="references-pics">
<a id="lnk_3" href="#" class="trigger"><img alt="" src="
http://www.klarkommunikation.net/billeder/referencer/alka.png"></a>
</div>
<div class="references-pics">
<a id="lnk_4" href="#" class="trigger"><img alt="" src="
http://www.klarkommunikation.net/billeder/referencer/polaris.png"></a>
</div>
</div>
<div id="pop_0" class="pop-up">
<p><strong>ASTELLAS</strong></p>
<p>I Lise Vestergård har vi en forlængelse af de kompetencer, vi ikke
selv besidder: Kreativitet, grafisk og kunstnerisk snilde samt en
genial idérigdom. Disse egenskaber og kompetencer har i høj grad
bidraget til, at Astellas har kunnet finde en ny, grafisk udtryksform,
som fremhæver vores identitet og brand på en inspirerende og kreativ
facon. Det er i høj grad Lises fortjeneste, at hun meget hurtigt
er i stand til at afkode os som kunde og leverer varen! Det er en
stor fornøjelse at have en så glad og autentisk personlighed i Lise
som vores samarbejdspartner.<br><br>
<em>Tina Kepka, HR Director, Astellas Pharma</em></p>
</div>
<div id="pop_1" class="pop-up">
<p><strong>SV. MICHELSEN</strong></p>
<p>Under udarbejdelse.</p>
</div>
<div id="pop_2" class="pop-up">
<p><strong>BITTE KAI RAND</strong></p>
<p>Under udarbejdelse.</p>
</div>
<div id="pop_3" class="pop-up">
<p><strong>ALKA</strong></p>
<p>Vi ønskede at illustrere Alkas arbejde med at være enkle både indadtil
og udadtil. Lise Vestergård har tidligere udstillet hos os og var
derfor det naturlige valg. Vi har fået indfriet vores forventninger
til en løsning, der var anderledes og flottere, end vi havde forestillet
os på forhånd. Lise har fanget kernen i vores forenklingsarbejde, og
vejen til det færdige resultat var både fleksibel og enkel.<br><br>
<em>John With, HR-partner, Alka Forsikring</em></p>
</div>
<div id="pop_4" class="pop-up">
<p><strong>POLARIS</strong></p>
<p>Lise helped us with valuable input in our work to refresh the way
we present ourselves externally. The cooperation has resulted in an
updated company presentation and a new presentation standard also
is being aligned with our homepage.<br><br>
<em>Martin Bang-Löwgren, Investment Manager, Polaris Private Equity</em></p>
</div>
</body>
</html>
Ny bruger
Nybegynder
Opret
Preview
