Hintergrundbild mit Verlinkungen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
bestimmen
bild
code
dank
formatierung
frage
hintergrundbild
image
lexikon
normales bild
problem
tab
tabelle
teil
text
tool
url
zelle
ziehen
-
Nabend. Schon oft bin ich mit der Frage aufgetaucht: "Wie kann ich Teile meines selbserstellten Bildes verlinken"?
Nun weiß ich es ja. Und zwar mit Image Map Tools. Aber wenn ich dieses Bild, also dessen HTML-Code in meine Seite reinmache, kommt zwar das Bild mit den Verlinkungen perfekt, aber leider kann man dieses Bild dann in einen neuen Tab ziehen oder einfach kopieren.
Meine Frage diesmal lautet: Kann man dieses Bild, also dessen HTML-Code, auch als Hintergrundseite benutzen?
Also sehr viele Seiten, auch Lima-City, haben oben bei ihrem Logo eine Verlinkung, womit man auf die Startseite von lima-city, oder je nachdem von welcher Seite, beim Klick, geschickt wird.
Geht das auch mit diesem Image Map tool? Also ich meine "einfach" Teile der Hintergrundseite mit Image Map tool, oder einem auch kostenlos und nicht installierbaren Programm/Seite, verlinken. Wäre meine erstmal letzte Frage ;)
Wünsche euch noch nen schönen Abend ;D -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Auf die Art wirst du es nicht hinbekommen, dass man das Bildin einen neuen Tab ziehen kann..
Ich persönlich finde es auch etwas "unsauber" einfach ein Bild hinzustellen als komplette Seite, auf der nur ein paar Verlinkungen sind..
Da du ja anscheinend noch neu im Thema Homepageerstellung bist würde ich dir vorschlagen um dein Problem zu lösen, dass du mit einer Tabelle arbeitest.
So kannst du in jeder "Zelle" ein einzelnes Hintergrundbild setzen - zB dein vorhandenes Bild "zerschneiden" und jeweils in die Tabelle einfügen und dein Menü, also dann einzelne Zellen verlinken.
Besser als Tabellen sind allerdings DIV-Container.
MfG CnP -
Danke CNP, aber wie konnte denn zum Beispiel lima city das grüne da oben verlinken?
-
Servus,
wie Kollege "copynpaste" schon sagte, arbeite am besten mit einer Tabelle. Wobei das sicher nicht die idealste Methode ist, aber wohl die einfachste.
Einfach eine Tabelle erstellen, ein Hintergrundbild für die Tabelle bestimmen und anschließend dein Logo, Icons oder was auch immer als normales Bild einfügen.
Schönen Gruß
-
@Habbo-lexikon
die Lösung liegt doch klar in der hand.
<a href="http://www.example.com"><div id="logo"></div></a>
Was war bitteschön daran so schwierig ???? -
Ich persönlich würde an der Stelle anstatt DIVs zu verlinken IMGs verlinken:
<a href="http://www.example.com"><img src="bild.png"></a>
Zu den Tabellen:
Tabellen Tutorial -
Danke für die zahlreichen Antworten, ich habe zwar alles was ihr mir geschrieben habt, ausprobiert, hat auch alles prima geklappt, aber leider nicht so wie ich es wollte...
Eine verlinkte Zelle ist ja ganz schön und einfach, aber dann taucht wieder das Problem auf, dass man dieses Bild, wenn man es zieht, blau makiert. Bei lima-city.de sieht man ja da oben das Logo und "Webspace Werbefrei seit 2002". Das wird beim ziehen jedoch nicht blau makiert.
Ich bitte um Hilfe :) -
Hallo!
Ich rate dir mal, wenn du Firefox benutzt, das Addon "Firebug" zu installieren - ich weiß nicht, was ich ohne es ma chen würde! :)
Zu deiner Frage:
Hier bei Lima-City sieht der Code für den, für dich interessanten Bereich, so aus:
HTML:
<div class="wrapper"> <h1><a href="/">kostenloser Webspace: lima-city</a></h1> <ul id="nav"> [...] </ul> <form method="post" action="/search" id="search"> [...] </form> </div>
CSS:
#branding .wrapper { overflow: visible; } .wrapper { height: 1%; margin: 0 auto; max-width: 1070px; padding: 10px; position: relative; } h1 { line-height: 30px; } #branding h1 a { background: url("../images/layout/top/logo/branding_stamp.png") no-repeat scroll 0 0 transparent; display: block; height: 105px; margin-top: 5px; padding: 7px; text-indent: -9999px; width: 400px; } a { color: #444444; text-decoration: underline; }
Wichtig für dich ist die Formatierung von dem a in einem h1-Tag in der Ebene "branding". Im HTML kannst du sehen, dass das A einen Linktext hat. Durch die Eigenschaft "text-indent" wird die Schrift allerdings weit verschoben, sodass es außerhalb der Ebene liegt. Durch das "overflow:hidden" für die wrapper-Ebene sieht man den Text nicht - toll gelöst muss ich sagen! Darauf bin ich noch nicht gekommen! :)
So, weiter im Text: der Link mit dem Ziel "/" - also der Startseite - hat ein Hintergrundbild. Schaust du dir dieses Bild mal genauer an, siehst du, dass es eben den Schriftzug und den Stempel-Text enthält. Außerdem hat der Link eine Höhe (105px) und eine Breite (400px). Ändert man diese Angaben ändert sich die Linkgröße und man könnte dann unter Umständen nicht mehr auf das Grün klicken oder auf den ganzen Header, um dem Link zu folgen.
Ich hoffe, du konntest das nachvollziehen. :3
Grüße
things -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
