Avatar billede thoko Nybegynder
02. november 2009 - 22:59 Der er 7 kommentarer

Knapper til enkeltvis hentning / visning af billeder på aktuel side

Med trykknapper (buttons) skal jeg individuelt kunne hente 6 forskellige billeder til visning samme sted på aktuel side (i iframe?).
Hvilken kode skal jeg (udover det enkelte billedes ident) indlægge efter "onclick" for at hente det enkelte billede?
Hvilken kode skal jeg angive det sted på siden hvor billederne skal vises et ad gangen for hvert knaptryk?
Avatar billede fant0mas Nybegynder
03. november 2009 - 00:32 #1
Så skulle den være lige til hjørebenet:

<html>
<head>
<title>Vis billeder</title>
<script type="text/javascript">
var images = ['http://www.eksperten.dk/images/eksperten_logo.gif', 'http://www.eksperten.dk/themes/theme_eksperten/images/spotmenu_top.gif'];
function setImage(i){
document.getElementById('img').src = images[i];
}
</script>
</head>
<body>
<input type="button" onclick="setImage(0)" value="Billede 0" />
<input type="button" onclick="setImage(1)" value="Billede 1" />
<div><img src="" id="img" border="0" /></div>
</body>
</html>
Avatar billede Slettet bruger
03. november 2009 - 00:45 #2
Det kan man kun gøre på en milliard forskellige måder...

F.eks:

<html><body>
<span onclick="document.ramme.src='pix1.jpg'">#1</span>
<span onclick="document.ramme.src='pix2.jpg'">#2</span>
<span onclick="document.ramme.src='pix3.jpg'">#3</span>
<span onclick="document.ramme.src='pix4.jpg'">#4</span>
<span onclick="document.ramme.src='pix5.jpg'">#5</span>
<hr>
<img name='ramme' src='pix1.jpg'>
</body></html>
Avatar billede Slettet bruger
03. november 2009 - 18:37 #3
<script type="text/javascript">
// Element til at vise billederne.
var dd = document.getElementById('pictureHolder');

// Array for billederne
var im = new Array("billed1.jpg", "billed2.jpg", "billed3.jpg");

// Load billederne
for ( iq=0; iq < im.length; iq++) {
  var d = new Image();
  d.src = im[iq];
}

// Funktion til at skifte billeder
function __loadPictures(iq) {
  if ( dd ) {
      dd.setAttribute("src", im[iq]);
  }
}
</script>


HTML del:
<html><head></head>

<body>
<img src="java script://" id="pictureHolder" />

<a href="java script:__loadPictures(0)">Load billed 1 fra Arrayet</a> -
<a href="java script:__loadPictures(1)">Load billed 2 fra Arrayet</a> -
<a href="java script:__loadPictures(2)">Load billed 3 fra Arrayet</a>
</body></html>


-----------------------------------------------------------------------------------------------------------------------------
HackTest ApS
- Få en gennemgående sikkerhedsanalyse af dit website før hackere ødelægger din forretning!

http://hacktest.dk
Avatar billede thoko Nybegynder
03. november 2009 - 21:58 #4
Jeg burde nok have nævnt, at de enkelte billeder skal hentes med et link som dette:

<a href="http://www.meteorologica.info/Eurohumidity.asp">
<img border="0" src="http://www.meteorologica.info/FreeImages/eurohumidity.jpg" width="768" height="576"></a>

Hvordan foretager jeg den nødvendige tilpasning for indlæggelse i array?
Avatar billede fant0mas Nybegynder
03. november 2009 - 22:17 #5
Det kunne gøre sådan:

<html>
<head>
<title>Vis billeder</title>
<script type="text/javascript">

images = [];
images[0] = { url: 'http://www.meteorologica.info/pony.asp', image: 'http://www.meteorologica.info/FreeImages/eurohumidity.jpg' };
images[1] = { url: 'http://www.meteorologica.info/hest.asp', image: 'http://www.eksperten.dk/images/eksperten_logo.gif' };

function setImage(i){
document.getElementById('img').src = images[i].image;
document.getElementById('url').href = images[i].url;
}
</script>
</head>
<body>
<input type="button" onclick="setImage(0)" value="Billede 0" />
<input type="button" onclick="setImage(1)" value="Billede 1" />
<div><a id="url" href=""><img src="" id="img" border="0" /></a></div>
</body>
</html>
Avatar billede thoko Nybegynder
04. november 2009 - 21:05 #6
fant0mas

Tak for hjælpen.
Du skylder mig et svar!
Avatar billede fant0mas Nybegynder
04. november 2009 - 21:39 #7
Ellers tak.
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