---
title: "Ändra lite egenskaper"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/132793-ändra-lite-egenskaper"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Mika3l"
published: "2005-08-15T11:23:30.000Z"
updated: "2005-09-11T17:47:18.000Z"
replies: 12
views: 419
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/132793-ändra-lite-egenskaper"
---

# Ändra lite egenskaper

## #1 — Mika3l, 2005-08-15T11:23Z

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? :)

Permalänk: https://www.webforum.nu/p/132793

## #2 — Peter S, 2005-08-15T20:19Z

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>
```

Permalänk: https://www.webforum.nu/p/1657069

## #3 — Mika3l, 2005-08-15T22:43Z

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

Permalänk: https://www.webforum.nu/p/1657114

## #4 — Mika3l, 2005-09-10T22:41Z

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

Permalänk: https://www.webforum.nu/p/1670609

## #5 — Mika3l, 2005-09-10T22:45Z

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.

Permalänk: https://www.webforum.nu/p/1670610

## #6 — emission, 2005-09-10T23:38Z

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>
```

Permalänk: https://www.webforum.nu/p/1670626

## #7 — Mika3l, 2005-09-11T10:24Z

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

Permalänk: https://www.webforum.nu/p/1670700

## #8 — emission, 2005-09-11T11:58Z

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

Permalänk: https://www.webforum.nu/p/1670714

## #9 — Mika3l, 2005-09-11T17:25Z

"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");.

Permalänk: https://www.webforum.nu/p/1670809

## #10 — emission, 2005-09-11T17:28Z

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

Permalänk: https://www.webforum.nu/p/1670810

## #11 — Mika3l, 2005-09-11T17:35Z

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>
```

Permalänk: https://www.webforum.nu/p/1670816

## #12 — emission, 2005-09-11T17:44Z

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.

Permalänk: https://www.webforum.nu/p/1670820

## #13 — Mika3l, 2005-09-11T17:47Z

Yey! Nu funkar det superbra! Tack! :D

Permalänk: https://www.webforum.nu/p/1670822

---

Tråden på webben: https://www.webforum.nu/amne/javascript/132793-ändra-lite-egenskaper