Avatar billede scanjan Nybegynder
07. april 2003 - 11:51 Der er 9 kommentarer

Håndtering af billeder...

Ved ikke om emnet har været oppe før, men hvordan laver man
billeder ligesom det på f.eks. www.gamereactor.dk, hvor
man har en masse små billeder liggende og når man så klikker
bliver det større....?? Hvor meget vil et sådant billede fylde og
kan man lave så man bare trykker næste (eller evt. en pil)når
det første billede er oppe..??

Kan det løses vha. html eller...??
Avatar billede schaefner Juniormester
07. april 2003 - 11:53 #1
hvor henne på siden ser du det?
Avatar billede doodoo Novice
07. april 2003 - 11:56 #2
hmmm hvis du trækker et lille billede større bliver det da pixeleret af h... til...
Avatar billede scanjan Nybegynder
07. april 2003 - 11:57 #3
Hvis man f.eks. søger på et spil, så ligger der screendumps og når man klikker på det "lille" billede popper der så et "større" billede op.
Avatar billede jakobclausen Nybegynder
07. april 2003 - 11:58 #4
Det er ved at have været oppe en del gange her på eksperten, du kan f.eks. bruge Photoshop, som kan autogenere det du snakker om.
Avatar billede jakobclausen Nybegynder
07. april 2003 - 12:01 #5
Avatar billede scanjan Nybegynder
07. april 2003 - 12:02 #6
Jeg tænkte på om det kan løses med ren html....har fået at vide det også kan løses i Dreamweaver - men ville gerne prøve med ren html...
Avatar billede jakobclausen Nybegynder
07. april 2003 - 12:08 #7
ved hjælp af html og evt. lidt JavaScript kan det sagtens løses.
Det vil være et stort stykke arbejde at lave det manuelt men kan sagtens lade sig gøre:

(1) Lav dit billede i stor og lille størrelse (Kan evt. bruge irfan View: http://download.com.com/3000-2192-10180889.html?tag=lst-0-1)

(2) På din html side, bruger du nedenstående kode:

<-- Sættes ind mellem <head> og </head> -->
<Script Language="JavaScript">
// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this notice.

// SETUPS:
// ===============================

// Set the horizontal and vertical position for the popup

PositionX = 100;
PositionY = 100;

// Set these value approximately 20 pixels greater than the
// size of the largest image to be used (needed for Netscape)

defaultWidth  = 500;
defaultHeight = 500;

// Set autoclose true to have the window close automatically
// Set autoclose false to allow multiple popup windows

var AutoClose = true;

// Do not edit below this line...
// ================================
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');     
writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
close();       
}}
</script>

<-- Sættes ind mellem <body> og </body> -->

<a href="java script:popImage('big.jpg','Grønt billede')">
<img src="small.jpg" border="0">
</a>

På din side vil der nu ligge et lille billede og når du klikker på det, vil det åbne i stort format, scriptet finder selv ud af hvor stort billedet er!
Se eksempel: http://www.bokaj.dk/eksperten/gribben/

</a>
Avatar billede scanjan Nybegynder
07. april 2003 - 12:12 #8
Ok....tror jeg holder mig til Photoshop....men når det så er lavet i Photoshop, hvordan skal man så lave det i html..??
Avatar billede jakobclausen Nybegynder
07. april 2003 - 13:49 #9
Den laver det hele for dig, også html dokumenterne

file -> automate -> web gallery
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