Søg
Avatar billede BTEngineer Novice
29. august 2007 - 11:58 Der er 10 kommentarer og
1 løsning

Drop down, ændring af billedestørrelse?

Hej,

Er der nogen der kan komme med et overskueligt script der gør at man kan skifte dimensioner på et billede, ved at vælge dem i en drop down:

<select name="dimension">
<option value="15">15x15</option>
<option value="30">30x30</option>
<option value="45">45x45</option>
<option value="60">60x60</option>
<option value="75">75x75</option>
<option value="100">100x100</option>
<option value="115">115x115</option>
<option value="130">130x130</option>
<option value="145">145x145</option>
<option value="160">160x160</option>
</select>

Hvis man nu vælger 130x130 så vil jeg gerne have at et "eksempel" billede som jeg har, skiftet dimension til den valgte dimension dynamisk.

Tak på forhånd.
Avatar billede jhe-ting Nybegynder
29. august 2007 - 16:33 #1
Vil du kun skifte dimension på skærmen, eller skal der også vælges et billede fra serveren med den rigtige dimension?
Avatar billede BTEngineer Novice
29. august 2007 - 17:40 #2
Altså det er bare som et eksempel at man skal kunne se hvor stort f.eks. 115x115 er.
Når man så har valgt 115x115 og billedet er blevet så stort på skærmen, så skal man kunne tryk LAV KODE - Sådan at koden bliver <img src="billede" width="115" height="115">

Okay :-) ?
Avatar billede olebole Juniormester
29. august 2007 - 20:02 #3
<ole>

function setDims(nVal) {
    var css = document.getElementById("dit_pics_ID").style;
    css.width = css.height = nVal + "px";
}

<select name="dimension" onchange="setDims(this.value)">

/mvh
</bole>
Avatar billede BTEngineer Novice
29. august 2007 - 20:11 #4
Hvad skal jeg skrive ved "dit_pics_ID" ?
Avatar billede BTEngineer Novice
29. august 2007 - 20:13 #5
Billedet skal skifte størrelse efter hvad man vælger af dimensioner:
<img src="smileys/<? echo $vis[smiley]; ?>" border="1" name="test" id="test" width="15" height="15">

Så f.eks. 15 og 15 bliver til 30 og 30 automatisk, så man ser eksemplet i samme øjeblik man skifter i drop downen.
Avatar billede jhe-ting Nybegynder
30. august 2007 - 09:05 #6
Hm - Din kode viser ID="test", så det er det du skal skrive.

Ok. Jeg laver lige en fungerende 'demo':

Ole's "setDims" har jeg lyst til at kalde setImgSize og overføre ID som parameter.
For at få lidt bedre overensstemmelse mellem IE og FF kobles funktionen også til "onkeyup"-hændelsen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Ekselpel til spm/793913</title>
<script type="text/javascript"><!--
function setImgSize(strId,nSize) {
    var css = document.getElementById(strId).style;
    css.width = css.height = nSize + "px";
}
//--></script>
</head><body>
<h1>Ekselpel til spm/793913</h1>
<h2>setImgSize - demo</h2>
<select name="dimension"
    onchange="setImgSize('test', this.value)"
    onkeyup="setImgSize('test', this.value)">
<option value="15">15x15</option>
<option value="30">30x30</option>
<option value="45">45x45</option>
<option value="60">60x60</option>
<option value="75">75x75</option>
<option value="100">100x100</option>
<option value="115">115x115</option>
<option value="130">130x130</option>
<option value="145">145x145</option>
<option value="160">160x160</option>
</select>
<p>
<h3>Billedet (ekspertens logo)</h3>
<p>
<img src="http://www.eksperten.dk/img/elogo.png" border="1" name="test" id="test" width="15" height="15">
</body></html>


Da Ole's setDims ellers virker helt fint bør der deles point, hvis du vil gi' mig nogen.
Avatar billede BTEngineer Novice
30. august 2007 - 12:24 #7
Ja, det virker.

Ole smid et svar, så deler jeg pointene :-).
Avatar billede BTEngineer Novice
30. august 2007 - 12:33 #8
Hmm.
Lige hurtigt..

Hvordan laver jeg sådan at når man har valgt en dimension på f.eks. 45x45 så er det muligt at trykke "Lav kode", sådan at de får en kode i en boks med:
'<img src="billede.gif" border="0" width="45" height"45">'

Uddeler gerne flere point, hvis det ønskes.
Avatar billede olebole Juniormester
30. august 2007 - 14:03 #9
jhe-ting >> Jeg forstår ikke, hvorfor i alverden, du vil blande en onkeyup-event ind i denne løsning ... hvorfor det?  :)
Avatar billede jhe-ting Nybegynder
30. august 2007 - 18:40 #10
olebole >>

Når select elementet har fokus bevirker pil op/ned, at onchange-hændelsen aktiveres i IE, hvilket ikke sker i FF, hvor onchange først aktiveres når elementet forlades.
Ved at koble sig på onkeyup ændres størrelsen når tasten slippes.

dounie >>

En boks kunne laves ved at rette scriptet til:

<script type="text/javascript"><!--
var imgHtmlStr ='';
function showImgHtml(){
    var box = document.getElementById("imgCodeBox");
    box.value = imgHtmlStr;
}
function setImgSize(strId,nSize) {
    var css = document.getElementById(strId).style;
    css.width = css.height = nSize + "px";
    imgHtmlStr = '<img src="billede.gif" border="0" width="'+nSize+'" height"'+nSize+'">';
}
//--></script>


.. og tilføje:

<p>
<input type="button" onclick="showImgHtml()" value="Kode">
<input type="text" id="imgCodeBox" size="60" value='<img src="billede.gif" border="0" width="45" height"45">'>

i body-afsnittet.
Avatar billede jhe-ting Nybegynder
30. august 2007 - 18:58 #11
Knappen til at vise koden kan undværes.

Bare tilføj 'showImgHtml();' tilsidst i 'setImgSize'.

Så opdateres feltet automatisk.  ;)
Avatar billede 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.

Loading billede Opret Preview
Kategori
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 14:15 PHP Html Af Asky i Programmeringsværktøjer
I går 11:06 Rufus mange muligheder - valg ved install Windows Af Uvanga i Windows
06/0516:53 HTML Af Asky i Programmeringsværktøjer
06/0510:01 Mister internettet efter slumre, Af valby i Windows
05/0513:02 Lille smart tingest Af nu_igen i Fitness & Smartwatches
White papers
Flere white papers »