Følgende er skrevet af Jorgensen:
> On 19 Apr., 21:53, Jorgensen <bo.rattenb...@gmail.com> wrote:
>> Hej Stig, Jørgen og Birger.
>>
>> Tak til jer alle for de kompetente input.
>>
>> @jørgen
>> du har ret. i princippet drejer det sig om lav- og højformat
>> billeder
>>
>> @birger
>> jeg har helt overset overset dit indlæg. de må skyldes at det er lang
>> tid siden jeg sidst har været i nyhedsgrupperne - nok 10-15 år siden
>> sidst :-/
>>
>> Men ja, en løsning hvor <div>'s bredde justeres efter at billedet er
>> loaded kan gøre det jeg efterlyser.
>>
>> Men kunne det være muligt at køre scriptet når hver enkelt billede er
>> loaded ? altså et script der aktiveres på hvert enkelt billede ?
>>
>> Bo
>
> Jeps. Det virker
.... indtil videre..
>
> Her er kort hvad jeg har prøvet:
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/
> TR/html4/strict.dtd">
> <html>
> <head>
> <title>Image med tekst</title>
> <meta http-equiv="Content-Type" content="text/html;
> charset=ISO-8859-1">
> <meta http-equiv="Content-Language" content="DK">
> <style type="text/css">
> .img_container {
> padding : 5px;
> margin : 5px;
> border : 1px solid black;
> float : left;
> }
> .img_txt {
> text-align : center;
> margin : 3px;
> }
> </style>
> <script type="text/javascript">
> function test(id) {
> var elems = document.getElementsByTagName( 'img');
> for ( idx = 0; idx < elems.length; idx++) {
> var elm = elems[idx];
> if ( elm && elm.parentNode && elm.id == id) {
> elm.parentNode.style.width = elm.width+'px';
> }
> }
> }
> </script>
> <body>
> <div class="img_container">
> <img id="img_01" src="00.jpg" alt="test1" width="100px"
> onLoad="JavaScript:test('img_01');"><br>
> <p class="img_txt">Jyletræet med sin pynt</p>
> </div>
>
> <div class="img_container">
> <img id="img_02" src="00.jpg" alt="test1" width="100px"
> onLoad="JavaScript:test('img_02');"><br>
> <p class="img_txt">Jyletræet med sin pynt</p>
> </div>
>
> <div class="img_container">
> <img id="img_03" src="00.jpg" alt="test1" width="100px"
> onLoad="JavaScript:test('img_03');"><br>
> <p class="img_txt">Jyletræet med sin pynt</p>
> </div>
>
> <div class="img_container">
> <img id="img_04" src="00.jpg" alt="test1" width="100px"
> onLoad="JavaScript:test('img_04');"><br>
> <p class="img_txt">Jyletræet med sin pynt</p>
> </div>
>
> <div class="img_container">
> <img id="img_04" src="00.jpg" alt="test1" width="100px"
> onLoad="JavaScript:test('img_05');"><br>
> <p class="img_txt">Jyletræet med sin pynt</p>
> </div>
>
>
>
> </body>
> </html>
Du kan gøre det, at du i img-tagget sætter onload
<img onload="SetWidth( this)"...>
Det vil umiddelbart give en validerinsfejl, for onload findes ikke for
<img> - men det virker
Det er heller ikke unobtrusive, som "man" gerne ser i dag - der sættes
event handlere direkte i HTML'en.
Så problemet med at "gøre det rigtigt", er at identificere de elementer
der skal have sat onload - altså de billedelementer der indeholder
billederne, både for at sætte handleren og når handleren kaldes. Hvis
siden har andre billeder, kan man ikke bare sætte onload på alle
<img..>
Det kan du gøre ved at give billederne enten et id eller bruge alt
eller title til et eller andet der kan identificere elementerne.
Du har brugt id i ovenstående (Du har 2 ens id'er - img_04. Det mås man
ikke!), så her er et forslag til hvordan det (måske) kunne gøres
unobtrusive:
window.onload = function() {
// sætter eventhandler for alle billede med id="img_xx" hvor xx er
00-99
var elm = null;
for ( idx = 0; idx < ant; idx++) {
elm = document.getElementById( 'img_'+("0"+idx).substr( -2, 2));
if ( elm) {
SetHandler( elm, 'load', SetWidth);
}
}
}
function SetHandler( elm, evt, fnc) {
if ( elm.addEventListener) elm.addEventListener( evt, fnc, false);
else if ( elm.attachEvent) elm.attachEvent( 'on'+evt, fnc);
}
function SetWidth( evt) {
// Og her håndteres onload for billedelementet så
var elm = ( window.event) ? window.event.srcElement : evt.target;
if ( elm && elm.parentNode) {
elm.parentNode.style.width = elm.width+'px';
}
}
Bemærk at events behandles og er defineret meget forskelligt i IE og de
rigtige browsere, og der derfor er forskel i behandlingen i
funktionerne også.
Og det er ikke testet -
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk