Avatar billede petert Forsker
17. marts 2004 - 16:26 Der er 3 kommentarer og
1 løsning

Popup af billeder

Jeg har en lille side med salg af brugte ting (www.3060.dk)
Jeg kunne godt tænke mig at lave følgende.
På siden står der "klik her" gør man det kommer der et billed op af tingen der er til salg.
Hvordan laver man det sådan at når man kører musen henover ordet "klik her" popuper selv up og hvordan definerer man så størelsen af det billed der kommer up ???????

Man kan se det jeg mener på den blå AVIS http://www.dba.dk/asp/Soegning/soegning.asp?RubrikId=901
og man så peger på fotoarparatet.

Med venlig hilsen

Petert
Avatar billede muddi Praktikant
17. marts 2004 - 16:32 #1
Prøv at trykke på billederne her http://halstania.dk/billeder/album1/index.php
Er det noget i den stil du vil have?
Avatar billede petert Forsker
17. marts 2004 - 16:45 #2
Ikke helt prøv at gå til siden
http://www.dba.dk/asp/Soegning/soegning.asp?RubrikId=901
og kør musen hen over et af fotoarparaterne så kommer billedet selv up
Avatar billede rzj Nybegynder
25. marts 2004 - 02:17 #3
det er et javascript der gør tricket og det ser sådan ud:
var thumpImg = new Image();
var thumpInt;
var minibannerArray    = new Array();

function checkImg(imgName) {
    if (thumpImg.readyState == "complete" || thumpImg.readyState == 4) {
        document.all.thumpPic.innerHTML = "<img src='" + imgName + "'>";
        if (imgWidth) {
            objDivStyle.width        = (imgWidth + windowPadding);
            objDivStyle.height    = (imgHeight + windowPadding);
        }
        clearInterval(thumpInt);
    }
}

function showPop(imgName,hideSwitch) {
    thumpImg.src = imgName;
    imgWidth = thumpImg.width;
    imgHeight = thumpImg.height;
    thumpInt = window.setInterval("checkImg('" + imgName + "')",100);
    windowPadding = 24;
   
    if (mouseThumpX + imgWidth + 24 + 20 >= document.body.clientWidth) {   
        objDivStyle.left = mouseThumpX - (imgWidth + 24 + 30);
    }
    if ((mouseThumpY - document.body.scrollTop) + imgHeight + windowPadding > document.body.clientHeight) {
        objDivStyle.top = (mouseThumpY - (((mouseThumpY - document.body.scrollTop) + imgHeight + windowPadding + 10) - document.body.clientHeight));
    }
    if (document.all.minibannerTabel && hideSwitch) {
        minibannerArray    = new Array();
        if (document.all.minibannerTabel.innerHTML.indexOf(".swf") != -1) {
            minibannerArray[minibannerArray.length]    = document.all.minibannerTabel;
            document.all.minibannerTabel.style.visibility = "hidden"
        }
        else if (document.all.minibannerTabel.all.tags("SELECT") && document.all.minibannerTabel.all.tags("SELECT").length > 0) {
            for (i = 0; document.all.minibannerTabel.all.tags("SELECT")[i]; i++) {
                minibannerArray[minibannerArray.length]    = document.all.minibannerTabel.all.tags("SELECT")[i];
                document.all.minibannerTabel.all.tags("SELECT")[i].style.visibility = "hidden";
            }
        }
    }
    document.all.thumpLayer.style.visibility = "visible";
}

function hidePop() {
    if (document.all) {
        document.all.thumpLayer.style.visibility = "hidden";
        document.all.thumpLayer.style.backgroundColor = strPopBG;
        if (minibannerArray.length > 0)
            for (i = 0; minibannerArray[i]; i++) minibannerArray[i].style.visibility = "visible";
        document.all.thumpPic.innerHTML = "<img src='/images/misc/clock.gif'>";
        clearInterval(thumpInt);
    }
}

var strPopBG;

function positionPop(imgName,hideSwitch,specialPopBG) {
  if (document.all) {
        mouseThumpX = event.clientX - event.offsetX + document.body.scrollLeft + 20;
        mouseThumpY = event.clientY - event.offsetY + document.body.scrollTop;
        objDivStyle = document.all.thumpLayer.style;
        objDivStyle.left = mouseThumpX;
        objDivStyle.top = mouseThumpY;
        strPopBG = objDivStyle.backgroundColor;
        if (typeof specialPopBG == "string") objDivStyle.backgroundColor = specialPopBG;
        objDivStyle.visibility = "visible";
        if (typeof hideSwitch != "number") hideSwitch = 0;
        showPop(imgName,hideSwitch);
    }
}

function bigPicPop_tmp(bigImgName,picWidth,picHeight,picType,AnnonceId) {
    hidePop();
    picWidth = picWidth + 20;
    picHeight = picHeight + 50;
    winX = (screen.availWidth - picWidth)/2;
    winY = (screen.availHeight - picHeight)/2 - 12;
    picWind = window.open("/asp/soegning/picpop.asp?AnnonceId="+AnnonceId+"&picType="+picType+"&ImgName="+bigImgName, "blank_", "resizable=no,scrollbars=no,toolbar=no,location=no,directories=no,status=no,screenY=" + winY + ",top=" + winY + ",screenX=" + winX + ",left=" + winX + ",width= " + picWidth + ",height= " + picHeight + "");
    picWind.focus();
}

function bigPicPop(Url,picWidth,picHeight,AnnonceId) {
    hidePop();
    picWidth = picWidth + 20;
    picHeight = picHeight + 80;
    winX = (screen.availWidth - picWidth)/2;
    winY = (screen.availHeight - picHeight)/2 - 12;
    picWind = window.open("/asp/soegning/picpop.asp?AnnonceId="+AnnonceId+"&Url="+Url, "blank_", "resizable=no,scrollbars=no,toolbar=no,location=no,directories=no,status=no,screenY=" + winY + ",top=" + winY + ",screenX=" + winX + ",left=" + winX + ",width= " + picWidth + ",height= " + picHeight + "");
    picWind.focus();
}

Det bruges således:
<a href='java script:void 0;'  onMouseOver="positionPop('http://www1.dba.dk/images/annbilleder/1/33/32480633_1.jpg');" onMouseOut="hidePop();" onMouseUp="bigPicPop('http://www1.dba.dk/images/annbilleder/3/33/32480633_1.jpg',350,262,32480633);"><img SRC='/images/iconer/cam_5.gif' border='0'></a>
Avatar billede petert Forsker
21. februar 2007 - 09:48 #4
jeg lukker dette spm.Tak for indlægene
/Petert
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester