Ändra lite egenskaper

Hej!
Är ganska grön på JavaScript och skulle behöva hjälp med att få ihop ett script som efter ett klick på en länk ändrar så att den aktuella länken får en speciell bakgrundsfärg och sedan ska den ändra storleken på en div efter variabler i länken och visa en bild (även den efter variabler i länken) i den diven. Någon som kan hjälpa mig lite på traven? :)

Du kanske kan utgå från följande:

function showImg(lnksrc, bgclr, divid, divwidth, divheight){
    if (document.createElement){
        lnksrc.style.backgroundColor = bgclr;

        var div = document.getElementById(divid),
            img = document.createElement("img");

        img.src = lnksrc.href;
        img.width = divwidth;
        img.height = divheight;

        div.style.width = divwidth;
        div.style.height = divheight;

        div.appendChild(img);
    }
}

<a href="image.png" onclick="showImg(this, 'yellow', 'imgdiv', 200, 100)">show image</a>

<div id="imgdiv"></div>

Tack så mycket! Jag ska testa det så fort jag hinner (sitter med ett annat projekt för tillfället)! :)

Har testat koden och det fungerar utmärkt efter lite småmodifikationer! Tack så mycket PeterS! :)

<script type="text/javascript">
function showImg(lnksrc, divwidth, divheight){
//Thanks to PeterS at webforum.nu
    if (document.createElement){
        var divid = "imgdiv";
        lnksrc.style.backgroundColor = "#A59377";
        lnksrc.style.color = "#F6F5F1";

        var div = document.getElementById(divid);

        img.src = lnksrc.href;
        img.width = divwidth;
        img.height = divheight;

        div.style.width = divwidth+40;
        div.style.height = divheight+20;

        div.appendChild(img);
    }
}
</script>

<div id="photomenu" style="width: 150px; height: 300px; position: absolute; top: 899px; left: 225px;">
<img src="images/head_photos.jpg" style="width: 92px; height: 23px; border: 0px;" alt=" PHOTOS " />
<br /><br style="line-height: 10px;" />
<a href="images/archive/1.jpg" onclick="showImg(this,500,375);return false;" style="text-decoration: none;">&nbsp;1&nbsp;</a>
<a href="images/archive/2.jpg" onclick="showImg(this,281,375);return false;" style="text-decoration: none;">&nbsp;2&nbsp;</a>
</div>

<div id="imgdiv" style="width: 10px; height: 10px; position: absolute; top: 899px; left: 385px; background: #FFFFFF; text-align: center; padding-top: 20px;">
<img id="img" />
</div>

:bire

Eller det gjorde det inte alls det!
I FF (1.0) så skickas man till bilden direkt, scriptet körs inte. Nån koll på hur man kan åtgärda det? Det fungerar kalas i IE och Opera annars.

Det är viktigt att inte glömma "return false", annars kommer länken att utföra "href-operationen"

<a href="image.png" onclick="showImg(this, 'yellow', 'imgdiv', 200, 100);return false;">show image</a>

Saken är den att jag har med return false...

I så fall misstänker jag att du har ett scriptfel någon annanstans, som gör att showImg inte kan evalueras. Jag provkörde din kod i FF och det fungerade utmärkt. Kolla JavaScript Console i FF.

/G

"Img is not defined."

img.src = lnksrc.href;

Jag testade att lägga till img = document.getElementById("img"); och då fungerade det i FF (även om diven inte blev riktigt som det var tänkt) men i IE så slutade det fungera.

Objektet stöder inte egenskapen eller metoden.

Den klagar på img = document.getElementById("img");.

In sin strävan att suga getpung så har IE bestämt sig för att den inte gillar variabler med samma namn som element på sidan (den har nämligen utan anmodan gjort den tilldelning som du vill göra).

gravadlax = document.getElementById("img");

...fungerar nog bättre

Nu fungerar det bättre men ändå inte smärtfritt! :)
Jag får fortfarande inte fram någon div i FF! Det är tänkt att diven ska fungera som en ram runt bilden men det syns ingen i FF. Jag får inga felmeddelanden i consolen heller så det är ganska förvirrande! :o

<script type="text/javascript">
function showImg(lnksrc, divwidth, divheight){
//Thanks to PeterS at webforum.nu
    if (document.createElement){
        var divid = "imgdiv";
        lnksrc.style.backgroundColor = "#A59377";
        lnksrc.style.color = "#F6F5F1";

        var div = document.getElementById(divid);
        varImg = document.getElementById("img");

        varImg.src = lnksrc.href;
        varImg.width = divwidth;
        varImg.height = divheight;

        div.style.width = divwidth+40;
        div.style.height = divheight+20;
        div.style.backgroundColor = "#FFFFFF";

        div.appendChild(varImg);
    }
}
</script>

Skippa att sätta bredd och höjd på diven (både i scriptet och style-taggen), och sätt padding: 20px, i stället för bara padding-top.

Yey! Nu funkar det superbra! Tack! :D