Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

[JS] onmouseover laat ´kleine vergroting´ zien..

Anoniem
h4xX0r
4 antwoorden
  • Wellicht een vraag die al vele malen langs is gekomen. (En in dat geval, excuses…).
    Op de site van bigstockphoto http://www.bigstockphoto.com krijg je, als je met de muis over een afbeelding heen gaat, leuke vergrotingen te zien. Ik heb al een tijdje zitten puzzelen hoe ze dit voor elkaar krijgen.
    In het script popup.js (zie verderop) wordt e.e.a. geactiveerd, terwijl in HTML (bijvoorbeeld) staat:
    [code:1:e1dd1e78db] <a id="href97759" href="/photo/view/97759?"><img id="97759" onMouseOver="imgHover(this);" onMouseOut="imgCancel(this);" border="0" style=" width: 110px; height: 73px; " alt="…" src="/thumb/small/97759.jpg"></a>
    [/code:1:e1dd1e78db]
    Het script doet het volgende:
    [code:1:e1dd1e78db]
    var timerT = false;

    function imgCancel(img) {
    clearTimeout(timerT);
    }

    function imgHover(img) {

    //clear prvious timers
    if(timerT) {
    clearTimeout(timerT);
    }

    var box = document.getElementById('imgbox' + img.id);
    if (! box) return;

    var pop = document.getElementById('popup');
    if (! pop) return;

    var popshadow = document.getElementById('popupshadow');
    var popimage = document.getElementById('popupimage');
    var poplink = document.getElementById('popuplink');

    // reset any previous stuff that was set.
    pop.style.display = 'none';
    popimage.src = '/images/spacer.gif';

    var href = document.getElementById('href' + img.id);
    poplink.href = href.href;
    poplink.target = href.target;

    var smallH = parseFloat(img.style.height);
    var smallW = parseFloat(img.style.width);

    // Adjust height and width based on current image
    if(smallH > smallW) {
    var medH = '270'
    var medW = parseInt((270/110) * smallW);
    var adjW = 50;

    // center the image + 20 for shading and padding
    var adjP = parseInt( (medW + 10) );
    var adjW = parseInt( (270 - adjP - 10) / 2 ) - 30;

    //alert(smallW);
    //alert(adjP);

    } else {
    var medW = '270'
    var medH = parseInt((270/110) * smallH);
    var adjP = 280;
    var adjW = 30;
    }
    var contain = document.getElementById('popupcontain');
    pop.style.width = adjP + 'px';

    // and position the box
    var top = objGetRealTop(box);
    pop.style.top = (top - (smallH/2) + 5) + 'px';

    var left = objGetRealLeft(box);
    pop.style.left = (left - (smallW/2) - adjW) + 'px';

    popshadow.style.width = medW + 'px';
    popshadow.style.height = medH + 'px';

    popimage.style.width = medW + 'px';
    popimage.style.height = medH + 'px';

    // set some information in the box
    var titleF = document.getElementById('title' + img.id);
    var titleT = document.getElementById('popuptitle');
    titleT.innerHTML = titleF.innerHTML;

    // Not used right now..
    //var descT = document.getElementById('popupdesc');
    //descT.innerHTML = img.alt;

    popimage.src = '/thumb/medium/' + img.id + '.jpg';

    // delay to prevent the user gettting popups while moving the mouse
    var cmd = "delayShow('/thumb/medium/" + img.id + ".jpg')";
    timerT = setTimeout(cmd, 300);

    }

    function delayShow(imgsrc) {

    // clear the timer
    clearTimeout(timerT);

    // set the image
    //var popimage = document.getElementById('popupimage');
    //popimage.src = imgsrc;

    // and show the area.
    var pop = document.getElementById('popup');
    pop.style.display = 'block';
    }

    [/code:1:e1dd1e78db]

    Nu komt dus mijn erg stomme vraag (en ik ben een leek op scriptgebied):
    als de muis over de kleine afbeelding (uit thumb/small) beweegt, wordt imgHover aangeroepen. In het script wordt dan verder gekeken. Maar dan? Is die This in de aanroep een standaard systeem? Heeft dat te maken met de img id="##"?

    Kortom: hoe krijg ik een soortgelijk effect bij thumbnails op mijn site?
    Zal ik dit script verder bestuderen of zijn er identieke scripts te vinden (en ik heb al gezocht)?

    Thor2002
  • Het keyword [i:a73137cc4c]this[/i:a73137cc4c] is inderdaad een standaard iets in javascript (of eigenlijk komt dit in alle object-georiënteerde talen terug). Het is een verwijzing naar het 'huidige object'.

    Dus als je met je muis over een image beweegt, dan stuur je een verwijzing naar het image object mee met de functie. Op die manier kan je de functie algemeen houden en voor alle thumbs gebruiken.

    Een andere optie was geweest om het ID van de image mee te sturen en in de functie het juiste object erbij zoeken (via getElementById).
  • Oke, maar dan de volgende vraag:
    als ik in mijn eigen site dus de HTML code overzet, zou e.e.a. (mits ik dezelfde mappen etc. gebruik) moeten gaan werken?
    Dus:
    verwijzing naar popup.js
    in de HTML de verwijzingen overnemen
    De link omzetten naar de afbeelding (want ik heb geen PHP systeem draaien)

    Ik zal gelijk een pagina in elkaar draaien om dit uit te proberen!

    *UPDATE 1*
    Heb net een simpele pagina in elkaar gedraait, maar daar werkt de boel (natuurlijk…) nog niet:
    Ik hen diverse afbeeldingen die in het script naar voren komen overgenomen: de spacer.gif, een plaatje uit thumb/small, een identiek nummer uit thumb/medium.
    Zal ook de css stylen overnemen om te kijken of daar iets in verstopt zit.




    Thor2002
  • Spacer.gif? Dat is zooo 1995!

    Overigens is de stylesheet overnemen wel handig, dunkt me. Code zoals dit hebben betrekknig tot css:[code:1:3ca6f478c9]pop.style.display = 'block';[/code:1:3ca6f478c9]

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.