html - Billed funktion - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #4468 @ 25.05.04 23:58

Hvordan kan man lave en hjemmeside funktion som kommer til at virke lidt ligesom xp's billed mapper? Hvor man nederst kan se alle billederne og så trykke på et og så bliver det forstørret oven over? Kan det laves i HTML/JS eller ska jeg over i noget PHP?
Mvh.
Rune Jensen
---------------------------------------------------------------------------
##The one who laugh last is the one who think slowest!##
---------------------------------------------------------------------------

10 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #5620 @ 26.05.04 13:15

1.500

Dette her gør hvad du ænsker der er storset intet layout i det, og det kræver at javascript er enabled.
Evt. forbedring kunne være at lade php lave img taggene udfra billeder i en folder på serveren. At ændre det så det loader små billeder til de små billeder og så henter et stort til det store billed.

Kode

<script>
  function displayLargeImage(aImage)
	{
	  document.getElementById('largeImage').innerHTML='<img src="'+aImage.src+'">';
	}
</script>
<style>
  img{display:inline}
</style>

<div id="largeImage" align="center"></div>
<img src="landscape1.jpg" width="150" height="150" alt="" border="0" onclick="displayLargeImage(this)">
<img src="landscape2.jpg" width="150" height="150" alt="" border="0" onclick="displayLargeImage(this)">
<img src="landscape3.jpg" width="150" height="150" alt="" border="0" onclick="displayLargeImage(this)">
<img src="landscape4.jpg" width="150" height="150" alt="" border="0" onclick="displayLargeImage(this)">
<img src="landscape5.jpg" width="150" height="150" alt="" border="0" onclick="displayLargeImage(this)">

Min side ->www.the-hive.dk/~donp/

Bruger #5779 @ 26.05.04 09:01

305

Hej

Du burde sagtens kunne lave det med ren XHTML og noget JavaScript. Når du klikker på et billede link kan du jo udskifte <img> tag'et direkte med noget javascript, og sætte dens SRC attribute lig med URL'en til det billede du har klikket på.

Mvh. Thomas Lykke Petersen

Bruger #1151 @ 26.05.04 00:45

421

Hvordan kan man lave en hjemmeside funktion som kommer til at virke lidt ligesom xp's billed mapper? Hvor man nederst kan se alle billederne og så trykke på et og så bliver det forstørret oven over? Kan det laves i HTML/JS eller ska jeg over i noget PHP?
Mvh.
Rune Jensen
---------------------------------------------------------------------------
##The one who laugh last is the one who think slowest!##
---------------------------------------------------------------------------

Har aldrig prøvet at lave det, men jeg vil da mene at du kan lave det med en lidt php og self. xhtml

MxS @ http://mxs.frac.dk
Slamkodning for fred

[Redigeret d. 26/05-04 00:45:33 af Martin Slot]

Bruger #206 @ 26.05.04 01:20

252

Hvordan kan man lave en hjemmeside funktion som kommer til at virke lidt ligesom xp's billed mapper? Hvor man nederst kan se alle billederne og så trykke på et og så bliver det forstørret oven over? Kan det laves i HTML/JS eller ska jeg over i noget PHP?
Mvh.
Rune Jensen
---------------------------------------------------------------------------
##The one who laugh last is the one who think slowest!##
---------------------------------------------------------------------------

Det er sådan, at det du ser i windows xp faktisk er vbscript og html - så det burde uden videre kunne lade sig gøre. Det går nok lidt langsommere over internettet, men det kan sagtens lade sig gøre

Casper

Bruger #5789 @ 26.05.04 11:45

640

Ved godt man skal holde sig fra frames... men lige til dette formål kunne det være en glimrende ide at benytte iframes til læsningen... der skal selvfølgelig lidt php til eller hvilket server script du nu benytter for at vise forskellige gallerier...

Hvis du ikke er helt kåd til iframes, kan du starte photoshop 7 eller ældre og lave et galleri med nogle billeder... så har du noget fint kode at "låne" lidt fra..

Med venlig hilsen
/Jokke Jensen
www.jj-multimediedesign.dk

Bruger #5779 @ 26.05.04 13:50

305

Nørden, ja lige præcis mine ord

Mvh. Thomas Lykke Petersen

Bruger #4468 @ 26.05.04 22:57

221

Dette her gør hvad du ænsker der er storset intet layout i det, og det kræver at javascript er enabled.
Evt. forbedring kunne være at lade php lave img taggene udfra billeder i en folder på serveren. At ændre det så det loader små billeder til de små billeder og så henter et stort til det store billed.
Kode
<script>
  function displayLargeImage(aImage)
	{
	  document.getElementById('largeImage').innerHTML='<img src="'+aImage.src+'">';
	}
</script>
<style>
  img{display:inline}
</style>

<div id="largeImage" align="center"></div>
<img src="landscape1.jpg" width="150" height="150" alt="" border="0" onclick="displayLargeImage(this)">
<img src="landscape2.jpg" width="150" height="150" alt="" border="0" onclick="displayLargeImage(this)">
<img src="landscape3.jpg" width="150" height="150" alt="" border="0" onclick="displayLargeImage(this)">
<img src="landscape4.jpg" width="150" height="150" alt="" border="0" onclick="displayLargeImage(this)">
<img src="landscape5.jpg" width="150" height="150" alt="" border="0" onclick="displayLargeImage(this)">
Min side ->www.the-hive.dk/~donp/

Det er bar nice

li det jeg gerne ville have.. noget jeg kunne arbejde videre på

men mange tak for hjælpen allesammen

Mvh.
Rune Jensen
---------------------------------------------------------------------------
##The one who laugh last is the one who think slowest!##
---------------------------------------------------------------------------

Bruger #4468 @ 26.05.04 23:00

221

Nå ja... lige en ting til.. hvordan laver jeg så den automatisk starter på det første billede?
Mvh.
Rune Jensen
---------------------------------------------------------------------------
##The one who laugh last is the one who think slowest!##
---------------------------------------------------------------------------

Bruger #5620 @ 26.05.04 23:14

1.500

udskift.

<div id="largeImage" align="center"></div>

med

<div id="largeImage" align="center"><img src="FØRSTEBILLED"></div>

Bruger #4468 @ 26.05.04 23:36

221

udskift.

<div id="largeImage" align="center"></div>

med

<div id="largeImage" align="center"><img src="FØRSTEBILLED"></div>

Mange tak!

Mvh.
Rune Jensen
---------------------------------------------------------------------------
##The one who laugh last is the one who think slowest!##
---------------------------------------------------------------------------

Billed funktion

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler