Kako ozadje postane povezava – clickable background link

Kako ozadje postane povezava - clickable background link

Zadnje čase so pri različnih oglaševalskih akcijah vse popularnejša ozadja na katere je mogoče klikniti. Sliši se dokaj enostavno, ampak pri sami izvedbi se zgodba hitro zaplete.

Namreč povezavo je narediti precej težje, kot si mislimo. Obstaja več rešitev, najenostavnejša je, da naredimo ob vsaki strani razširljiva DIV polja na katera dodelimo povezavo. Veliko bolj elegantna rešitev pa je, da imamo eno DIV polje, ki povezava nanj pa umestimo celotno našo stran.

Problem slednje rešitve je, da postane celotna vsebina povezava, se pravi kar koli kliknemo (besedilo, ozadja, …) se odpre povezava. Zato si moramo pomagati z Javascript kodo, ki preverja kam smo kliknili. Primer rešitve si lahko ogledate tu – ozadje povezava – background link.

Primer kode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kako ozadje postane povezava - clickable background link</title>
<style type="text/css">
<!--
html,body {
height:100%;
}
#fsbg {
background-color:#a3a3a2;
width:100%;
height:100%;
display:block;
border:0;
margin:0;
padding:0;
position:absolute;
top:0;
left:0;
}
#ccdiv {
background-color:#fff;
background:#FFF;
position:static;
width:850px;
margin:0 auto;
padding:30px;
}
-->
</style>
<script type="text/javascript">
function handleClick(ev) {
ev = ev || window.event;
if(ev.stopPropagation) {
ev.stopPropagation();
} else if('cancelBubble' in ev) {
ev.cancelBubble = true;
}
}
</script>

</head>
<body>
<div id="fsbg" style="cursor: pointer;" onclick="window.open('https://www.pomagalnik.com')">
<div id="ccdiv" style="cursor:auto;" onclick="handleClick(event);">
<h1>Kako ozadje postane povezava - clickable background link</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</body>
</html>

Komentiraj


*


Sorodne objave