bredde på td

Hvis der ikke direkte står nogen bredde - altså hverken i cellen eller stylesheetet - så kan du få fat i den sådan her:
<table>
<tr>
<td onclick="alert(this.offsetWidth);">ffdf</td>
</tr>
</table>

hov så ikke lige det sidste ;-)

Det du kan gøre er at give billedet og cellen en ID og derefter gøre sådan her:
<script type="text/javascript">
function getWidth() {
    if (document.getElementById('bld').offsetWidth > document.getElementById('celle').width) {
        document.getElementById('bld').width = document.getElementById('celle').width;
    }
}
</script>

<table id="tabel">
<tr>
<td width="100" id="celle"><img src="logo.png" id="bld"></td>
</tr>
</table>

av, det burde egentlig hellere være:
if (document.getElementById('bld').width > document.getElementById('celle').width) {
        document.getElementById('bld').width = document.getElementById('celle').width;
}

hvordan kan jeg så lave den hvis jeg skal bruge den flere steder??

tænker på hvordan jeg kalder den??

eks.
getWidth(bld, celle);

Prøv:

<script type="text/javascript">
function getWidth(bld, celle) {
    if (document.getElementById(bld).offsetWidth > document.getElementById(celle).width) {
        document.getElementById(bld).width = document.getElementById(celle).width;
    }
}
</script>

jamen jeg ved ikke helt hvordan jeg skal sætte det op??

<script type="text/javascript">
get_width('pic', 'pic_table');
</script>

<table id="pic_table" width="400">
<img id="pic">

<script type="text/javascript">
function getWidth(bld, celle) {
    if (document.getElementById(bld).offsetWidth > document.getElementById(celle).width) {
        document.getElementById(bld).width = document.getElementById(celle).width;
    }
}
</script>

<table id="tabel">
<tr>
<td width="100" id="celle" onclick="get_width('celle','bld');"><img src="logo.png" id="bld"></td>
</tr>
</table>

du skal jo nok gøre på et tidspunkt hvor du ved billederne og tabellen er loadet færdig, så jeg vil foreslå at du gør sådan her:
<body onload="get_width('pic', 'pic_table');">
<table>
<tr>
  <td id="pic_table" width="150">
  <img id="pic" src="bld.png">
  </td>
</table>
</body>

Funktionen er jo direkte til for at aflæse cellens størrelse.

sorry - skulle nok ha' reloadet først ;-)

jeg kan stadig ikke få det til at virke?!

<body onload="get_width('pic', 'pic_table');">

<table id="pic_table" width="400">
<img id="pic">

hmmm... strange... nu virker det pludselig...

skovenborg -->
det var vist dig der var først ude og som kom med noget jeg kunne bruge...

lav et svar :)

jamen værsågod :-)

og tak for point :-)

jeg har lige et lille tillægs spørgsmål :)

hvis nu jeg har flere billeder på siden... hvad så?? eller der slet ingen billeder er??

eks.
<table id="pic_table">
<img id="pic[3]">
<img id="pic[64]">

hvordan kommer min function så til at se ud??

tænker du på noget i den her stil:
<script type="text/javascript">
function resizePics(tbl) {
    var imgArr = document.getElementById(tbl).getElementsByTagName("IMG");
    for (i=0;i<imgArr.length;i++) {
        if (imgArr[i].width > imgArr[i].parentNode.width) {
              imgArr[i].width = imgArr[i].parentNode.width;
        }
    }
}
</script>

<body onload="resizePics('pic_table');">
<table id="pic_table">
<tr>
<td width="100">
<img id="pic[3]" src="bld1.png">
</td>
<td width="50">
<img id="pic[64]" src="bld2.png">
</td>
</tr>
</table>

ID'en er i dette tilfælde ligegyldig - medmindre du gerne vil bruge den oprindelige funktion.

funktionen kræver dog at billedet er direkte inde i en celle med en bestemt bredde - ikke noget med at sætte den ind i et link-element eller andet. Så skal den laves lidt om (i grunden skal du bare tilføje et par .parentNode efter det oprindelige .parentNode i funktionen).

hmm.... når siden er færdig med at loade bliver bredden på billedet 0 (?)

- og igen... kan man så ikke gøre sådan at den tjekker om der findes en table med id="pic_table" ? :)

altså i selve functionen... så man bare kan lave den onload i alle body's

jeg er kommet frem til følgende, men når den har loaded billedet bliver width sat til 0

function pic_width(tbl)
{
    if(elm = document.getElementById(tbl))
    {
        var img_arr = elm.getElementsByTagName('img');
        for(i = 0; i < img_arr.length; i++)
        {
            if(img_arr[i].width > img_arr[i].parentNode.width) img_arr[i].width = img_arr[i].parentNode.width;
        }
    }
}

altså tanken var at du _skal_ sætte en bredde på cellen (med width=et eller andet). Hvis cellen ikke har en bestemt bredde vil billedet som standard bruge mere plads end den måske skulle have lov til - og scriptet kan jo ikke selv finde ud af hvor bred den skal være.

men jeg kan godt se problemmet, så her er en lidt nyere udgave:
<script type="text/javascript">
function resizePics(tbl) {
    if (document.getElementById(tbl)) {
    var imgArr = document.getElementById(tbl).getElementsByTagName("IMG");
    for (i=0;i<imgArr.length;i++) {
        if (imgArr[i].width > imgArr[i].parentNode.width && imgArr[i].parentNode.width > 0) {
              imgArr[i].width = imgArr[i].parentNode.width;
        }
    }
    }
}
</script>

Hvis du gerne også vil bruge CSS til at bestemme bredden må du lige sige til...

nåja, man kunne også skrive:
if (elm = document.getElementById(tbl)) osv.
Det var faktisk en bedre idé :-)

nej, hva' skidt jeg gør det alligevel:
<script type="text/javascript">
function resizePics(tbl) {
    if (elm = document.getElementById(tbl)) {
    var imgArr = elm.getElementsByTagName("IMG");
    for (i=0;i<imgArr.length;i++) {
        bredde = (imgArr[i].parentNode.style.width) ? parseInt(imgArr[i].parentNode.style.width) : imgArr[i].parentNode.width;
        if (imgArr[i].width > bredde && bredde > 0) {
              imgArr[i].width = bredde;
        }
    }
    }
}
</script>
Nu kan du også bruge stylesheets (bare hver opmærksom på at scriptet forventer at du har angivet det i pixels.

jamen jeg har sat bredde på min table...

<table id="pic_table" width="100%">
<table id="pic_table" width="400">

jeg bruger begge dele men lige lidt hjælper det...

hvad mener du med at bruge CSS??

bliver bredden så bare sat i en style??

det cellen jeg mente du skulle sætte bredden på - ikke tabellen. Sådan har jeg forstået dit spørgsmål i hvert fald. Din HTML skulle meget gerne se sådan ud i stedet:
<table id="pic_table" width="400">
<tr>
<td width="400">
<img src="bld1.png"> <!-- Dette billede må højest blive 400 pixels bred, da cellen også er det -->
</td>
</tr>
</table>

Ja, jeg tænkte du måske kunne finde på at sætte bredden med en style - altså style="width:400px;".

ok... kan man ikke lave funktionen om så man kan sætte bredden på selve <table> tag'et??

bruger ikke CSS til at sætte bredden med

dvs. så du kan gøre noget i den her stil:
<table id="pic_table" width="400">
<tr>
<td>
<img id="pic[3]" src="bld.png">
</td>
</tr>
</table>

Jo, så skal du bare tilføje et par parentNode: (har også lige slettet muligheden for at bruge CSS)
<script type="text/javascript">
function resizePics(tbl) {
    if (elm = document.getElementById(tbl)) {
    var imgArr = elm.getElementsByTagName("IMG");
    for (i=0;i<imgArr.length;i++) {
        bredde = imgArr[i].parentNode.parentNode.parentNode.parentNode.width;
        if (imgArr[i].width > bredde && bredde > 0) {
              imgArr[i].width = bredde;
        }
    }
    }
}
</script>

ad, det var da dumt gjort. Du kan jo ligeså godt gøre sådan her:
<script type="text/javascript">
function resizePics(tbl) {
    if (elm = document.getElementById(tbl)) {
    bredde = document.getElementById(tbl).width;
    var imgArr = elm.getElementsByTagName("IMG");
    for (i=0;i<imgArr.length;i++) {

        if (imgArr[i].width > bredde && bredde > 0) {
              imgArr[i].width = bredde;
        }
    }
    }
}
</script>

En lille tanketorsk fra min side ;-)

tak... nu virker det... :)

tillader mig lige at ændre lidt på det igen :p

function pic_width(tbl)
{
    if(elm = document.getElementById(tbl))
    {
        tbl_width = elm.width;
        var img_arr = elm.getElementsByTagName('img');
        for(i = 0; i < img_arr.length; i++)
        {
            if(img_arr[i].width > tbl_width) img_arr[i].width = tbl_width;
        }
    }
}

LOL - du har ret endnu engang. Godt du selv kan se sådan noget :-)

hehe... men øv...

hvis man sætter width="100%" kan den ikke finde ud af det??

kan man afhjælpe problemet??

hvad havde du tænkt dig at der skulle ske hvis den stod på 100%??? Skal billedet udvides eller bare være som den plejer?

så skulle billedet stadig have den samme bredde som min table...

men det kan måske ikke lade sig gøre?!

man kan måske ikke finde bredden på en table der er width="100%" ??

det vil sige billedet skal fylde hele cellen - troede kun den skulle ændre størrelse hvis billedet blev for stort...

hvis vi går ud fra at billedet kun skal resizes når det fylder mere end tabellens egentlige bredde, så kan man til nøds godt gøre sådan her:
<script type="text/javascript">
function resizePics(tbl) {
    if (elm = document.getElementById(tbl)) {
    temp_bredde = elm.width;
    bredde = (temp_bredde.toString().indexOf('%') != -1) ? Math.round(elm.parentNode.offsetWidth/100*parseInt(temp_bredde)) : temp_bredde;
    var imgArr = elm.getElementsByTagName("IMG");
    for (i=0;i<imgArr.length;i++) {

        if (imgArr[i].width > bredde && bredde > 0) {
              imgArr[i].width = bredde;
        }
    }
    }
}
</script>

Det virker nok bedst hvis du tabellen ligger direkte inde i BODY-tagget - men kan til nøds også bruges på andet.

det skal også kun ændre størrelse hvis det er større en selve cellen/tablen...

det er fordi nogen steder er min pic_table ikke angivet i px men i %

okay - du kan prøve det jeg foreslog før og se hvordan det virker. Det er umiddelbart den bedste løsning jeg kan komme på...

>>skovenborg

-- har du ikke tænkt på at bruge onload på billederne ?-)

nææ, tænkte man ligeså godt kunne ordne det hele i en mundfuld. Men det kunne da godt lade sig gøre på den måde ;-)