Avatar billede showsource Seniormester
06. september 2009 - 19:56 Der er 12 kommentarer og
1 løsning

Lidt problem med billedstr. og dom i IE

Hej
Prøver at lave noget gallery halløj med php og javascript.

Starter med at vise første billede ved load af siden:

<img src="/Billeder/<?php echo $images[0]; ?>.jpg" width="450" id="show_img">

Bemærk bredden er sat, og billedet vises med de rigtige propertioner uanset reel str.

Har bl.a. flg. til at skifte billede ved onclick:

function vis_img(im) {

    var bredde = 450;
    var img_ref = document.getElementById("imgview");
    var pic = "/Billeder/" + img[im] + ".jpg";

        while (img_ref.firstChild) {
        img_ref.removeChild(img_ref.firstChild);
        }

    var pick_new = document.createElement("img");
    pick_new.setAttribute("src", pic);
    pick_new.setAttribute("id", "show_img");
    pick_new.setAttribute("width", bredde);
    img_ref.appendChild(pick_new);

}

Det virker fint i FF og Google Chrome.
Men hvis billedet reelt er f.eks. 240 i width og 800 i height, bliver det forvrænget i IE ?
Er der nogen "workaround" for det ?

Har iøvrigt også prøvet med replaceChild i stedet for append, men det gav ingen effekt i IE
Avatar billede showsource Seniormester
06. september 2009 - 19:58 #1
P.t. bruger jeg:

function switch_img(im) {

    var img_ref = document.getElementById('imgview');
    var pic = "/Billeder/" + img[im] + ".jpg";
    img_ref.getElementsByTagName("img")[0].setAttribute("src", pic);

}

men da jeg samtidig har lavet så man kan "zoome" ind/ud på billedet, bliver den evt. valgte "zoom" str. "genbrugt" ved skift af billede, og det ville jeg gerne undgå.
Avatar billede olebole Juniormester
06. september 2009 - 21:57 #2
<ole>

Det er en lidt risky måde at sætte dimensionerne på. Jeg ville preloade billedet, aflæse dets reelle bredde og højde og beregne de nye dimensioner.

I virkeligheden ville jeg nok ikke resize billeder med HTML/CSS, men det er en helt anden sag  =)

/mvh
</bole>
Avatar billede olebole Juniormester
06. september 2009 - 22:04 #3
Du kan preloade billedet med:


function bar() {
    alert(this.width+" x "+this.height);
    alert(this.src);
    // Her sætter du ny src på det bestående billede
    // samtidig med, at du beregner og sætter dimensionerne
}
function foo() {
    var oImg = new Image();
    oImg.onload = bar;
    oImg.src = "sti/til/billede.jpg";
}

Avatar billede olebole Juniormester
06. september 2009 - 22:06 #4
- der skulle nok stå:

// samtidig med, at du beregner og sætter dimensionerne med CSS på billedets style objekt
Avatar billede showsource Seniormester
06. september 2009 - 22:58 #5
Hvordan "risky" ?

Din bar() funktion vil vel returnere aktuel x og y, som er sat af "zoom" funktionen ?
Avatar billede olebole Juniormester
06. september 2009 - 23:46 #6
risky => ikke til at regne med

I bar kan du hente billedets reelle bredde og højde, samt dets URL. Højden og bredden kan du bruge til at beregne de nye dimensioner, så proportionerne holdes
Avatar billede olebole Juniormester
06. september 2009 - 23:57 #7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function bar() {
    var oImg = document.getElementById("myPic"),
    css = oImg.style,
    nCoeff = 450/this.width;
    css.width = "450px";
    css.height = Math.round(this.height*nCoeff) + "px";
    oImg.setAttribute("src", this.src);
}
function foo() {
    var oImg = new Image();
    oImg.onload = bar;
    oImg.src = "http://www.eksperten.dk/images/eksperten_logo.gif";
}
</script>
</head>
<body>

<p><button onclick="foo()">TEST</button></p>
<p><img id="myPic"></p>

</body>
</html>



Så skal du bare placere billedet med left og top ... så er det zoomet tilbage
Avatar billede showsource Seniormester
07. september 2009 - 07:15 #8
hey ole
Jeg vælger at droppe zoom funktionen.
Men smid gerne et svar!
Avatar billede olebole Juniormester
07. september 2009 - 07:24 #9
Kommer her  =)
Avatar billede showsource Seniormester
07. september 2009 - 19:14 #10
Det er fedt at få noget input, ole !!!!!
Avatar billede olebole Juniormester
07. september 2009 - 20:07 #11
Tak for ros og points  ;o)
Avatar billede olebole Juniormester
07. september 2009 - 20:16 #12
PS: Hvis du er rigtig fræk, skifter du src på billedet, lige inden du opretter Image objektet og preloader ... til en animeret 'waiting' gif. Når bar kaldes, skiftes billedet til det rigtige motiv  ;o)

Hvis billedet ligger i et element med fast bredde og højde, kan du centrere med noget à la:


function bar() {
    var oImg = document.getElementById("myPic"),
    css = oImg.style,
    nCoeff = 450/this.width;
    css.width = "450px";
    css.height = Math.round(this.height*nCoeff) + "px";
    css.left = ((oImg.parentNode.offsetWidth-oImg.offsetWidth)/2) + "px";
    css.top = ((oImg.parentNode.offsetHeight-oImg.offsetHeight)/2) + "px";
    oImg.setAttribute("src", this.src);
}

Avatar billede olebole Juniormester
07. september 2009 - 20:21 #13
Nej, den holder ikke. Dette er lidt længere, men mere effektivt:


function bar() {
    var oImg = document.getElementById("myPic"),
    oPar = oImg.parentNode,
    css = oImg.style,
    nW = 450,
    nCoeff = nW/this.width,
    nH = Math.round(this.height*nCoeff);
    css.width = nW + "px";
    css.height = nH + "px";
    css.left = ((oPar.offsetWidth-nW)/2) + "px";
    css.top = ((oPar.offsetHeight-nH)/2) + "px";
    oImg.setAttribute("src", this.src);
}

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
Vi tilbyder markedets bedste kurser inden for webudvikling

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