Notifikationer

Markér alle som læst Log ud

idiotbarn Nybegynder

30. september 2004 - 21:25 Der er 10 kommentarer og
1 løsning

Billede ændres i størrelse

Ja...beklager overskriften, kunne ikke finde noget beskrivende...
Jeg har en side hvor der vises nogen "thumbnails", det er ikke helt thumb's men bare billederne skaleret ned i størrelse. Når man klikker på billedet kommer loadImages i brug. Billedet smider kilden ind og i et DIV vises billedet i dens originale størrelse.

function loadImages(kilde) {
document.getElementById('stortbillede').src=kilde
}

Dog må billedet max ha en bestemt bredde (x-værdi), er den mere en 480px, skal det overskydende trækkes fra. Da billedet skal beholde sine x*y forhold, trækker jeg det også fra toppen, og funktionen kommer til at se således ud:

function loadImages(kilde) {
document.getElementById('stortbillede').src=kilde
x=document.getElementById('stortbillede').width
y=document.getElementById('stortbillede').height

if (x > 480) {
toBig=x-480
Nyx=x-toBig
Nyy=y-toBig
document.getElementById('stortbillede').width=Nyx
document.getElementById('stortbillede').height=Nyy
}
}
Det virker også fint, men de billeder jeg trykker på efter denne, bliver automatisk skaleret til samme størrelse, ligegyldig om det er et 50x50 billede eller hvad det er. Det er som om jeg mangler at nulstille noget, og har prøvet at sætte x,y,Nyx og Nyy =0, men kan ikke få det til at fungere...nogen kloge hjerner derude?

Synes godt om

grunken Nybegynder

30. september 2004 - 23:26 #1

Metoden du gør det på er jo heller ikke specielt gangbar til løsning af problemet - da den bare aflæser størrelsen på det foregående billede - gør noget ligende det her!

<script type="text/javascript">
function checkbillede(img){

var e = document.getElementById("stortbillede");
var b = new Image();

b.onload = function(){
if (b.width>480)
e.style.width = "480px";
else
e.style.width = b.width+"px";
e.src=b.src;
}
b.src=img;
}
</script>

<img src="./billede1.jpg" onclick="checkbillede(this.src);" style="width:100px;height:100px;">
<img src="./billede2.jpg" onclick="checkbillede(this.src);" style="width:100px;height:100px;">

<img src="" id="stortbillede" style="display:block;"/>

Synes godt om

roenving Novice

01. oktober 2004 - 00:21 #2

Hvorfor ikke bare definere en bredde på det store billede, virker den ikke hver gang ?-)

<img src="./billede1.jpg" onclick="document.images['stortbillede'].src=this.src;" style="width:100px;height:100px;">
<img src="./billede2.jpg" onclick="document.images['stortbillede'].src=this.src;" style="width:100px;height:100px;">

<img src="" id="stortbillede" name="stortbillede" style="width:480px;">

Synes godt om

grunken Nybegynder

01. oktober 2004 - 00:25 #3

Nemlig Jes ;p

Men som jeg læser spørgsmålet skal de eventuelle små billeder på 200x200px vises i netop den størrelse, de ville jo så i dit eksempel blive skaleret op ;o)

Synes godt om

roenving Novice

01. oktober 2004 - 00:29 #4

Tjoeh, tja ...

Hrm, tjah, bum bum !-)

Synes godt om

idiotbarn Nybegynder

03. oktober 2004 - 17:53 #5

Ja...det fungere egentligt meget godt...billedet holder åbentbart sine højde/bredde forhold. Men jeg kan ikke få det til at fungere når jeg vil ha den til at først kontrollere bredden, og derefter højden på billedet, Jeg har prøvet at bruge copy/paste og så ændre det til højde, men det kan den bestemt ikke li. Billedet må aldrig blive mere end 480x580, hvordan kringler i den?

Synes godt om

grunken Nybegynder

03. oktober 2004 - 20:26 #6

Det var jo egentligt ikke det du spurgte om ;o)

Men du må jo finde din lommeregner frem - og finde ud af hvordan man beregner højde/breddeforhold ;o)

For et er sikkert uanset hvad, er du nødt til at skrive både bredde og højde på billedet hver gang - ellers vil billedet blive fordelt sometime/somehow

Synes godt om

grunken Nybegynder

03. oktober 2004 - 20:32 #7

-Men det er jo søndag, og regnestykket ville se omtrent sådan ud ;o)

<script type="text/javascript">

var mw = 480; //MAX bredde
var mh = 580; //MAX højde

function checkbillede(img){
e = document.getElementById("stortbillede");
b = new Image();

b.onload = function(){
fh = Math.round(b.height/(b.width/mw));
fw = Math.round(b.width/(b.height/mh));

e.style.width = (fh<mh)?(b.width>mw)?mw+"px":b.width+"px":fw+"px";
e.style.height = (fw<mw)?(b.height>mh)?mh+"px":b.height+"px":fh+"px";
e.src=b.src;
}
b.src=img;
}
</script>

Synes godt om

idiotbarn Nybegynder

09. oktober 2004 - 10:40 #8

Så har jeg ígen fået tid til at få set ordentligt på det, undskyld vente tiden...Jeg ved ikke helt hvordan det fungere med b.onload, for billederne findes allerede på siden i et mindre format, og derefter kommer de over i et DIV i stor størrelse´. Jeg har prøvet frem og tilbagem, men kan stadig ikke fungere, jeg er kommet frem til:(kan godt ske det er helt galt)

<script language="JavaScript">
var mw = 480; //MAX bredde
var mh = 580; //MAX højde

function checkbillede(img){
e = document.getElementById("stortbillede");
e.src=img;

e.onload = function(){
if (e.width>480 || e.height>580){
fh = Math.round(e.height/(e.width/mw));
fw = Math.round(e.width/(e.height/mh));
e.style.width = (fh<mh)?(e.width>mw)?mw+"px":e.width+"px":fw+"px";
e.style.height = (fw<mw)?(e.height>mh)?mh+"px":e.height+"px":fh+"px";
fh=0
fw=0
}
}
hvis der kommer et billede der er mindre end max målene viser den den fint, hvis der så kommer et billede der er for stort skalere den den også ned, men derefter viser den billeder der ellers var under max målene i samme størrelse som sidste billede der var for stort

Synes godt om

grunken Nybegynder

09. oktober 2004 - 15:07 #9

Tjah, det er vist min fejl, eller noget ;o)

<script type="text/javascript">

var mw = 480; //MAX bredde
var mh = 580; //MAX højde

function checkbillede(img){
e = document.getElementById("stortbillede");
b = new Image();

b.onload = function(){
fY = (b.width>mw)?Math.round(b.height/(b.width/mw)):b.height;
fX = (b.height>mh)?Math.round(b.width/(b.height/mh)):b.width;

e.style.width = (fY<mh)?(b.width>mw)?mw+"px":b.width+"px":fX+"px";
e.style.height = (fX<mw)?(b.height>mh)?mh+"px":b.height+"px":fY+"px";
e.src=b.src;
}
b.src=img;
}
</script>

Synes godt om

idiotbarn Nybegynder

11. oktober 2004 - 00:14 #10

JAAAA TAK :) Hvad lavede du om?

Synes godt om

idiotbarn Nybegynder

18. februar 2005 - 11:23 #11

der er ikke nogen der har lagt et svar siden 11/10 så jeg lukker nu...brok jer hvis det er:)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS