Manual til indsættelse af 3D Produkt Foto på en webside

Emner i manualen

Quick step manual
Download 3D Produkt Foto
Indsættelse af et 3D Produkt Foto på en hjemmeside
Indsættelse med HTML
Indsættelse med JavaScript

Quick Step

1. Download 3D Produkt Fotoet fra www.simpel3d.dk/user.
2. Pak den downloadede fil ud. Evt. med WinZip, WinRar eller 7-Zip.
3. Upload hele mappen med 3D Produkt Fotoets navn til din webserver.
4. Lav en reference fra din html-kode til swf-filen i mappen.
   Den medfølgende .inc-fil indeholder korrekt html-kode, du kan bruge til formålet.

Husk: altid at angive korrekt bredde og højde på din Flash-fil i HTML-koden (Korrekt bredde og højde er angivet i HTML-koden i den medfølgende .inc-fil). Hvis bredde og højde ikke er korrekt angivet, bliver 3D Produkt Fotoet forvrænget og uskarpt.

Husk: Hvis du har uploadet din mappe til anden placering på din webserver end angivet i den medfølgende HTML-kode, skal du naturligvis ændre stien i HTML-koden de relvante steder.

Download 3D Produkt Foto

Gå ind på adressen www.simpel3d.dk/user og vælg det 3D Produkt Foto du vil indsætte på din webside. Når du klikker på download-linket, downloades en pakket fil til din computer. Den pakkede fil har navnet på det pågældende 3D Produkt Foto efterfulgt af ".tar.gz". Et værktøj som winzip eller lign. er nødvendigt for at udpakke filen. Den pakkede fil indeholder en mappe med de filer, du skal bruge for at afvikle 3D Produkt Fotoet.

Indsættelse af et 3D Produkt Foto på webside

Indsættelsen af et 3D Produkt Foto på en webside kan udføres på flere forskellige måder. Følgende er to metoder beskrevet:

• Indsættelse med HTML
• Indsættelse med JavaScript

For begge metoder gælder følgende:

1. Download den pakkede fil indeholdende det pågældende 3D Produkt Foto fra www.simpel3d.dk/user.
2. Pak filen ud. Evt. med WinZip eller WinRar. Du kan også hente et gratis open source udpakningsprogram hos www.7-Zip.org.
3. En mappe med 3D Produkt Fotoets navn er nu blotlagt. Mappen indeholder en flashfil (den fil, der skal referes til fra din webside), en html.inc-fil (indeholder eksempel på html-kode, du kan anvende på din webside til indsættelse af 3D Produkt Fotoet) samt en eventuel zoomImages-mappe (indeholder billeder, der anvendes af flashfilen til en eventuel zoom-funktion).
4. Filen, html.inc flyttes fra mappen og gemmes til senere brug.
5. Mappen uploades nu til din webserver.

NB: Mappens indhold, herunder flashfilen og den eventuelle zoomImage-mappe, må ikke omdøbes og skal altid placeres i samme mappe/direktiv på webserveren.

Efter disse 3 punkter er udført, skal der oprettes en reference fra HTML-koden til 3D Produkt Fotoet, så det kan blive vist i browseren. Denne reference kan indsættes direkte i HTML-koden eller med JavaScript.

Indsættelse med HTML

Indholdet fra html.inc indsættes i et element i HTML-koden på websiden, der hvor 3D Produkt Fotoet ønskes vist.

Eksempel:
html.inc åbnes i en tekst-editor og indholdet kopieres til udklipsholderen (Ctrl+c).
Eksempel på en html.inc fil kan du se her [kode].
I dette eksempel hedder 3D Produkt Fotoet klemme_web og dimensionerne er 350 * 161 pixels.
I eksemplet ligger mappen med 3D Produkt Fotoet på serveres rod. Denne sti er defineret i html.inc. Skulle det ønskes at flytte 3D Produkt Fotoet til en anden mappe på serveren, skal stien naturligvis ændres.
NB: Stien er angivet 4 steder i html.inc.

Web-siden, hvor 3D Produkt Fotoet ønskes vist, åbnes i en teksteditor.

HTML’en fra html.inc sættes ind på siden det ønskede sted. Det kan være en stor hjælp med hensyn til positionering, hvis et div-element anvendes til at holde på den indsatte HTML. Herefter uploades/gemmes siden på web-serveren.

3D Produkt Fotoet er nu indsat, og kan nu anvendes af alle moderne HTML browsere.

Bemærk teksten i den gule kasse over klemmen. Denne tekst betyder, at man enten skal klikke på klemmen eller trykke på enter/mellemrum, før man kan interagere med objektet.
Dette skyldes en opdatering, som Microsoft har lavet til Internet Explorer (det er kun denne browser, der kræver dette ekstra klik), der forhindrer aktivX objekter med brugerinteraktion i at køre i browseren, før man har klikket på dem. I næste eksempel ses, hvorledes et 3D Produkt Foto kan indsættes, så dette "klik" undgås.

Indsættelse med JavaScript

Et 3D Produkt Foto kan indsættes vha. en JavaScript-funktion. Hertil bruges en JavaScript-fil.
Højreklik her og vælg "Gem destination som" for at downloade filen.
Filen hedder functions.js og indeholder en funktion, der indsætter HTML-koden på websiden dynamisk. Dette betyder, at Internet Explorer ikke anmoder brugeren om et ekstra museklik. 3D Produkt Fotoet virker dermed umiddelbart.

I HEAD-sektionen af din hjemmeside indsættes en reference til JavaScript-filen functions.js. Nu kan funktionen anvendes. Fra body-tagget kaldes funktionen fra et såkaldt onLoad event. Altså et event der fremkommer, når browseren har loadet siden.

Funktionsbeskrivelse:

runFlashApplet(flashApp,container,x,y)
Udskriver html-formateret information om beliggenhed af 3D Produkt Foto samt pluginversionering mm.
flashApp: Her angives navnet på 3D Produkt Fotoet.
container: ID på det element (<div>) der skal indeholde 3D Produkt Fotoet.
x: 3D Produkt Fotoets vidde
y: 3D Produkt Fotoets højde

Eksempel:
I dette eksempel anvendes samme webside, som vist på fig. 1.
I HEAD-sektionen indsættes en reference til JavaScript-filen på følgende måde.

<script type="text/javaScript" src="functions.js">
document.write("Der blev ikke opnået forbindelse til filen")
</script>

I body-tagget indsættes et kald til funktionen runFlashApplet(flashApp,container,x,y).

<BODY onLoad="runFlashApplet('klemme_web','somewhere',350,161);">

3D Produkt Fotoet hedder klemme_web. Det element der skal indeholde 3D Produkt Fotoet har ID'et somewhere og dimensionerne på 3D Produkt Fotoet er 350 * 161 pixels.
JavaScript-funktionen sørger nu for indsættelsen af HTML’en i det element, der har ID'et somewhere.

3D Produkt Fotoet er nu indsat, og der er ikke anmodning om et museklik i Internet Explorer. 3D Produkt Fotoet kan nu anvendes af alle moderne HTML-browsere med JavaScript.

Du er altid meget velkommen til at stille tekniske spørgsmål til vores programmør Jonathan Prehn på teknik@s3d.dk eller på tlf: 61 70 88 54.