Script om thumbnail te tonen bij mouseover link

**Koen Buddel** · 20-05-2006, 22:26

Ik ben opzoek naar een javascript wat je wel eens ziet op gamesites, je beweegt met je muis over een link en er verschijnt naast de cursor/muis een thumbnail van het spel.

Weet iemand waar ik zo een script kan vinden?

**Edwin R** · 20-05-2006, 22:44

Klik is met rechts op een pagina waar je dat ziet en dan bron weergeven...
Hint, er zit een script in de header, en bij elke link...

**Martijn Dwars** · 21-05-2006, 07:34

Dit wordt meestal met javascript gedaan. Tenmisnte, volgens mij kan het alleen met JS.
De link geef je een onmouseover en een onmouseout. Ik zal even een stukje code posten.

Zo zal een link eruit zien:

PHP Code:


<a href="game.php?id=1" ONMOUSEOVER="popup('<img src=gameimages/1.jpg>','0')"; ONMOUSEOUT="kill()">Play Game</a><br>

Je ziet, je gebruikt de 2 attributen (ONMOUSEOVER & ONMOUSEOUT) en 2 functies (popup & kill).
Hieronder de code van de functies:

PHP Code:


Xoffset= 16; // modify these values to ...
Yoffset= 16; // change the popup position.

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.dek
else if (ns6)
skn=document.getElementById("dek").style
else if (ie4)
skn=document.all.dek.style
if(ns4)document.captureEvents(Event.MOUSEMOVE);
else{
skn.visibility="visible"
skn.display="none"
}
document.onmousemove=get_mouse;

function popup(msg,bak){
var content="<TABLE WIDTH=80 BORDER=1 border=000000  CELLPADDING=0 CELLSPACING=0><TD ALIGN=center><FONT COLOR=black SIZE=2>"+msg+"</FONT></TD></TABLE>";
yyy=Yoffset;
if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible"}
if(ns6){document.getElementById("dek").innerHTML=content;skn.display=''}
if(ie4){document.all("dek").innerHTML=content;skn.display=''}
}

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

function kill(){
yyy=-1000;
if(ns4){skn.visibility="hidden";}
else if (ns6||ie4)
skn.display="none"
}

En nu moet dit nog in de body staan:

PHP Code:


<DIV ID="dek"></DIV>

Ik heb het zelf ook maar ergens vandaan geplukt ;)
Credits gaan dus totaal naar de echte maker.

Edit:
Nog een kleine toevoeging, ik raad je aan javascript extern te laden.
Dus niet deze grote code in je <head> te plakken.

**Edwin R** · 21-05-2006, 07:36

Ik ben opzoek naar een javascript wat je wel eens ziet op gamesites, j

@Martijn: Dat wist hij al geloof ik

**Koen Buddel** · 21-05-2006, 11:04

Bedankt voor de tips.
Het script van Martijn ben ik al eens tegen gekomen, maar als de pagina daar naar beneden gescrollt is dan verschijnt de thumbnail ver boven de link. Weet iemand hier een oplossing voor?

**Carlier B.** · 21-05-2006, 13:28

Waarom maak je deze thumbnails niet aan met css?
(ja ik weet het, ik post dit in een client-scripting topic :-p)
Dit scheelt namelijk wat qua compatibiliteit/bandbreedte/scheiding structuur & opmaak/zoekmachinevriendelijkheid.

HTML

Code:

 <ul>
<li><a href="pagina1.html" title="Ga naar pagina1">Tekst1<span class="afb1"></span></a></li>
<li><a href="pagina2.html" title="Ga naar pagina2">Tekst2<span class="afb2"></span></a></li>
</ul>

CSS

Code:

ul a {position:relative}
ul a span {visibility:hidden; position:absolute; width:200px; height:150px; left:40px; top:-180px; z-index:1000}
/* Met bovenstaande width en height bepaal je de dimensies van de popup-afbeelding, met top en left de positie tov de link zelf */
ul a:hover {background:#fff; z-index:1000}
ul a:hover span {visibility:visible}
span.afb1 {background:url(afb1.gif)}
span.afb2 {background:url(afb2.gif)}

**Martijn Dwars** · 21-05-2006, 16:36

Origineel gepost door Edwin Rasser

@Martijn: Dat wist hij al geloof ik

Dat wist hij niet.. Anders had hij er niet om gevraagd ;)
Tenminste, ik post de code van het script... En als hij
dat niet had gehad was dit topic er niet geweest!

Origineel gepost door Koen Buddel

Bedankt voor de tips.
Het script van Martijn ben ik al eens tegen gekomen, maar als de pagina daar naar beneden gescrollt is dan verschijnt de thumbnail ver boven de link. Weet iemand hier een oplossing voor?

Ik weet niet welke browser jij gebruikt? Maar bij mij met FireFox én Internet Explorer doen het gewoon zoals het hoort. Dus ik weet niet waar jij het geval vandaan haalt dat het plaatje dan ver boven de link komt?

**Edwin R** · 21-05-2006, 17:45

Dat wist hij niet.. Anders had hij er niet om gevraagd ;)
Tenminste, ik post de code van het script... En als hij
dat niet had gehad was dit topic er niet geweest!

Ik wil niet al te off topic gaan, maar mijn post kwam na:

Dit wordt meestal met javascript gedaan. Tenmisnte, volgens mij kan het alleen met JS.
De link geef je een onmouseover en een onmouseout. Ik zal even een stukje code posten.

Deze heb je bewerkt toen mijn post er al stond, de code wist hij inderdaad niet, maar dat wat ik aanhaalde (in mijn citaat) wel;)

**Martijn Dwars** · 21-05-2006, 17:50

Origineel gepost door Edwin Rasser

Ik wil niet al te off topic gaan, maar mijn post kwam na:

Deze heb je bewerkt toen mijn post er al stond, de code wist hij inderdaad niet, maar dat wat ik aanhaalde (in mijn citaat) wel;)

Oh op die manier. Sorry dan ;)
Ik zei namelijk wel van dat ik de code zou posten, maar die moest ik even zoeken.

**Koen Buddel** · 21-05-2006, 21:58

Ik ben er inmiddels achter waarom het niet werkte, ik had xhtml als doctype staan, dan werkt het dus niet.

Bedankt voor alle hulp.

Script om thumbnail te tonen bij mouseover link