CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

kodak Mester

02. maj 2020 - 02:09 Der er 5 kommentarer

billede position

Jeg har en XML fil der indeholder Information om hvor billeder skal placeres over en baggrund.

XML'en starter med at oplyse hvilke billede kilder der er til hvilke billede id.

<?xml version="1.0" encoding="UTF-8"?>
<icwproject name="OVERSKRIFT" version="2">
<images>
<image active="cleaning_active.png" id="cleaning" inactive="cleaning_inactive.png" noresource="cleaning_noresource.png" preview="cleaning_preview.png" /> <<-- IKON
<image active="pendant_active.png" id="pendant" inactive="pendant_inactive.png" noresource="pendant_noresource.png" preview="pendant_preview.png" /> <<-- IKON
<image file="GG 2.png" id="baggrund-1" /> <<-- BAGGRUND
</images>

Og fortsætter med placeringer og navne:

<scenes>
<scene name="web" type="web">
<description/>
<imageref id="baggrund-1" /> <<-- BAGGRUND billede id.
<sceneelements>
<resourcebinaryelement name="" type="" x="44" y="197" z="" r=""> <<-- IKON billede placering.
<description/> <<-- IKON MouseOver title/alt
<imageref id="tablelamp" /> <<-- IKON billede id.
<format fontscaling="70" imagescaling="70" labelcolor="#000000" labelposition="top" /> <<-- IKON størrelse & Tekst farve, størrelse & placering i forhold til billede.
</resourcebinaryelement>

Hvordan udlæser jeg disse værdier og får dem til at vise den ønskede baggrund med ikonerne over?

Synes godt om

Slater Ekspert

02. maj 2020 - 08:23 #1

Kan vi få noget kontekst omkring hvordan det skal bruges/indlæses?

Du har lagt det i Javascript-kategorien. Betyder det at XML-filen bliver indlæst på et website med AJAX og skal parses i front-end Javascript-kode? Det er i min erfaring ekstremt sjældent at nogen bruger XML med Javascript på den måde. Eller er det måske Node det skal læses i? Eller noget helt andet?

Og hvordan skal det vises? Hvis det ikke er front-end Javascript, snakker vi så stadig om at vise det på et HTML-baseret website? Er positionerne absolutte pixel-placeringer eller noget andet?

Synes godt om

kodak Mester

02. maj 2020 - 12:51 #2

Tænker javascript er smartest da man senere skal kunne flytte runder på de billeder, eller hvad mener du kan klare det?

Filen er i en mappe, og skal blot vise sit indhold i lag.

Synes godt om

Slater Ekspert

02. maj 2020 - 14:49 #3

Okay, så du tænker helt almindelig browser-baseret Javascript der tegner HTML.

Javascript er desværre ikke specielt godt egnet til at arbejde med XML, så egentlig ville jeg foretrække at få en backend til at omformatere det til noget lettere at arbejde med, men det kan sagtens lade sig gøre.

Her er et eksempel på et script der henter filen og opsamler billeddataene:

function fetchXML(url) {
return fetch(url)
.then(res => res.text())
.then(str => (new DOMParser).parseFromString(str, 'application/xml'))
.then(xml => { return xml; });
}

function buildScene(scene) {
// Byg HTML elementerne her ud fra scenen.
}

window.addEventListener('DOMContentLoaded', async () => {
let xml = await fetchXML('data.xml');
let images = {};

[].forEach.call(xml.getElementsByTagName('images').item(0).children, image => {
images[image.id] = {
active: image.getAttribute('active'),
inactive: image.getAttribute('inactive'),
preview: image.getAttribute('preview'),
file: image.getAttribute('file')
}
});

[].forEach.call(xml.getElementsByTagName('scenes').item(0).children, scene => buildScene(scene));
});

Jeg ved ikke om det hjælper dig nok på vej til at du kan lave resten. Ellers må du sige til. Jeg vil bare ikke lave det hele uden feedback fra dig, da det trods alt tager lidt tid.

Synes godt om

kodak Mester

02. maj 2020 - 16:01 #4

Er det bedre at hente det med php?

Synes godt om

kodak Mester

02. maj 2020 - 16:19 #5

Jeg tænkte at det skulle ende noget i stil med dette:
https://files.fm/u/axxvqj5v

Blot med fikseringen af ikoner skal være center i stedet for øverste venstre hjørne.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS