Foto's laten verschijnen bij klikken op een tekening

 

Hi ,

Ik heb een zelf gemaakt schema plattegrond met op de tekening diverse nummers welke verwijzen naar een bepaald item . Van deze items heb ik foto’s gemaakt .

Is er een programma waarbij met het aanklikken van het nummer op de plattegrond het betreffende item als foto wordt geopend ? Of hoe anders dit het beste aan te pakken ?

In welke context?

 

Anderen binnen onze organisatie moeten dit eventueel ook kunnen gebruiken als ze de tekening willen bekijken , als men dan een nummer aanklikt op betreffende tekening zou het mooi zijn als er een foto van het onderdeel , in dit geval poorten in een hekwerk , naar voren komt .

 

Bedoel je dit of wat anders …?

Dus het komt op een intranet?

Dan kom je waarschijnlijk toch bij Applicaties terecht zoals Adobe Acrobat Professional, Keynote, MS Word etc. In een standaard afbeelding kunnen geen verwijzigingen worden gemaakt (.jpg, .png). In pdf en html kan dit wel.

Ik ben nu de laatste hand aan de tekeningen aan het leggen in Adobe Elements , kan het dus omzetten naar behoorlijk wat bestanden .

Kan er niet een document van worden gemaakt die men dan op eigen PC opslaat en bij openen dat men dan de tekening ziet en dan daarop de nummers klikken zodat de foto’s openen ?

Kan inderdaad op een intranet .

Als het een document moet zijn wat je opslaat op je eigen pc, en onafhankelijk van intra/internet verbinding zou je een PDF kunnen maken.

Zoiets: Creating a PDF with popups

 

Ik zou het inderdaad het simpels aanpakken. Maak op de intranet server een mapje met alle foto’s en maak een html document om de plattegrond waarin de juiste verwijzingen naar de foto’s staan.

Als je het wilt realiseren binnen een Applicatie, dan dient iedere ‘bekijker’ over deze Applikatie te beschikken. Beter is te werken met universele bestanden zoals pdf, .html en .doc(x), alhoewel dat laatste al wat bedenkelijker wordt. Ook een Intranet met Wordpress is universeel.

Misschien brengt onderstaande url je op ideeën:

https://itstillworks.com/word-document-powerpoint-document-6920629.html

En als je de weg volgt van @Night, dan heeft Wordpress plug-ins (zoek op hotspots), om dit te realiseren.

Je kunt een simpele HTML pagina maken met die afbeelding als achtergrond. Dat is de start. Dan heb je twee mogelijkheden:

  • Daar overheen kun je een tabel leggen met in elk vlak een eigen click en dus link naar beeld
  • Of je maakt een map aan, en als daarop geklikt wordt open je ook weer een onderdeel.
Een paar links om het te leren:

https://www.w3schools.com/tags/tag_map.asp

of

https://youtu.be/PAfcPIMmQ8Y

of

https://html.com/images/how-to-make-an-image-map/

Het is even wat werk. Maar mogelijk. En alles kun je gemakkelijk op intranet zetten.

hier nog een wat duidelijker uitleg : Image maps

Let wel op dat Image Maps vaste afmetingen hebben. Ze functioneren minder goed in schaalbare technieken. Zoals ontwerpen voor je desktop en dan bekijken op je iPhone. Dat geeft problemen omdat de coördinaten op zo’n moment niet meer kloppen.

 

" Maak op de intranet server een mapje met alle foto’s en maak een html document om de plattegrond waarin de juiste verwijzingen naar de foto’s staan"

Zo had ik het in eerste instantie ook bedacht maar was opzoek naar een mooi alternatief .

 

Ik ga eens naar de alternatieven kijken

Zoals al gezegd: HTML met de afbeelding en klikbare stukken er overheen die linken naar de gewenste foto’s. Geen tabel, gebruik liever iets als A’s met display: block die je dan absoluut positioneert met relatieve coördinaten en afmetingen (bijvoorbeeld percentages) zodat je ze kunt zetten waar je ze nodig hebt.

met Google Maps API is echt alles mogelijk

https://developers.google.com/maps/documentation/javascript/tutorial

EDIT: ik dacht even dat je een (land) kaart als achtergrond had… maar waarschijnlijk is dat niet het geval. Dan is Maps natuurlijk minder / niet geschikt.

Je zou ook naar SVG -overlay kunnen lijken. Dan kan je ook willekeurige vormen toekennen doe klikbaar worden.

Hier een voorbeeld van een tabel. Je kunt in elk vak ook een transparant plaatje opnemen met een bepaalde afmeting. Dan wordt de tabel keurig.

Hier een compleet voorbeeld: https://html.com/attributes/table-background/