Bilder mit "Links" beschriften
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bearbeiteten bildes
beispiel
bild
brauche
buchstabe
code
dank
datei
frage
host
http
image
lexikon
links start
not
reiter
server
text
tun
url
-
Huhu ihr. Ich habe mal wieder eine Frage.. Und zwar: Wie kann ich, wenn ich hier schon eine fertige Internetseite hab, ein Bild mit 24 kleinen "Links" beschriften?
Guckt euch bitte das Bild an. Ich möchte dort auf die Postit's die ganzen Buchstaben des Alphabets verlinken. Diese Seite soll nämlich eine Art Lexikon darstellen und somit eine Fanseite sein. http://habbo-lexikon.lima-city.de/
Schon mal großes Danke an euch ;) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Thema hat nichts mit "Lima-City Allgemein" zu tun.
Verschoben nach HTML, CSS & Javascript
Zum Thema:
Entweder du erstellst dir eine Imagemap (evtl hier: http://www.image-maps.com/)
Oder du erstellst dir ein div, das das Bild als Hintergrundgrafik hat und positionierst dann deine 24 Links absolut mit Pixelangabe,
wird wohl eher das sein, was du möchtest, da vielleicht noch Buchstaben dazu sollen.
Beitrag zuletzt geändert: 31.5.2011 15:26:04 von sneppa -
Erstmal, vielen Dank, aber hätte noch eine Frage. Ich bin jetzt auf http://www.image-maps.com gegangen, und habe auch schon bischen ausprobiert. Jetzt habe ich "Get your Code" angeklickt und da kam : "Warning I can not host images on my server. Please move the image location to your server / image host. Images will be deleted in 2 days. You can use the Photobucket tab to host your image." Bin dann auf "Photobucket" gegangen und dann erschien mir das: "http://www.image-maps.com/uploaded_files/6201105311312024_1102957.jpg". Wie muss ich das jetzt einfügen auf meine Seite?
Wäre euch über eine Antwort sehr danbar ;) -
Hallo,
lade das Bild auf den Lima FTP.
Dort wo es derzeit ist, wirds wohl in 2 Tagen nimmer sein.
LG Gary -
Oder du erstellst dir ein div, das das Bild als Hintergrundgrafik hat und positionierst dann deine 24 Links absolut mit Pixelangabe,
wird wohl eher das sein, was du möchtest, da vielleicht noch Buchstaben dazu sollen.
Ahh jetzt hab ichs verstanden. Dafür brauche ich unbedingt PhP oder?
Bedanke mich schonmal ;) -
Nein. Das machst du mit CSS.
-
Achso danke, dann wäre das schonmal geklärt ;)
-
Guckst du (Beispiel):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Beispiel</title> <style type="text/css"> #container { width: 283px; /* Breite des Hintergrundbildes */ height: 176px; /* Höhe des Hintergrundbildes */ background-image: url(http://www.devildogs-web-home.de/Homepage/Bilder/Sarry/sprechblase.gif); /* Hintergrundbild */ } #testlink1 { position:absolute; top:45px; /* Link1, Abstand von oben */ left:60px; /* Link1, Abstand von links */ } #testlink2 { position:absolute; top:72px; /* Link2, Abstand von oben */ left:181px; /* Link2, Abstand von links */ } #testlink3 { position:absolute; top:94px; /* Link3, Abstand von oben */ left:92px; /* Link3, Abstand von links */ } </style> </head> <body> <div id="container"> <a href="http://www.lima-city.de" target="_blank" id="testlink1">Lima-City</a> <a href="http://www.google.de" target="_blank" id="testlink2">Google</a> <a href="http://www.wikipedia.de" target="_blank" id="testlink3">Wikipedia</a> </div> </body> </html>
Beitrag zuletzt geändert: 1.6.2011 1:34:37 von fabo -
Du hast doch mit dem Tool von Snepa eigentlich alles: http://i46.photobucket.com/albums/f133/rotuganda/GetyourImageMapCode-wwwimage-mapscom.jpg, da oben sind die Reiter damit hast du alles was du brauchst. Du musst vorher in deinem Bild die Links setzen und später über die reiter wie in meinem Screenshot zu sehen deine Codes entsprechend in deine Seiten einpflegen, das css in deine css-datei und das html in deine html-Datei.
Edit: und kombiniert mit Fabos Beitrag sollte es doch jetzt klar sein ;) - toll Fabo
Beitrag zuletzt geändert: 1.6.2011 1:31:34 von rotuganda -
Es geht hier drum: http://www.image-maps.com
Ich habe jetzt die Links auf meinem Bild beschriftet und gemacht, wo die hinführen sollen. Jetzt bin ich da oben auf "HTML Code" gegangen, und sehe einen langen Code. Muss ich den jetzt einfach auf meine Seite einfügen, oder brauche ich zudem noch den CSS Code? Denn ich habe jetzt den ganzen HTML Code eingefügt, es erscheint jedoch kein Bild oder ähnliches, nur der Code ..
MFG Finn ;)
Der HTML-Code meines bearbeiteten Bildes von http://www.image-maps.com lautet:
<div style="text-align:center; width:600px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_3201106021519444" src="http://www.image-maps.com/images/shapes_2k9.png" usemap="#Image-Maps_3201106021519444" border="0" width="600" height="600" alt="" />
<map id="_Image-Maps_3201106021519444" name="Image-Maps_3201106021519444">
<area shape="poly" coords="67,47,182,46,196,125,125,157,127,98,70,101," href="http://www.image-maps.com/" alt="A" title="A" />
<area shape="rect" coords="598,598,600,600" href="http://www.image-maps.com/index.php?aff=mapped_users_3201106021519444" alt="Image Map" title="Image Map" />
</map>
<!-- Image map text links - Start - If you do not wish to have text links under your image map, you can move or delete this DIV -->
<div style="text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:600px;">
<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/" title="A">A</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/index.php?aff=mapped_users_3201106021519444" title="Image Map">Image Map</a>
</div>
<!-- Image map text links - End - -->
</div>
CSS Code :
<style type="text/css">
dl.image_map {display:block; width:600px; height:600px; background:url(http://www.image-maps.com/images/shapes_2k9.png); position:relative; margin:2px auto 2px auto;}
a.BLINK {left:598px; top:598px; background:transparent;}
a.BLINK {display:block; width:202px; height:17px; overflow:hidden; position:absolute; font-size:0px;}
a.BLINK:hover {background:black; border:1px dashed white; color:white; font-size:9px;}
</style>
<dl class="image_map">
<dd><a class="BLINK" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_3201106021519444">Mapped @ Image Mapper</a></dd>
</dl>
<!-- Image map text links - Start - If you do not wish to have text links under your image map, you can move or delete this DIV -->
<div style="text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:600px;">
<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/" title="A">A</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/index.php?aff=mapped_users_3201106021519444" title="Image Map">Image Map</a>
</div>
<!-- Image map text links - End - -->
Beitrag zuletzt geändert: 2.6.2011 22:00:35 von habbo-lexikon -
Du musst nun den HTML-Code in deine index.html einpflegen an die Stelle wo das Buch auftauchen soll und damit es auftaucht musst du den CSS-Code in deine verwendete CSS-Datei einbinden. Das sollte es gewesen sein
-
Ok Danke dir, ich versuche das mal ;)
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
