Jag har googlat och hittat många svar, fast mitt fall är ganska speciellt.
Här är min kodning:
<MAP NAME="figur1">
<AREA SHAPE="rect" COORDS="0,0,150,50" HREF="hem.html">
<AREA SHAPE="rect" COORDS="151,0,300,50" HREF="lankar.html">
<AREA SHAPE="rect" COORDS="301,0,450,50" HREF="medlemslista.html">
<AREA SHAPE="rect" COORDS="451,0,600,50" HREF="faq.html">
<AREA SHAPE="rect" COORDS="601,0,750,50" HREF="stodgod.html">
<AREA SHAPE="rect" COORDS="751,0,900,50" HREF="kontakt.html">
</MAP>
<IMG SRC="DownLevel.png" USEMAP="#figur1" BORDER="0" WIDTH="900" HEIGHT="400">
På bilden, som bl.a. används som karta som länkar, vill jag ha text.
Jag skulle kunna splitta bilden i två delar, ett med "kartan" och ett med texten, fast då får det absolut inte vara något mellanrum mellan bilderna (som det blev förut). Anledningen till att jag använder en "karta" är att när jag hade knapparna var för sig och använde dem till länkar, blev det mellanrum mellan dem.
SNÄLLA!!! Hjälp mig. Jag gör inte den här sidan åt mig själv, och den som jag gör den åt kommer bli besviken om jag blir försenad.
Lär dig CSS, P38.
-
#text {
position: relative;
top: 10px;
right: 10px;
bottom: 30px;
left: 40px;
}
<MAP NAME="figur1" ID="text">
<AREA SHAPE="rect" COORDS="0,0,150,50" HREF="hem.html">
<AREA SHAPE="rect" COORDS="151,0,300,50" HREF="lankar.html">
<AREA SHAPE="rect" COORDS="301,0,450,50" HREF="medlemslista.html">
<AREA SHAPE="rect" COORDS="451,0,600,50" HREF="faq.html">
<AREA SHAPE="rect" COORDS="601,0,750,50" HREF="stodgod.html">
<AREA SHAPE="rect" COORDS="751,0,900,50" HREF="kontakt.html">
</MAP>
<IMG SRC="DownLevel.png" USEMAP="#figur1" BORDER="0" WIDTH="900" HEIGHT="400">
-----
Ändra siffrorna så texten hamnar rätt.
Jag är inte P38, jag är mycket yngre. Tack btw.
EDIT: Fungerar inte.
http://i52.tinypic.com/wi32x1.jpg
Senast ändrat 2010-09-07 19:20:26
Citat av talexyy
Citat av snaccer
Jag är inte P38, jag är mycket yngre. Tack btw.
EDIT: Fungerar inte.
http://i52.tinypic.com/wi32x1.jpg
Skrev du <style type="text/css"> i början och </style> efter?
Du sa inte att jag skulle. Planerar att lära mig CSS och förbättra mina Javakunskaper när jag har tid.
EDIT: Nu ser jag ingen text.
Koden jag använder:
Citat
<HTML>
<HEAD>
<TITLE>Guardians of Doom</TITLE>
</HEAD>
<Center><BODY LINK="blue" VLINK="darkblue" ALINK="lightblue" TEXT="black" BGCOLOR="black" BACKGROUND="BGImage.jpg">
<IMG SRC="Hem.png"><BR>
<style type="text/css">
#text {
position: relative;
top: 100px;
right: 100px;
bottom: 1000px;
left: 100px;
}
</style>
<MAP NAME="figur1" ID="text">
<AREA SHAPE="rect" COORDS="0,0,150,50" HREF="hem.html">
<AREA SHAPE="rect" COORDS="151,0,300,50" HREF="lankar.html">
<AREA SHAPE="rect" COORDS="301,0,450,50" HREF="medlemslista.html">
<AREA SHAPE="rect" COORDS="451,0,600,50" HREF="faq.html">
<AREA SHAPE="rect" COORDS="601,0,750,50" HREF="stodgod.html">
<AREA SHAPE="rect" COORDS="751,0,900,50" HREF="kontakt.html">
</MAP>
<IMG SRC="DownLevel.png" USEMAP="#figur1" BORDER="0" WIDTH="900" HEIGHT="400">
</BODY>
</HTML>
Senast ändrat 2010-09-08 19:59:10
Efter en hel del googling hittade jag något som faktiskt fungerade, men det tog ca en timme att hitta vad jag letade efter.
Det här är min nuvarande kod (ska bara finjustera den lite):
<HTML>
<HEAD>
<TITLE>Guardians of Doom</TITLE>
</HEAD>
<Center><BODY LINK="blue" VLINK="darkblue" ALINK="lightblue" TEXT="black" BGCOLOR="black" BACKGROUND="BGImage.jpg">
<IMG SRC="Hem.png"><BR>
<MAP NAME="figur1" ID="text">
<AREA SHAPE="rect" COORDS="0,0,150,50" HREF="hem.html">
<AREA SHAPE="rect" COORDS="151,0,300,50" HREF="lankar.html">
<AREA SHAPE="rect" COORDS="301,0,450,50" HREF="medlemslista.html">
<AREA SHAPE="rect" COORDS="451,0,600,50" HREF="faq.html">
<AREA SHAPE="rect" COORDS="601,0,750,50" HREF="stodgod.html">
<AREA SHAPE="rect" COORDS="751,0,900,50" HREF="kontakt.html">
</MAP>
<div class="image">
<IMG SRC="DownLevel.png" USEMAP="#figur1" BORDER="0" WIDTH="900" HEIGHT="400">
<div class="text">
<p>This lovely image gladly demonstrates how I (this text) can be flying over her face.</p>
<p>It's very kind of her but don't you agree that this place needs a camp fire and a little love?</p>
</div>
</div>
<style type="text/css">
.image {
position:relative;
float:center; /* optional */
}
.image .text {
position:absolute;
top:45px; /* in conjunction with left property, decides the text position */
left:60px;
width:300px; /* optional, though better have one */
}
</style>
</BODY>
</HTML>
