Avatar billede marnox Nybegynder
26. februar 2007 - 09:57 Der er 13 kommentarer og
1 løsning

Random image og medfølgende tekst - double array?

Jeg har fået en kammerat til at hjælpe mig med at lave en JavaScript function til en hjemmeside, hvor der er et billede, som - når sitet reloades - skifter random fra samme mappe.

Jeg har derimod ikke kunnet løse nedenstående problem selv, så lægger det op til her. En bekendt nævnte noget med double array - have tekst og sti til billede i samme array? Men jeg ved ikke, hvordan, man gør. Er bestemt ikke haj til JavaScript. Og jeg ved slet ikke, om det er løsningen på problemet, eller om der er andre - bedre - løsninger.

Håber, der er nogen, der kan hjælpe.



JavaScriptet:

function myFunction(){
var image = new Array();
image[0] = "http://www.atra.dk/media/random/image01.gif";
image[1] = "http://www.atra.dk/media/random/image02.jpg";
image[2] = "http://www.atra.dk/media/random/image03.jpg";
image[3] = "http://www.atra.dk/media/random/image04.jpg";
myVar = image[Math.round(Math.random()*(image.length-1))];
var myPix = document.getElementById("randompic");
myPix.src = myVar;
}



HTML:

<body onload="myFunction();">

<div id="rightpic">
<img id="randompic" src="http://www.atra.dk/pages/test/image01.gif" height="187" width="332" border="0" alt="TEST" />
</div>
Avatar billede windcape Praktikant
26. februar 2007 - 10:02 #1
hvor skal teksten stå?
Avatar billede softspot Forsker
26. februar 2007 - 10:04 #2
Der er ikke nogen grund til at definere din array hver gang funktionen kaldes, men bort set fra det, så ville jeg mene dette er hvad du søger:

var image = new Array();
image[0] = ["http://www.atra.dk/media/random/image01.gif","Tekst1"];
image[1] = ["http://www.atra.dk/media/random/image02.jpg","Tekst2"];
image[2] = ["http://www.atra.dk/media/random/image03.jpg","Tekst3"];
image[3] = ["http://www.atra.dk/media/random/image04.jpg","Tekst4"];

function myFunction(){
  myVar = image[Math.round(Math.random()*(image.length-1))];
  var myPix = document.getElementById("randompic");
  myPix.src = myVar[0];
  myPix.alt = myVar[1];
}
Avatar billede marnox Nybegynder
26. februar 2007 - 10:11 #3
Hmm .. synes umiddelbart ikke, jeg kan få det til at virke ... Teksten skal stå under billedet - højrestillet. Men det kan jeg vel ordne med en div på en eller måde ..
Avatar billede softspot Forsker
26. februar 2007 - 10:15 #4
Ja, nu smed jeg jo også bare teksten ind i alt-atributten på billedet, da der ikke var lagt op til noget andet, men du kan jo indsætte et div med et id som du smider teksten i i stedet:

<script type="text/javascript">
var image = new Array();
image[0] = ["http://www.atra.dk/media/random/image01.gif","Tekst1"];
image[1] = ["http://www.atra.dk/media/random/image02.jpg","Tekst2"];
image[2] = ["http://www.atra.dk/media/random/image03.jpg","Tekst3"];
image[3] = ["http://www.atra.dk/media/random/image04.jpg","Tekst4"];

function myFunction(){
  var picTxt = document.getElementById("pictekst");
  var myVar = image[Math.round(Math.random()*(image.length-1))];
  var myPix = document.getElementById("randompic");
  myPix.src = myVar[0];
  if(picTxt) picTxt.innerHTML = myVar[1];
}
</script>

<body onload="myFunction();">

<div id="rightpic">
<img id="randompic" src="http://www.atra.dk/pages/test/image01.gif" height="187" width="332" border="0" alt="TEST" />
<div id="pictekst"></div>
</div>
Avatar billede marnox Nybegynder
26. februar 2007 - 10:22 #5
Det virker ... :-) men det er vist mig, der er dårlig til at forklare mig - det er jeg ked af. Teksten er afhængig af billederne. Med andre ord er der forskellig tekst til de forskellige billeder. Og mit eksempel er kun med 4 billeder, men det er meningen, der skal være en del flere. 200 eller lign.

Teksten er en beskrivende tekst, der skal stå lige under billedet. og når billedet skifter, skifter teksten også.

Undskyld, jeg var dårlig til at forklare mig..
Avatar billede softspot Forsker
26. februar 2007 - 10:32 #6
Det er helt fint, sålænge vi kan finde hinanden på et tidspunkt, så er der også en chance for at vi får løst udfordringen :)

Men du har styr på hvad du skal gøre herfra, eller hvad?
Avatar billede softspot Forsker
26. februar 2007 - 10:36 #7
Du kan evt. smide dit array over i en ekstern js-fil som du så inkluderer i siden (se nedenfor). Det giver den fordel at du kan vedligeholde data uden at skulle rette i din html-side, men nok mere interessant, nemlig at js-filen kan caches på klienten, hvilket vil spare båndbredde og downloadtid på klienten...

Læg dette kode i en separat fil og kald den billededata.js:

var image = new Array();
image[0] = ["http://www.atra.dk/media/random/image01.gif","Tekst1"];
image[1] = ["http://www.atra.dk/media/random/image02.jpg","Tekst2"];
image[2] = ["http://www.atra.dk/media/random/image03.jpg","Tekst3"];
image[3] = ["http://www.atra.dk/media/random/image04.jpg","Tekst4"];

og ret selve siden til så den benytter den js-fil i stedet for at lægge koden i selve siden:

<script type="text/javascript" src="billededata.js"></script>
<script type="text/javascript">
function myFunction(){
  var picTxt = document.getElementById("pictekst");
  var myVar = image[Math.round(Math.random()*(image.length-1))];
  var myPix = document.getElementById("randompic");
  myPix.src = myVar[0];
  if(picTxt) picTxt.innerHTML = myVar[1];
}
</script>

<body onload="myFunction();">

<div id="rightpic">
<img id="randompic" src="http://www.atra.dk/pages/test/image01.gif" height="187" width="332" border="0" alt="TEST" />
<div id="pictekst"></div>
</div>
Avatar billede marnox Nybegynder
26. februar 2007 - 10:37 #8
Hehe ... egentlig ikke! Som sagt, er jeg bestemt ikke haj til JS. Jeg tænker, der må være en "nem" måde at kalde både billede og tekst på. Billederne ligger på nuværende tidspunkt i en ekstern js-fil. Det må teksten vel også kunne ... I don't know..

Måske det er "nemt nok" det, du har foreslået. Det virker da i hvert fald - og så behøver jeg ikke tænke mere på det!

.. men .. hvis du har forslag til ovenstående ..
Avatar billede softspot Forsker
26. februar 2007 - 10:46 #9
Jooh, men det afhænger lidt af dit setup, for hvis mængden af billeder og informationen om billederne er statiske, så vil jeg da foreslå dig at bruge den metode med den eksterne js-fil (som det åbenbart lader tli at du allerede gør).

Hvis du derimod arbejder med dynamiske data, så kan du lave et serverside-script der genererer dit array fra gang til gang. Det skal så bare være navnet på det serverside-script der står i src til det eksterne script - eksempel:

<script type="text/javascript" src="billededata.asp"></script>
Avatar billede marnox Nybegynder
26. februar 2007 - 10:52 #10
Om mængden er statisk? .. undskyld, jeg forstår ikke helt, hvad du mener med det. (flov) Det er meningen, mængden skal udvides og ændres i - er det dynamisk på den måde, du mener?
Avatar billede softspot Forsker
26. februar 2007 - 11:22 #11
Med statisk mener jeg at informationerne om billederne ikke ændrer sig (i det mindste ikke særlig ofte). I dette tilfælde er det OK bare at vedligeholde informationerne i en js-fil som et array. Hvis info derimod ændrer sig ofte, f.eks. flere gange om dagen, så er det måske mere hensigtsmæssigt at info om billederne genereres ud fra en database eller lign.
Avatar billede marnox Nybegynder
26. februar 2007 - 11:41 #12
Ok ... i det tilfælde er mængden meget statisk. For teksten til billederne ændrer sig ikke. Billederne bliver højst skiftet helt ud med en helt ny tekst til. Jeg tror bare, jeg bruger det script, du skrev før. Men tak :-)

Hermed points.
Avatar billede softspot Forsker
26. februar 2007 - 15:22 #13
Tak for poinr :)
Avatar billede softspot Forsker
26. februar 2007 - 15:23 #14
Ehm... point... :D
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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