unsichtbare Links im Header Bild definieren

  • Liebe Wordpress Community,

    ich bin dabei einen Blog für ein Diplom Projekt anzupassen.
    Er ist unter freshproduce zu erreichen.
    Dabei habe ich folgendes Problem:
    Ich möchte die beiden schwarzen Logos rechts oben im Header mit
    den betreffenden Webseiten verlinken. Ist es möglich ein transparentes
    Rechteck mit den Ausmaßen des jeweiligen Logos zu erstellen, die ich
    über den Logos platziere und mit der betreffenden Webseite verlinke?
    Oder gibt es eine andere Möglichkeit - transparentes gif oder ähnliches?

    Mit Dank und Grüßen

    Benjamin

    • 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

  • Danke! Das hört sich nach einer guten Idee an. Nur tue ich mich
    schwer mit dem einbinden des Codes. Hast du oder jemand anderes
    eine Idee wo und wie er in der header.php eingebunden wird? Oder im CSS?

    Hier der Code, den ich mir durch Mapedit generiert hab:

    HTML
    <img src="/images/spring_flavour/header_mitlogos.jpg" usemap="#header_mitlogos" alt="" style="border-style:none" />
    
    
    <map id="header_mitlogos" name="header_mitlogos">
    <area shape="rect" alt="" coords="522,3,597,35" href="http://beispiel.de" title="" />
    <area shape="rect" alt="" coords="618,0,683,70" href="http://beispiel.tv" title="" />
    <area shape="default" nohref="nohref" alt="" />
    </map>
  • Der Header ist als Hintergrundbild definiert.

    Code
    #header { background:  url("http://freshproduce.simonklima.de/wp-content/themes/freshproduce/images/spring_flavour/header_mitlogos.jpg") no-repeat bottom center;}


    rausschmeissen und den von dir oben gepasteten Code nach

    Code
    <div id="header">

    einfügen. Wobei du den <img>-Teil abändern solltest in

    PHP
    <img src="<?php bloginfo('template_directory'); ?>/images/spring_flavour/header_mitlogos.jpg" usemap="#header_mitlogos" alt="" />


    Dann sollte es so ausschauen, wie du es willst.

    hth :)

    ~fym

  • Danke fym!!!

    Für die schnelle und kompetente Hilfe.
    Das hat alles so geklappt wie du gesagt hast.

    Noch eine kurze Frage:
    Ich hab jetzt die Navigation mit
    postion: absolute;
    im CSS in den Vordergrund geholt, da sie
    sonst hinter dem Header verschwinden würde.
    Weißt du ob das so ok ist? Kommen die gängigen Browser damit
    klar?

    Danke und Grüße

    Benjamin

    Einmal editiert, zuletzt von brenes (15. Mai 2007 um 09:16)

Jetzt mitmachen!

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