veit > internet.* > internet.www.ontwerp

 #1  
14.05.2004, 13:58
Eeltje de Vries
Het volgende stukje Javascript laat een plaatje (en een tekst) meebewegen
met de cursor:

<SCRIPT language=javascript>
<!--
function captPosIE(){
logo.style.left = event.clientX + document.body.scrollLeft - 26;
logo.style.top = event.clientY + document.body.scrollTop + 25;
}
function captPosNS(pos){
document.layers["logo"].left = pos.x-26;
document.layers["logo"].top = pos.y+25;
}
if(document.all)
document.onmousemove = captPosIE
else if(document.layers){
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove=captPosNS;
}
//-->
</SCRIPT>

In lotus.css staat nog:

#logo {
HEIGHT: 35px; LEFT: 349px; POSITION: absolute; TOP: 377px; VISIB
ILITY: visible; WIDTH: 99px; Z-INDEX: 1
}

Dit werkt goed in IE 6, Konqueror, Opera 7, maar helaas niet in Mozilla (of
Firebird) en naar ik meen ook in (sommige?) Netscapeversies.

Is het mogelijk om dit ook te laten werken in Mozilla?
 #2  
14.05.2004, 15:08
Warden Dave
"Eeltje de Vries" <geen> wrote:

> Het volgende stukje Javascript laat een plaatje (en een tekst) meebewegen
> met de cursor:


Ieks!

[..]
> }
> //-->
> </SCRIPT>


Dat is vrij ouderwets IE4/NS4 script.

<knip>
> Dit werkt goed in IE 6, Konqueror, Opera 7, maar helaas niet in Mozilla (of
> Firebird) en naar ik meen ook in (sommige?) Netscapeversies.
> Is het mogelijk om dit ook te laten werken in Mozilla?


Dat kan, Eeltje. Ik geef een volledig nieuw voorbeeld, maar denk niet dat ik
daarmee dat 'aan de muiscursor hangen' ook maar enigzins goedkeur ;) :

<html><head>
<title>Akelig Gemuis!</title>

<style type="text/css">

#logo {
position: absolute;
z-index: 99;
left: -100px;
top: -100px;
}

</style>

<script type='text/javascript'>
<!--

var logo_X_offset = 15;
var logo_Y_offset = 10;

var html;

onload = function() {
if (window.event) {
if (document.documentElement)
html = document.documentElement;
else
html = new Object();
if (typeof(html.scrollTop)!='number') {
html.offsetLeft = 0;
html.offsetTop = 0;
}
}
if (!document.documentElement && (window.opera || document.all)) {
setElPos = function(el, x, y) { el.style.pixelLeft=x; el.style.pixelTop=y; }
}
else if (document.getElementById) {
setElPos = function(el, x, y) { el.style.left=x+'px'; el.style.top=y+'px'; }
}
else if (document.layers) {
setElPos = function(el, x, y) { el.moveTo(x,y); }
}
else {
setElPos = function() { }
}
}

function getElObj(id) {
return document.getElementById ?
document.getElementById(id) : document.all ?
document.all[id] : document.layers ?
document.layers[id] : null;
}

function msHandler(e) {
var x, y;
if (window.event) {
x = window.event.clientX;
y = window.event.clientY;
if (window.external) {
x += Math.max(html.scrollLeft, document.body.scrollLeft);
y += Math.max(html.scrollTop , document.body.scrollTop );
}
}
else {
x = e.pageX;
y = e.pageY;
}
setElPos(getElObj('logo'), x+logo_X_offset, y+logo_Y_offset);
}

document.onmousemove = function(e) {
window.onmousemove=null;
document.onmousemove=msHandler;
msHandler(e);
}

window.onmousemove = function(e) {
document.onmousemove=null;
window.onmousemove=msHandler;
msHandler(e);
}

if (document.layers)
window.captureEvents(Event.MOUSEMOVE);

//-->
</script>

</head>

<body><div id='logo'>Muizen maar!</div></body></html>

Ik kan even - door onderhoud aan het computerpark - even niet testen in 1
hele serie vreemde browsers, maar als ik me ergens vertikt heb hoor ik het
wel. (btw: In die DIV kun je dus zetten wat je wilt. Met variabelen
' logo_X_offset ' en 'logo_Y_offset ' kun je de afstand tot de muiscursor
instellen.)

WD
Soortgelijke onderwerpen