Ergebnis 1 bis 3 von 3

Thema: Links Bilder mit der funktion map

  1. #1
    HTML Newbie
    Registriert seit
    28.01.2019
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Links Bilder mit der funktion map

    Servus,

    Ich bin anfänger in html und werde gerade ins kalte Wasser geworfen, was ich aber auch so wollte nun verbringe ich den ganzen Tag mit nix anderes mehr. Ich liebe es und mir macht es viel spaß.

    Ich hoffe ihr könnt mir helfen.

    Aktuell versuche ich eine Navigationsleiste zu basteln welche aus Pfeilen bestehen soll die untereinander liegen. Die entsprechenden pfeile sollen sich "fast schon überlagern", wenn man aber drüber hovert soll der entsprechende Pfeil größer werden. Auf den Pfeilen soll dann immer stehen wo es hingeht und das immer relativ in der mitte. Das erwähne ich nur damit ihr wisst was ich vor habe.

    Ich hänge aber schon weiter vorne und zwar, Ich habe die pfeile in einem Vektor program erstellt und nun angefangen in html einzulesen und via a-tags mit dem link zu versehen, nun ist es aber so da die pfeil seiten spitzen natürlich breiter sind als der pfeil schafft kann man oberhalb und unterhalb den link auch anklicken, wenn ich nun die pfeile in einander schiebe, dann überlagen sich die links...

    Ich habe dann die funktion map bzw area entdeckt und auch mal prompt ausprobiert, was nun aber nicht so richtig funktioniert hat.

    HTML-Code:
    <!DOCTYPE html>
    <html lang = "de">
      <head>
      <meta charset ="utf-8">  <title>Rumspielen</title>
      <link rel="stylesheet" type="text/css" href="rumspielen.css">
      </head>
      <body>
    
    
      <nav>    <map name="map">        <area shape="poly" coords="0, 19, 1850, 20, 1833, 2, 1867, 1, 1902, 34, 1867, 73, 1834, 73, 1850, 54, 0, 57" />    </map>    <div id = "navdiv">
          <a href="https://www.google.de"  usemap="#map"/>        <img src="test pfeil100.png" alt="Das ist ein Teil des Menüs" id="BlauerPfeilBild" usemap="#map"/>        <span id = "kontakt"><b>Kontakt</b></span>      </a>    </div>
    
      </nav>
    </body>
    </html>

    Code:
    #navdiv {  position: relative;
      top: 400px;
      left: -100px;
    }
    
    
    #BlauerPfeilBild {
      border: 0px;
      width:98vw;
    
    
    }
    
    
    #kontakt {
      color: white;
      position: absolute;
      left: 50%;
      top: 40%;
      bottom: 50%;
    }

    Ich lasse euch auch mal noch ein bild von der aktuellen ausgabe da. Ich hoffe ihr versteht was ich meine. Ich freue mich auf alle die sich erbarmt haben bis hier her zu lesen

    Bitte nicht sauer sein wenn mein code nicht der aufgeräumteste ist. Bin durch das problem auch etwas durcheinander

    Grüße

    Unbenannt.jpg
    Geändert von Arne Drews (29.01.2019 um 11:20 Uhr) Grund: MOD: Code-Tags repariert

  2. #2
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    234
    Danke
    0
    Bekam 31 mal "Danke" in 31 Postings

    Standard AW: Links Bilder mit der funktion map

    so ganz verstehe ich das noch nicht . du willst den Pfeil verlinken ? Kannst du mal den Link zum Pfeil posten ? Ohne das original Bild kann man sich da jetzt nicht viel vorstellen was dein problem genau ist . Ich zumindest nicht

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    28.01.2019
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Links Bilder mit der funktion map

    Hallo Danke das du dir die Zeit genommen hast dich einzudenken.

    pfeil bsp.jpg

    Ich hoffe man erkennt den Pfeil. Es geht darum das wenn ich um das bild einen ANkerlege das der link dann klickbar wird sobald man in den Bildbereich kommt. d.h. man kann auch klicken wenn man den Schafft des Pfeiles noch nicht berührt hat. Im allgemein wäre es cool zu wissen ob es eine lösung dafür gibt? Das gleich eproblem müsste man haben wenn man einen großen kreis einbettet und dieser dann mit einem a element versehen wird, dann könnte den link in den eckbereichen klicken, da wo er noch nicht verfügbar ist.

    Ich habe mir nun mit HTML einen anderen Pfeil als zwischen lösung gebastelt, welche nur halb optimal ist.


    HTML-Code:
    <!DOCTYPE html><html lang="de">
    	<head>		<meta charset="utf-8">		<title>Rumspielen</title>		<link rel="stylesheet" type="text/css" href="rumspielen.css">	</head>
      <body>    <div class = "container">      <a href="https://www.google.de">    <div class="pfeil-line clearfix"><b></br>Kontakt</b>    </div>    <div class="pfeil-spitze clearfix"></div>    </a>    </div>  </body>
    </html>




    Code:
    
    
    Code:
    .clearfix::after {
      content: "";
      display: block;
        clear: both;
    }
    
    
    
    
    .container {
      margin-top: 300px;
    }
    
    
    .pfeil-spitze {
      width: 0;
      height: 0;
      border-top: 60px solid transparent;
      border-bottom: 60px solid transparent;
      border-left: 60px solid #E80026;
      float: left;
    }
    
    
    .pfeil-line {
      width: 50vw;
      height: 50px;
      background-image: linear-gradient(to right, #6D0000, #E80026);
      float: left;
      margin-top: 35px;
    }



    Ich hoffe das macht nun sinn.

    Mit der Map funktion die ich in meiner Frage verwendet hatte, wollte ich einfach versuchen meinem Link forzugeben in welchen bereich er zu sein hat. Dafür habe ich die Koordinaten des Pfeiles verwendet. Mir wurde nun gesagt das dies definitv keine gute Lösung sei und ich mir doch JS aneignen soll ^^ damit sei es kein problem sowas zu schreiben... Naja ich dachte erstmal html und css und JS bzw. angular js

    Grüße




    Geändert von neonhtml (01.02.2019 um 11:09 Uhr) Grund: Der code scheint sehr stark verrutscht zu sein.

Ähnliche Themen

  1. Bilder als Links, Problem iE
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 28.07.2010, 15:18
  2. Links und Bilder
    Von gast123 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 14.05.2008, 15:04
  3. Liste zum Speichern von Links/Auswahl-zitieren-Funktion
    Von Dark_Dog im Forum Forum-Hilfe.de intern
    Antworten: 8
    Letzter Beitrag: 07.06.2007, 18:47
  4. Links in Bilder
    Von Illu im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 05.02.2007, 12:49
  5. bilder links und rechts
    Von viper3000 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 15.06.2005, 17:55

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •