Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 14854, member: 3917"]
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>

#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>

</html>[/CODE]
Wenn sich dazu Fragen ergeben, melde dich wieder.
[/QUOTE]

Authentifizierung