mit Image map unterschiedliche Logos im Header verlinken

  • Hallo,

    ich würde gerne die Logos im Header meines Blogs verlinken und habe mir gedacht, dass das am einfachsten über ein Image Map geht. Die Logos überdecken sich und deshalb erschien es mir schlüssig.

    Wie man eine Image map erstellt ist mir klar, nur weiß ich leide rnicht, wo ich den Code dann einsetzten sollt.

    Mein heade schaut wie folgt aus:

    Ich bin mir einfach nicht sicher ob ich nicht an der komplett falschen Stelle suche und der Code für die IMage Map dort hingehört, wo im CSS das Bild aufgerufen wird.

    Weiters würde mich noch interessieren, wei ich das anstellen kann, dass meine Bloginformation bzw. der Name des Blogs im Header enthalten sind, aber nicht angezeigt werden. Wie kann ich das noch umsetzten?

    Vielen Dank schon mal für etwaige Hilfe.

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • also die Stelle wo man das Headerbild verlinken kann habe ich gefunden, nur hakt es bei den Einbindung des Codes für die Image map....

    wenn ich jetzt nicht ganz falsch liege müsste ich doch die Image Map dort einbauen wo ich auch das Headerblid verlinken kann, right?

    Also wo ich das machen kann:

    PHP
    <div id="top" onclick="location.href='http://www.intensecycles.com';" style="cursor: crosshair;">

    müsste doch auch das gehen:

    kann mir bitte jemand weiterhelfen?

    Danke!

  • auweh,

    gibts da vielleicht irgendwo ein Beispiel wei das geht? Da weiß ich grad gar nicht wie tun, damit ich das Bild nicht miehr im CSS drinnen hab....

    Hast Du vielleicht einen Tipp oder einen Leitfaden wie ich vorgehen kann?

  • Code
    <div id="header">
      <img src="header-img.png" alt="blog title" usemap="#header" />
    </div>
    
    
    <map name="header">
      <area.../>
    </map>

    Und im CSS das background-image für #header entfernen. Kann natürlich sein, dass du dann noch hier u. da etwas mehr anpassen musst, wenn das Layout nicht mehr so ganz passen sollte.

    Hier mal noch ein Link für dich:
    SELFHTML: HTML/XHTML / Grafiken / Verweis-sensitive Grafiken (Image Maps)

  • hab es probiert, aber das reißts ja das Design komplett auseinander.... so dass ich mich zur Zeit nicht darüber aussehe, das so zu machen...

    gibt es vielleicht noch andere Tipps, wwas man machen könnte... vielleicht auch mit Leitfaden?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!