Links Bilder mit der funktion map

neonhtml

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

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

Alles anzeigen

Code

#navdiv {  position: relative;
  top: 400px;
  left: -100px;
}




#BlauerPfeilBild {
  border: 0px;
  width:98vw;




}




#kontakt {
  color: white;
  position: absolute;
  left: 50%;
  top: 40%;
  bottom: 50%;
}

Alles anzeigen

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

basti1012

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

neonhtml

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

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

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

[FONT=&amp]

Code

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

[FONT=&amp]

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

[/FONT]
[FONT=&amp]
[/FONT]

Tags