Erstellen eines Simulators Bild mit mehreren Links auf Hompage

Simulator · 24.10.2024

Hallo an die geballte Fachkompetenz,
ich tragen mich mit dem Gedanken einen Simulator zu erstellen.
Zur Erklärung:
Ein Foto eines Gerätes mit mehreren Tasten soll dargestellt werden.
Die Bereiche der Tasten möchte ich mit einem Link hinterlegen, die dann bei "Tastendruck" ein neues Bild laden.
Also verschiedene Tasten in einem Bild, ergo mehrere Links in einem Bild.
In dem neuen Bild sind dann wieder Tasten usw....
Also im Grunde nur eine "Homepage" oder etwas vergleichbares bei dem nur ein Foto zu sehen ist, was dann bei Betätigung der "Tasten" ein anders Foto laden lässt.
Für mehrere Links in einem Bild habe ich das hier gefunden "image-map.net"

Womit erstelle ich auf einfachen Weg meine "Homepage"

Oder was schlagt Ihr vor?

Ist "homepage" der richtige Weg oder bin ich gedanklich schon falsch abgebogen?
Die Ansicht soll dann über Dropbox oder auch eine Homepage im "geschützten Bereich möglich sein.

Es sollte dann nach Möglichkeit natürlich auch für Endgeräte optimiert sein.
Also nicht nur am PC gut aussehen...
Bin gespannt auf Vorschläge

Vielen Dank

Sempervivum · 24.10.2024

Hallo und willkommen im Forum!
Was Du vorhast, kannst Du mit Image-Map umsetzen aber diese Methode ist ein wenig veraltet. Besonders wenn mit festen Positionen der Shapes gearbeitet wird, wie auf "image-map.net". Du möchtest ja, dass der Simulator auf allen Endgeräten gut aussieht, da sind feste Positionen ein no-go, denn das Foto mit den Tasten soll sich ja an die Abmessungen des Browserfensters anpassen.
Besser für deinen Zweck ist es, Rechtecke mit Links durch CSS über das Foto zu legen. Ich habe da etwas in der Schublade, was Du für deine Zwecke anpassen kannst:

Code:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Interaktive Weltkarte</title>

    <style>
        body {
            position: relative;
        }

        #worldmap {
            width: 100%;
            height: auto;
        }

        a {
            display: inline-block;
            width: 5%;
            position: absolute;
        }

        img {
            width: 100%;
            height: auto;
        }

        /* img.dog {
            border-radius: 50%;
        } */

        #golden-retriever {
            left: 40%;
            top: 20%;
        }

        #collie {
            left: 60%;
            top: 40%;
        }
    </style>
</head>

<body>
    <img id="worldmap" src="../../images/worldmap.svg" />
    <a id="golden-retriever" href="https://de.wikipedia.org/wiki/Golden_Retriever">
        <img class="dog" src="../../images/golden-retriever-cropped.jpg" />
    </a>
    <a class="dog" id="collie" href="https://de.wikipedia.org/wiki/Langhaarcollie">
        <img class="dog" src="../../images/collie-cropped.jpg" />
    </a>
</body>

</html>

Wenn sich dazu Fragen ergeben, melde dich wieder.

Simulator · 25.10.2024

Sempervivum schrieb:
Hallo und willkommen im Forum!
Was Du vorhast, kannst Du mit Image-Map umsetzen aber diese Methode ist ein wenig veraltet. Besonders wenn mit festen Positionen der Shapes gearbeitet wird, wie auf "image-map.net". Du möchtest ja, dass der Simulator auf allen Endgeräten gut aussieht, da sind feste Positionen ein no-go, denn das Foto mit den Tasten soll sich ja an die Abmessungen des Browserfensters anpassen.
Besser für deinen Zweck ist es, Rechtecke mit Links durch CSS über das Foto zu legen. Ich habe da etwas in der Schublade, was Du für deine Zwecke anpassen kannst:

Code:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Interaktive Weltkarte</title> <style> body { position: relative; } #worldmap { width: 100%; height: auto; } a { display: inline-block; width: 5%; position: absolute; } img { width: 100%; height: auto; } /* img.dog { border-radius: 50%; } */ #golden-retriever { left: 40%; top: 20%; } #collie { left: 60%; top: 40%; } </style> </head> <body> <img id="worldmap" src="../../images/worldmap.svg" /> <a id="golden-retriever" href="https://de.wikipedia.org/wiki/Golden_Retriever"> <img class="dog" src="../../images/golden-retriever-cropped.jpg" /> </a> <a class="dog" id="collie" href="https://de.wikipedia.org/wiki/Langhaarcollie"> <img class="dog" src="../../images/collie-cropped.jpg" /> </a> </body> </html>

Wenn sich dazu Fragen ergeben, melde dich wieder.

Vielen Dank für deine Antwort.
Welches Programm (nach Möglichkeit kostenfrei) schlägst du zum erstellen der Hompage-Seite vor? Ist lange her, dass ich eine Homepage selber erstellt habe. Jetzt nutze ich für eine "richtige HP einen Baukasten vom Provider.
Für meinen Simulator brauche ich ja im Grunde nur eine Seite in der das neue Bild dann geladen wird.
Vielen Dank

Sempervivum · 26.10.2024

Für meinen Simulator brauche ich ja im Grunde nur eine Seite in der das neue Bild dann geladen wird.

Wenn das so ist, brauchst Du keinen Baukasten, um diese Seite zu erstellen, er wird dir eher in Wege stehen.

Welches Programm (nach Möglichkeit kostenfrei) schlägst du zum erstellen der Hompage-Seite vor?

Definitiv Visual-Studio-Code. Damit siehst Du sofort beim Editieren ob dein Code fehlerfrei ist.
Lade dort meinen Code von oben, versuche, ihn zu verstehen und frage, wenn Du nicht weiter kommst.

Simulator · 27.10.2024

Stimmt, die Baukästen machen keinen Sinn für mich, habe ich auch bereits probiert.
Habe jetzt mal mit Phase5.6 eine Seite erstellt und mit image-map.net mir die Links auf meine stellen die es anzuklicken gilt gesetzt. Es scheint soweit zu funktionieren...
Jetzt bastel ich mal weiter ...

Wenn du /Ihr noch gute Tipps habt, immer gern.
Z.B. Unterschied bzw. Vorteile von Visual-Studio-Code zu Phase 5
Vielen Dank

scatello · 27.10.2024

Phase 5 ist total veraltet, die letzte Version stammt aus 2009. HTML 5 und CSS 3 kennt dieser Editor nicht und ist daher unbrauchbar.

Sempervivum · 27.10.2024

mit image-map.net mir die Links auf meine stellen die es anzuklicken gilt gesetzt. Es scheint soweit zu funktionieren...

Hast Du dir das Ergebnis schon Mal auf einem Handy angesehen? Wie oben schon geschrieben, erzeugt image-map.net feste Positionen und Abmessungen für die klickbaren Bereiche. Das macht es praktisch unmöglich, die Image-Map responsiv zu machen. Ein no-go.

Simulator · 05.11.2024

moin, sorry, hatte leider keine Zeit weiter zu basten ;-(
Habe mir jetzt mal deine Vorlage genauer angesehen und gebastelt ;-)
Wie bekomme ich den Rand von dem erzeugten Linkbereich weg ?
oder auch
Wie bekomme ich einen transparenten Link hin?
Ich möchte nicht zwingend ein Bild als Link einfügen...
Also einfach nur ein hinterlegter Linkbereich, der aber nicht sichtbar ist sondern nur dann als Link erscheint, wenn ich mit der Maus rübergehe?
Vielen Dank

Sempervivum · 05.11.2024

Das ist eine berechtigte Frage, denn die Buttons sind ja sicher schon in deinem Bild vorhanden. Du brauchst nur das img-Tag im HTML weg zu lassen:

Code:

    <a id="golden-retriever" href="https://de.wikipedia.org/wiki/Golden_Retriever">
    </a>
    <a class="dog" id="collie" href="https://de.wikipedia.org/wiki/Langhaarcollie">
    </a>

Und weil die Links dann leer sind, musst Du ihnen auch eine Höhe geben:

Code:

        a {
            display: inline-block;
            width: 5%;
            height: 3%;
            position: absolute;
        }

Simulator · 05.11.2024

Moin, Vielen Dank für deinen Tipp!
Ich habe mich wahrscheinlich unklar ausgedrückt ;-(
Hab es jetzt mal wie von dir beschrieben probiert, dann sind die Links aber komplett weg ;-(

Im Grunde sollte es so sein wie deins aus der "Schublade" nur sollten anstelle der Bilder "unsichtbare Links sein" also bei Maus über den definierten Bereich (bzw. dann dort klicken) sollte auf eine andere Seite umgeleitet werden.

Vielen Dank!!

Sempervivum · 05.11.2024

Die Links sind nicht weg, sie sind bloß nicht sichtbar. Jedenfalls wenn Du auch mein CSS übernommen hast.

Simulator · 06.11.2024

Moin nochmal ;-)
Vielen Dank!
so Schritt für Schritt komme ich voran...
Die Links waren nicht weg nur woanders ;-)

Klappt also soweit!
Nun wollte ich die html Datei nebst meiner svg Datei in einer Dropbox ablegen,
damit ich diese dann per Link aus der dropbox ansehen kann oder auch auf einem Android ansehen oder runterladen kann.

Die html datei wird dann leider ohne mein Bild ( svg) angezeigt ;-(
Der in der html Datei eingefügte Link gehen aber...

Ich habe die svg und die html Datei in einem Ordner abgespeichert... (so auch im Visual Studio)

Hast du dafür eine Idee?

Simulator · 07.11.2024

Nach weiteren Versuchen....
Habe die Datei mal auf einen Server geladen, da läuft es nun ;-)
Auch auf einem Android wird beim Zoomen der Link richtig dargestellt.

Was jedoch (noch) nicht klappt ist wenn ich die Dateien über die Dropbox auf ein Android Handy runterlade, auch wenn ich diese dann alle in einen Ordner ablege.
Mal schauen, ob ich dass auch noch hin gebastelt bekomme.
Vorteil ist dann man muss nicht online sein um damit zu arbeiten. Das wäre noch mein Ziel....

Sempervivum · 08.11.2024

Es gibt HTML-Viewer- und Webserver-Apps für Android aber ich habe damit nicht die besten Erfahrungen gemacht. Mit dem Cx-Dateiexplorer geht es jedoch einwandfrei, dieser hat offenbar einen Webserver eingebaut.