[JS] Mouseover (Screenshot) IE en FF fouten - Softwareontwikkeling

vrijdag 13 oktober 2006 13:39

Acties:

Verwijderd

Topicstarter

Op www.spelstaat.nl gebruik ik een JS om een screenshot te laten zien van elk spel.
Nu gebruik ik het JS op een andere site zonder problemen.

Op spelstaat krijg ik echter in FF helemaal niks te zien en in IE doet hij het alleen goed als je van boven af komt. DWZ wanneer je eerst naar beneden scrolt en dan naar boven gaat dan komt de mouseover op een veel hogere plaats te staan.
Begrijpt iemand waar dit vandaan komt? Er wordt toch een absolute locatie aangegeven voor de screenshot?

(pagina is valid: http://validator.w3.org/c...%2Fwww.spelstaat.nl%2F%23)
Ik gebruik het volgende script:

code:

<!--
function toonplaatje(id)
{
  // Definieer variabelen
  var iMouseX = event.clientX;
  var iMouseY = event.clientY;
  var imgPlaatje = document.getElementById('plaatje');
  
  // Geef het plaatje weer op de plaats van de muiscursor
  imgPlaatje.style['left'] = iMouseX + 15 + 'px';
  imgPlaatje.style['top'] = iMouseY + 'px';
//  imgPlaatje.style['left'] = iMouseX;
//  imgPlaatje.style['top'] = iMouseY;

  imgPlaatje.style['visibility'] = 'visible';
  imgPlaatje.style['display'] = 'block';
  imgPlaatje.src = '/thumbs/' + id;
}
function verbergplaatje()
{
  // Definieer variabelen
  var imgPlaatje = document.getElementById('plaatje');
  
  // Verberg het plaatje
  imgPlaatje.style['display'] = 'none';
}
//-->

[ Voor 3% gewijzigd door Verwijderd op 13-10-2006 13:50 ]

vrijdag 13 oktober 2006 13:45

Acties:

crisp

Devver

Pixelated

Firefox kent geen global event-object (foutmelding had je kunnen zien in je javascript console)
En verder zal je rekening moeten houden met scroll-offset van je body

[ Voor 20% gewijzigd door crisp op 13-10-2006 13:46 ]

Intentionally left blank

vrijdag 13 oktober 2006 14:04

Acties:

Verwijderd

Topicstarter

Bedankt.

Weet je misschien een goed script hiervoor dat wel werkt in FF?

Ik gebruik nu onderstaand JS, nu versrpingt de popup in IE naar boven als ik van beneden naar boven scroll en in FF staat hij altijd link bovenin gecentreerd. Doe ik het helemaal fout? Of zie ik iets heel kleins over het hoofd

In de css gebruik ik:

code:

1	#layer {position:absolute; visibility:hidden;z-index:200;}

code:

margeX=35;
margeY= 30; 
var old,skn,iex=(document.all),yyy=-1000;
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
if (ns4) skn=document.layer
else if (ns6) skn=document.getElementById("layer").style
else if (ie4) skn=document.all.layer.style
if (ns4) document.captureEvents(Event.MOUSEMOVE);

//-->

[ Voor 155% gewijzigd door Verwijderd op 01-03-2007 15:52 ]

woensdag 25 oktober 2006 09:24

Acties:

Verwijderd

Topicstarter

Iemand vertelde me dat het beter is om de tabel die in de mouseover wordt opgemaakt, uit de database te halen en mbv php weer te geven. Kan iemand dit bevestigen? Ik zie het voordeel daarvan niet voor de positie bepaling.

woensdag 25 oktober 2006 10:28

Acties:

reddevil

Ik snap ongeveer wat je wilt, maar... (ik heb zoiets al is opgelost totaal anders):
wil je die mouseovers direct onder je muis of gewoon onder je link?

Als je het eigenlijk onder je link wilt hebben, dan heb ik nog wel een aantal js functies liggen die dat goed doen op IE/NS/FF/Safari.

woensdag 25 oktober 2006 13:43

Acties:

Verwijderd

Topicstarter

ik dacht eerst dat het aan de html van www.spelstaat.nl lag, dus heb ik als test alles op www.spelletjesplek.nl/index.php geplaatst.
Het effect blijft hetzelfde, terwijl deze site helemaal in tabellen is opgemaakt.

- edit -
Het probleem in FF blijkt opgelost nadat ik het doctype heb veranderd van:

code:

1 2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

naar:

code:

1 2	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

echter blijft het probleem in IE bestaan, na scrollen veranderd de positie.
www.spelletjesplek.nl/index.php

- edit 2 -
@Reddevil, je mag me wel aan msn toevoegen, ik kom hier echt niet meer uit...

Goud

ik heb het gevonden:

code:

function get_mouse(e){
var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft;
skn.left=x+margeX;
var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop;
skn.top=y+yyy;
}

veranderd in:

code:

function get_mouse(e){
var x=(ns4||ns6)?e.pageX:event.x+document.documentElement.scrollLeft;
skn.left=x+margeX;
var y=(ns4||ns6)?e.pageY:event.y+document.documentElement.scrollTop;
skn.top=y+yyy;
}

[ Voor 69% gewijzigd door Verwijderd op 25-10-2006 17:18 ]

donderdag 26 oktober 2006 08:08

Acties:

reddevil

mjah nu je het toch al hebt, hoef niet meer he

maar goed nog even 3 handige functies:

JavaScript:

/**
 * Returns the element in a document which name is the input parameter
 */
function getElement(name)
{
    if(document.layers)
        return document.layers[name];

    else if(document.all)
        return document.all[name];

    else if(document.getElementById)
    {
        return document.getElementById(name);
    }
}

/**
 * Gets the x-coordinate for an object
 */
function getLeft(obj)
{
    var curleft = 0;

    if (obj.offsetParent)
    {
        while (obj.offsetParent)
        {
            curleft += obj.offsetLeft;
            obj = obj.offsetParent;
        }
    }
    curleft += obj.offsetLeft;
    
    return curleft;
}

/**
 * Get the y-coordinate for an object
 */
function getTop(obj)
{
    var curtop = 0;

    if (obj.offsetParent)
    {
        while (obj.offsetParent)
        {
            curtop += obj.offsetTop;
            obj = obj.offsetParent;
        }
    }
    curtop += obj.offsetTop;

    return curtop;
}

gebruik ik altijd op eerder genoemde browsers