Einzelne kleine Bilder über 'grosses' Grid legen? (Grundsatzfrage)

klwild

klwild

Grünschnabel
Hallo zusammen. Vorweg, ich weiss gar nicht ob das überhaupt so wie geplant geht und diese Forum (tutorials.de) ist das richtige, weil es alle Komponeten vereinigt.

Ich habe einen Code (HTML & PHP) der aus einem <iFrame> in WordPress als eigenständige Seite aufgerufen werden:

<div style="margin: 0 auto;text-align: center;">
<img usemap="#gridmap" src="grid.png" width="1000" height="1000" style="text-align: center" />
</div>

...

<map name="gridmap">
echo "<area shape='rect' coords='".$adds[$i][5].",".$adds[$i][6].",".$adds[$i][7].",".$adds[$i][8].".' href='".$adds[$i][3]."' target='_blank' title='".$adds[$i][2]."' />";
echo "<area shape='rect' coords='".$adds[$i][5].",".$adds[$i][6].",".$adds[$i][7].",".$adds[$i][8].".' href='".$adds[$i][3]."' target='_blank' title='".$adds[$i][2]."' />";
...
</map>

... in dem ein grid.png als Hintergrund der ganzen Seite angezeigt wird und darauf (aus dgrid2.pnger Datenbank) einzelne Areas definiert werden. Das funktioniert. (Mit der Maus drüberfahren oder klicken).

Anschaut werden kann das auf: "Startseite - Hunderttausend Zuger Unternehmen" und es gibt zwei Beispiele. Oben links und unten Rechts wo sich er Mauscursor verändert.

Mein Problem ist nun das ich auf den verschiedenen <area>'s jeweils eine dazugehöriges kleines Bild anzeigen möchte und ich für jedes Bild die Grössenangabe (x,y/x,y) habe. Etwa so:

<<grid2.png>>

Meine Grundsatzfrage: Ist mein Grundgedanke bzw. meine Konzept überhaupt so machbar oder muss ich einen komplett anderen Ansatz wählen? Hier habe ich einiges gefunden aber nichts hat wirklich funktioniert!

Danke Klaus
 
Guten Morgen @klwild und willkommen im Forum.
Mit einer Imagemap, wie Du sie verwendest, geht das leider nicht ohne größere Klimmzüge. Sie hat ohnehin den Nachteil, dass sie nicht responsiv ist. Selfhtml empfiehlt als Alternative SVG:
SVG/Tutorials/responsive Imagemaps – SELFHTML-Wiki
Ist die Form der Bereiche einfach, ein Kreis oder Rechteck, kann man jedoch einfach HTML-Elemente über die Hintergrundgrafik legen, diese lassen sich problemlos responsiv machen.
Du bist nicht der erste, der diese Frage stellt, daher habe ich etwas in der Schublade, versuche, ob Du das für deine Verhältnisse anpassen kannst:
Code: 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</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%;
            }

        /* Das folgende sind die Positionen der kleinen Hundebilder. Bei left und top musst Du die
        Werte eintragen, die Du auf der Seite mit den verschiebbaren Bildern ablesen kannst. */
        #golden-retriever {
            left: 40%;
            top: 20%;
        }
        #collie {
            left: 60%;
            top: 40%;
        }
        #worldmap {
            transform: scaleX(0.7);
        }
    </style>
</head>
<body>

    <!-- Dies ist das Logo bzw. die Weltkarte -->
    <img id="worldmap" src="images/Logo-Prototyp.jpg" />

    <!-- Das folgende sind die kleinen Hundebilder. Du musst die Bildadresse eintragen
    und jedem Bild eine ID geben. Diese darf nur einmal auf dieser Seite vorkommen. -->
    <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>
Der Hintergrund ist die Weltkarte und die Bereiche mit Link darauf sind die kleinen Hundebilder.
 
Zuletzt bearbeitet:
Yeap, das funktioniert grandios. Viel besser als vorher!

Frage: Da ich die Koordinaten bzw alle Informationen aus der Datenbank bekomme und das css erst beim Einlesen bereitgestellt kann wenn die Datenbank eingelesen wurde.

Kann ich den css Teil auch am Ende vor </body> einfügen?

#golden-retriever {
left: 40%;
top: 20%;
}
#collie {
left: 60%;
top: 40%;
}
 
Habe ich gemacht uns das so Implementierte funktioniert einwandfrei, sogar einfacher und besser als vorher! Man lernt nie aus!

hundertausend-zuger-unternehmen.png
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück