• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Html Coords setzen

C

Chrichy91

Neues Mitglied
Guten Tag liebe Leute,
ich möchte 2 Buttons per Html in eine Grafik packen.
Nun habe ich schon ein wenig gelesen, jedoch übersteigt diese Technik mein können!

Hier mal die Grafik:
Die Grafik ist 780x420 Pixel groß!

versuch2_phixr.jpg

Nun soll man, wenn man auf Homepage klickt zur HP kommen und zu einer FB Seite, wenn man auf Fanpage klickt.
Kann jemand einen Quelltext posten? Ich verstehe es nicht. Evt leuchtet mir es denn ein, wenn ich es vor den Augen habe!

Vielen Dank schonmal!
 
Die schlechtere Lösung wäre eine image map. Die bessere ein Div mit der Grafik als background-image und da rein dann die Links oder Buttons packen.
 
Zuletzt bearbeitet:
Soory, ich kenn mich zwar mit den Grundtag´s von HTML aus, aber nicht mit CSS.
Sowas kann ich nicht ;)
Würdest du sowas für mich anfertigen, oder ist das zu Zeitaufwendig?
 
Mhh denke das wird nicht klappen :(
Schade das keiner hier was schreibt. Da Ich sowas nicht kann, brauche ich halt Hilfe. Also bitte gebt mir Tipps und Vorschläge!

Danke
 
Gehe auf diese Webseite:

maschek.hu - Online Image Map Editor

Lade dein Bild hoch per "Upload" Funktion und wenn es fertig ist, klickst du auf das erste "Accept".

Jetzt sollte dein Bild unten zu sehen sein. Nun kannst du Bereiche markieren. Jedem Bereich kannst du ein Verweis angeben, also Verlinken. Markiere deine zwei Punkte und gib Ihnen den jeweiligen Link.

Kleine Erklärung:

Href = Die Adresse zu dem er verlinken soll, wenn man drauf klickt.
Alt = Alternativer Text. Falls irgendein Problem auftaucht oder man sich mit der Maus über den Link bewegt, erscheint dieser Text.

Target = Soll der sich im neuen Fenster/Tab öffnen, oder soll er den aktuellen Fenster benutzen?

Teste am besten alles mal aus. Du kannst nichts kaputt machen, daher kannst du aaaaaalllleeees ausprobieren wie du willst ;)

Wenn du fertig bist, über dem "PayPal Donate" Button in Gelb, sollte "Code" stehen, darauf klicken und du hast dein HTML Code.


Gruß

*edit*

Ach man.. ich sehe gerade der Beitrag aus der Jobbörse ist von gestern und die Antwort wurde auch gestern beantwortet :( ..
 
UUps, da hatte ich nicht gesehen, dass da eine zweite Seite ist. Nur den Hilferuf.
 
Hi Leute,
habe den Editor mal ausprobiert. Der gibt mir folgendes raus:

[TABLE="class: quote"]
[TR]
[TD][/TD]
[TD="class: quote_message"]<map id="imgmap201272622421" name="imgmap201272622421"><area shape="rect" alt="" title="" coords="429,257,633,307" href="Aktuelle Nachrichten - TSV Glücksburg 09 Handball" target="" /><area shape="rect" alt="" title="" coords="518,321,694,368" href="https://www.facebook.com/pages/TSV-Gl%C3%BCcksburg-09-1-M%C3%A4nner/296846267012041" target="" /></map>[/TD]
[/TR]
[/TABLE]
Zum Vergrößern anklicken....

Wenn ich es testen will, seh Ich nur ein weißen Bildschirm. Wird das Bild nicht richtig geladen, bzw. ist es überhaupt erreichbar?
 
Ich kenne den "Editor" nicht, aber da gehört eigentlich auch noch ein <img>-Element dazu. Wenn der nicht dabei ist, dann taugt der "Editor" für HTML-Einsteiger wie dich nicht viel :|
 
Hier mal ein Komplettes Beispiel:

HTML: 
<MAP NAME=mymap>
<AREA HREF="/reference/" ALT="HTML and CSS Reference" COORDS="5,5,95,195">
<AREA HREF="/design/" ALT="Design Guide" COORDS="105,5,195,195">
<AREA HREF="/tools/" ALT="Tools" COORDS="205,5,295,195">
</MAP>
<IMG SRC="sitemap.gif" ALT="Site map" USEMAP="#mymap" WIDTH=300 HEIGHT=200>

Das wichtige ist einmal im <map>-Tag, das Attribut "name". In dem Fall heißt es "mymap".

Im <img>-Tag muss nun ein Attribut "usemap" angegeben werden, mit dem Namen der Map, also "#mymap".

Bitte schreibe nicht wie in dem Beispiel alle Elemente Groß.. schreibe Sie klein.

Quelle: MAP - Image Map
 
Habe jetzt diesen hier in benutzung:

<img src="http://img5.fotos-hochladen.net/uploads/befunkyviewfinw75oi92umq.jpg" usemap="#imgmap2012727134256" alt="" /><map id="imgmap2012727134256" name="imgmap2012727134256">
<area shape="rect" alt="" title="" coords="510,306,763,369" href="http://www.tsv09-dieerste.de/aktuelle-nachrichten/" target="" />
<area shape="rect" alt="" title="" coords="612,388,839,442" href="https://www.facebook.com/pages/TSV-Gl%C3%BCcksburg-09-1-M%C3%A4nner/296846267012041" target="" />
</map>
Zum Vergrößern anklicken....

Der klappt ganz gut. Jetzt brauche Ich nurnoch einen Tag der mir das Bild Mittig auf die Hp packt. Also überall muss Lusft sein..Zu jeder Seite!
Lg Chris
 
Das wird mit CSS erreicht.

Code: 
img.deinbild {
 display: block;
 margin: 0 auto;
 width: 800px;
}

Die Maße musst Du natürlich an deine Anforderungen anpassen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben