CSS Codes
CSS Layouts

<html>

<head>

<style type="text/css">

<!--



.kisser {

position:absolute;

top:0;
z-index: 1000;
left:0;

visibility:hidden;

}

-->

</style>



<script language="JavaScript1.2" type="text/JavaScript">

<!-- cloak



//Kissing trail- By dij8 (dij8@dij8.com)

//Modified by Dynamic Drive for bug fixes

//Visit http://www.dynamicdrive.com for this script



kisserCount = 15 //maximum number of images on screen at one time

curKisser = 0 //the last image DIV to be displayed (used for timer)

kissDelay = 1000 //duration images stay on screen (in milliseconds)

kissSpacer = 50 //distance to move mouse b4 next heart appears

theimage = "lips_small.gif" //the 1st image to be displayed

theimage2 = "small_heart.gif" //the 2nd image to be displayed





//Browser checking and syntax variables

var docLayers = (document.layers) ? true:false;

var docId = (document.getElementById) ? true:false;

var docAll = (document.all) ? true:false;

var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."

var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""

var stylebitK = (docLayers) ? "":".style"

var showbitK = (docLayers) ? "show":"visible"

var hidebitK = (docLayers) ? "hide":"hidden"

var ns6=document.getElementById&&!document.all

//Variables used in script

var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage

lastX = 0

lastY = 0

//Collection of functions to get mouse position and place the images

function doKisser(e) {



posX = getMouseXPos(e)

posY = getMouseYPos(e)

if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {

showKisser(posX,posY)

lastX = posX

lastY = posY

}

}

// Get the horizontal position of the mouse

function getMouseXPos(e) {

if (document.layers||ns6) {

return parseInt(e.pageX+10)

} else {

return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))

}

}

// Get the vartical position of the mouse

function getMouseYPos(e) {

if (document.layers||ns6) {

return parseInt(e.pageY)

} else {

return (parseInt(event.clientY) + parseInt(document.body.scrollTop))

}

}

//Place the image and start timer so that it disappears after a period of time

function showKisser(x,y) {

var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x

if (curKisser >= kisserCount) {curKisser = 0}
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK).left = processedx + 'px'

eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK).top = y + 'px'

eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")

if (eval("typeof(kissDelay" + curKisser + ")")=="number") {

eval("clearTimeout(kissDelay" + curKisser + ")")

}

eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")

curKisser += 1

}

//Make the image disappear

function hideKisser(knum) {

eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")

}



function kissbegin(){

//Let the browser know when the mouse moves

if (docLayers) {

document.captureEvents(Event.MOUSEMOVE)

document.onMouseMove = doKisser

} else {

document.onmousemove = doKisser

}

}

window.onload=kissbegin

// decloak -->

</script>

</head>

<body>

<script language="JavaScript" type="text/JavaScript">
<!-- cloak
// Add all DIV's of hearts
if (document.all||document.getElementById||document.layers){
for (k=0;k<kisserCount;k=k+2) {
document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>\n')
document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>\n')
}
}

// decloak -->
</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

</body>

</html>