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

Hilfe hab probleme mit imagemap oder nicht?

S

ssldobby

Neues Mitglied
Hallo leute,

ich bin totaler anfänger was html und was alles so mit design zu tun hat....

Okay nun zu meinem Problem....

ich hätte gerne ein Hintergrundbild das ich mir zusammengebastelt habe und hätte das gerne jetzt als HG auf meiner Seite.


Ich habe die einzelenen Elemente ausgeschnitten und mit links makiert.
Das ganze habe ich mit dem Tool von webocton-Scriptly dort ist ein Imagemap-tool.
Also folgendendes ist dabei rausgekommen aber die seite ist weiß!

hie rmal der code




HTML: 
<body>
<img src=”image.1”>


<map name="image.1">
    <area shape="" coords="548,123,560,135" href="" alt="" />
    <area shape="poly" coords="448,142,472,146,486,155,510,157,523,153,549,143,562,124,574,105,583,88,608,87,639,85,668,88,685,100,675,108,662,118,652,130,656,143,667,149,683,152,703,151,719,146,731,139,730,131,728,120,728,110,736,103,749,96,771,100,798,100,840,100,850,104,848,118,851,129,846,151,837,165,826,172,806,172,793,169,785,167,769,162,757,160,737,165,722,171,715,183,720,195,730,198,746,201,760,199,770,196,778,195,788,194,799,193,807,194,820,205,815,209,812,218,807,226,802,236,800,252,801,266,802,274,789,275,778,275,764,272,745,273,726,274,709,281,683,281,657,265,654,255,656,240,668,231,683,219,688,205,677,198,656,194,647,194,639,200,628,202,621,210,613,219,614,228,611,255,595,266,579,271,560,274,546,271,524,267,501,267,491,263,489,256,492,245,499,234,501,223,510,212,513,201,513,191,506,189,496,186,486,185,478,184,466,188,436,194,405,195,394,182,394,164,406,154,431,144,456,144,451,143,449,141,439,141,435,146,435,146" href="index.html" alt="" />
    <area shape="poly" coords="281,411,290,425,299,438,310,460,315,474,314,495,309,510,301,522,288,528,273,533,260,533,245,533,224,530,204,535,173,554,160,571,162,591,181,610,210,614,239,615,258,605,274,587,290,575,313,564,334,561,348,562,363,567,374,580,388,596,402,621,416,638,429,645,514,620,544,608,559,589,557,572,551,562,539,554,525,546,513,538,502,522,496,512,504,495,517,484,549,478,560,477,578,487,587,507,591,528,593,542,631,555,653,551,678,542,701,531,714,517,738,508,760,499,770,497,780,495,767,486,760,481,736,467,718,444,707,421,692,416,682,412,659,415,642,427,634,436,623,446,612,457,583,455,561,448,556,437,549,419,552,409,559,403,591,395,638,390,649,383,653,366,646,350,639,343,631,331,587,303,562,313,545,320,515,332,471,348,475,363,501,378,517,395,514,409,491,426,473,435,452,436,438,433,431,430,416,421,417,406,421,379,414,373,401,366,389,364,380,363,352,363,346,374,331,386,315,392,292,402,281,411,289,421,289,421" href="news.html" alt="" />
    <area shape="poly" coords="885,330,891,366,901,382,919,388,945,385,959,381,969,370,968,356,960,349,946,336,929,327,921,317,917,315,917,299,924,292,939,289,946,287,994,280,1021,276,1037,289,1061,318,1079,334,1100,342,1117,344,1131,340,1144,337,1154,332,1162,320,1170,314,1183,309,1202,311,1224,319,1248,334,1248,349,1244,363,1237,371,1224,376,1208,374,1188,374,1166,372,1146,372,1136,384,1138,397,1145,421,1156,439,1163,448,1176,464,1187,478,1193,491,1178,496,1127,524,1097,532,1078,530,1065,523,1054,510,1047,486,1047,467,1043,452,1028,446,1007,438,973,445,960,454,949,473,965,494,981,507,994,515,998,530,991,548,972,553,877,583,862,585,809,515,804,490,808,475,820,468,853,470,893,468,915,450,917,431,907,416,890,410,865,405,847,412,816,429,791,439,779,436,767,426,756,407,750,384,733,367,716,352,733,349,767,343,812,324,835,320,850,315,870,319,883,327,887,341,885,340" href="projektvorstellung.html" alt="" />
    <area shape="poly" coords="678,619,676,593,694,580,711,567,728,561,749,560,773,562,789,572,799,587,795,606,798,620,808,633,847,647,860,640,896,633,928,624,952,613,992,593,1003,592,1018,595,1037,607,1062,624,1079,638,1099,659,1085,683,1056,697,1022,702,986,709,959,738,968,766,985,777,1002,787,1035,789,1073,769,1095,745,1134,729,1161,742,1174,759,1191,775,1218,799,1242,815,1254,827,1253,844,1225,859,1195,878,1165,899,1120,914,1088,926,1068,921,1057,898,1056,874,1052,851,1044,837,1022,827,981,823,936,837,918,861,926,889,942,906,967,916,983,921,997,932,1009,946,1012,965,1003,981,986,989,971,994,942,1005,915,1018,885,1037,861,1057,836,1077,821,1079,820,1070,818,1049,814,1036,801,1020,781,1004,760,991,740,980,729,967,720,932,730,916,741,902,751,893,769,886,794,881,822,874,858,860,873,845,873,832,866,811,854,805,831,799,820,797,802,804,774,817,737,838,717,863,690,867,649,869,645,852,632,829,619,810,614,788,609,769,623,759,660,739,725,708,747,690,749,670,744,655,725,644,708,636,690,635,678,618,674,607,680,596,679,595" href=" forum.html" alt="" />
    <area shape="poly" coords="1066,25,1084,26,1114,27,1153,30,1172,35,1184,44,1183,52,1176,57,1167,60,1160,65,1161,70,1164,76,1175,81,1188,86,1202,88,1220,86,1231,85,1238,79,1233,72,1228,62,1227,51,1233,47,1250,46,1268,50,1282,53,1294,56,1314,59,1331,59,1353,59,1362,59,1366,59,1360,64,1354,71,1353,80,1354,94,1359,102,1357,104,1354,111,1344,120,1332,122,1318,123,1308,121,1294,115,1284,111,1278,109,1263,106,1254,107,1243,106,1234,109,1229,111,1225,118,1229,128,1244,133,1261,134,1282,135,1308,136,1329,137,1342,146,1344,164,1337,182,1327,197,1303,196,1276,192,1247,190,1230,188,1210,185,1196,190,1188,196,1188,210,1194,221,1197,235,1190,241,1174,246,1157,246,1140,247,1116,247,1105,237,1093,227,1090,217,1095,209,1115,201,1132,192,1136,180,1123,175,1102,166,1080,162,1066,158,1046,157,1023,154,1006,152,998,150,1000,106,1012,98,1032,95,1050,97,1067,101,1072,105,1088,110,1108,111,1123,111,1142,105,1143,95,1131,86,1113,81,1091,80,1073,80,1052,76,1043,70,1048,63,1054,47,1062,32,1064,25,1066,24,1066,24" href="links.html" alt="" />
    <area shape="poly" coords="1496,130,1499,149,1502,165,1499,179,1495,191,1484,198,1474,202,1459,199,1442,196,1430,190,1409,183,1390,182,1371,188,1357,200,1359,209,1369,224,1381,232,1394,239,1412,240,1426,237,1444,230,1455,228,1463,228,1470,229,1481,229,1493,233,1503,239,1511,256,1518,272,1519,294,1525,303,1528,311,1556,315,1575,317,1593,320,1610,321,1633,318,1647,315,1654,310,1654,299,1649,291,1641,284,1628,269,1626,255,1628,246,1642,238,1658,241,1673,242,1686,246,1695,254,1699,262,1696,275,1695,280,1692,290,1689,298,1693,305,1699,312,1710,316,1745,329,1766,326,1799,324,1835,321,1849,327,1865,334,1869,330,1870,326,1857,318,1849,307,1842,295,1836,277,1831,257,1822,245,1808,236,1786,236,1764,243,1752,247,1739,244,1724,242,1710,235,1701,223,1698,212,1708,201,1731,199,1760,211,1780,215,1800,215,1811,209,1815,199,1808,179,1800,166,1784,143,1780,140,1764,142,1747,141,1729,137,1710,138,1684,136,1666,137,1658,143,1666,160,1682,176,1683,186,1675,191,1659,197,1644,197,1632,193,1618,190,1605,182,1601,175,1608,163,1615,146,1614,129,1596,125,1580,123,1561,121,1544,120,1531,124,1510,125,1498,127,1494,134,1494,134" href="referenzen.html" alt="" />
    <area shape="poly" coords="1466,359,1445,361,1441,367,1442,377,1447,389,1457,400,1462,410,1457,422,1447,435,1434,438,1418,439,1404,439,1394,438,1377,435,1362,431,1337,424,1305,420,1301,421,1297,425,1289,436,1276,448,1269,466,1269,479,1270,496,1281,502,1301,510,1314,512,1330,511,1355,510,1390,511,1406,520,1420,530,1430,531,1431,550,1421,567,1407,571,1387,570,1366,564,1346,558,1336,554,1318,547,1292,542,1274,546,1263,550,1252,565,1254,586,1254,608,1257,625,1252,638,1237,656,1239,667,1265,662,1281,661,1307,666,1336,669,1367,678,1408,689,1428,693,1443,689,1446,677,1444,660,1435,638,1425,629,1421,608,1431,599,1447,598,1466,595,1486,601,1511,608,1529,616,1541,628,1542,643,1534,654,1519,671,1506,688,1507,697,1529,718,1552,729,1580,731,1599,737,1624,745,1674,749,1695,752,1714,750,1720,752,1720,738,1718,715,1712,706,1713,677,1714,668,1716,655,1716,649,1714,643,1701,636,1691,629,1679,622,1669,619,1649,620,1633,621,1610,619,1598,618,1579,611,1569,608,1554,599,1546,582,1544,569,1548,558,1556,552,1577,546,1603,551,1623,556,1634,561,1650,569,1682,578,1709,584,1728,581,1735,577,1742,562,1739,551,1734,539,1729,522,1723,510,1717,498,1703,491,1687,490,1666,486,1647,483,1627,480,1611,477,1591,470,1567,462,1549,451,1528,439,1533,415,1549,409,1564,399,1556,380,1548,372,1532,365,1517,356,1503,355,1473,356,1459,361,1456,360,1458,365,1458,365" href="inspiration.html" alt="" />
</map>




</body>
</html>

was mache ich falsch?


grüße ssldobby
 
Zuletzt bearbeitet:
Nur um sicherzugehen: Du willst eine Webseite erstellen und hast diese erstmal nur als Grafik erstellt?
 
nein, also meine seite ist cr.zeromag.eu da sieht da ganz anders aus. wie ich es aber haben will ist


ich habe so ein ähnliches puzzle bild und würde halt ganz gerne jedes puzzleteil einen Navigationspunkt zuteilen (home, news, forum usw usw) mein Problem ist aber auch die auflösung... jeder nutzer hat eine ander auflösung in seinem browser. hab grad bei selfhtml geguckt auch was gefunden aber hat irgendwie nicht funktioniert

 
Zuletzt bearbeitet:
Guten Abend,
ich habe das jetzt so gemacht wie auf selfhtml beschrieben nur jetzt habe ich ein Problem. Normalerweise sollte die puzzleteile anklickbar sein, so dass man ins nächste Verzeichnis kommt(hab noch keine verzeichnisse erstellt).
-Dann sagte meine freundin das sie ein weißes bild (Mozilla) bei mir funktioniert es auch (Mozilla)
- und wie bekomme ich den weißen rand weg will das Bild als vollbild haben.

hier der Link zu meiner Seite


und hier mal der Code

Vielend Dank im vorraus!

Grüße ssldobby

HTML: 
<!DOCTYPE html>

<html>

<head>

    <title>cr.zeromag.eu</title>


</head>

<body>


<p>
    <img src="image12.jpg" width="100%" height="100%" border="0" alt="image" usemap="#HG”>
    <map name="image12">
        <area shape="poly" coords="489,155,513,155,526,151,549,139,561,131,565,120,573,106,581,91,582,88,594,87,619,86,643,84,658,84,674,85,682,91,684,102,675,113,668,115,658,123,651,134,657,145,676,153,694,151,709,150,719,146,726,140,731,132,728,121,727,111,732,104,744,98,756,96,781,100,797,101,813,100,827,100,842,100,849,101,852,106,850,117,849,135,842,155,829,166,821,170,803,173,795,170,782,166,770,162,756,158,742,157,730,164,713,174,713,192,719,194,727,197,738,199,750,202,765,199,783,194,797,192,808,194,815,199,814,210,805,218,799,230,794,245,798,264,803,277,801,278,791,276,775,272,759,266,735,263,730,270,691,269,663,267,655,263,653,251,658,239,671,227,680,218,683,203,672,198,649,195,623,200,617,208,614,213,610,223,613,231,610,248,608,256,597,266,575,270,535,269,514,263,495,260,490,257,487,254,488,241,494,232,504,220,509,208,507,192,490,184,456,185,433,191,406,193,401,191,397,181,395,170,397,161,409,153,421,144,444,141,472,141,484,151,490,154,490,154"
                        href="index.html" alt="index" />
        <area shape="poly" coords="1124,194,1128,186,1120,180,1108,175,1094,170,1069,163,1056,159,1030,155,1002,154,991,149,992,121,996,108,1001,98,1015,96,1034,97,1052,100,1067,100,1079,111,1098,114,1116,114,1128,111,1137,106,1141,101,1139,92,1128,86,1114,81,1096,81,1082,83,1066,82,1051,80,1042,75,1034,68,1035,66,1044,58,1050,45,1054,36,1055,28,1056,22,1076,25,1106,27,1124,27,1144,31,1164,34,1173,39,1183,43,1180,51,1166,60,1156,65,1151,73,1154,78,1159,80,1168,85,1179,87,1197,91,1216,90,1230,84,1236,78,1231,71,1224,59,1221,49,1243,47,1258,49,1268,52,1274,55,1289,58,1309,59,1336,60,1353,60,1361,61,1356,67,1350,71,1346,76,1346,84,1348,97,1351,102,1351,108,1348,116,1346,120,1341,123,1334,124,1319,127,1300,124,1290,118,1277,114,1260,109,1235,107,1221,114,1218,120,1229,133,1254,135,1283,135,1312,138,1336,147,1343,156,1342,168,1332,180,1316,202,1229,188,1205,191,1190,195,1185,198,1181,207,1188,223,1184,240,1165,249,1140,251,1120,247,1098,243,1085,230,1081,219,1087,210,1095,206,1114,201,1122,199,1130,190,1128,187,1128,187"
                        href="forum.html" alt="Forum" />
        <area shape="poly" coords="282,412,300,401,317,393,336,383,352,376,367,370,381,364,390,365,405,367,414,372,419,387,420,404,421,415,431,429,455,435,479,433,494,430,506,420,514,413,520,398,515,391,505,380,492,376,481,372,475,363,470,355,474,346,481,340,499,336,542,321,565,312,582,303,590,302,602,311,615,322,625,330,634,341,649,356,654,371,651,382,644,386,626,389,604,393,586,394,563,400,549,413,550,430,557,443,572,454,589,457,611,456,633,440,653,418,673,410,684,412,695,416,704,425,712,441,722,460,733,470,745,479,767,489,775,494,766,501,752,505,732,505,712,515,696,524,684,535,669,542,644,556,611,552,593,543,588,530,587,508,582,493,568,483,543,478,506,490,498,506,500,516,505,532,515,540,532,553,551,563,558,578,551,590,534,604,510,614,462,631,421,639,396,608,392,597,385,588,382,578,369,567,359,563,348,558,329,555,314,559,289,564,279,577,257,596,236,612,200,617,172,607,159,579,164,561,180,544,206,533,249,529,273,530,305,515,316,492,316,471,306,448,286,423,282,411,289,407,333,385,381,364,381,364"
                        href="meinprojekt.html" alt="Mein Projekt" />
        <area shape="poly" coords="915,309,921,292,938,288,963,284,1000,279,1024,277,1039,294,1051,307,1066,322,1076,331,1087,341,1097,340,1111,342,1127,342,1146,332,1158,321,1172,310,1192,310,1213,313,1227,321,1243,330,1253,345,1253,361,1245,367,1230,374,1211,376,1194,373,1182,370,1162,367,1149,373,1142,379,1132,391,1138,405,1149,426,1158,445,1170,461,1185,479,1193,489,1178,497,1144,517,1101,535,1075,527,1056,517,1050,492,1052,470,1031,443,996,434,979,441,956,453,944,468,959,485,976,500,994,515,1002,534,996,546,975,553,951,559,924,568,891,577,872,585,864,589,853,575,844,564,829,546,823,541,811,520,800,502,801,483,806,473,811,468,837,466,871,467,893,467,916,451,920,433,912,414,899,409,880,406,861,405,849,409,837,414,824,426,808,438,801,440,787,440,777,438,764,429,764,409,755,394,749,380,738,365,723,357,715,349,736,350,763,345,797,333,820,323,844,317,864,317,883,322,892,335,893,350,892,368,906,381,924,387,947,385,966,379,969,362,958,351,941,336,921,322,914,307,918,298,919,297"
                        href="news.html" alt="News" />
        <area shape="poly" coords="799,582,799,598,797,614,803,625,816,637,833,643,873,644,895,639,914,632,934,622,957,613,984,603,999,594,1009,591,1040,609,1050,615,1072,632,1087,640,1095,651,1098,664,1095,677,1084,685,1073,692,1058,699,1041,700,1018,703,996,708,973,711,968,731,966,749,975,767,991,780,1012,787,1039,785,1061,781,1085,759,1099,745,1109,734,1135,732,1150,730,1165,745,1173,756,1188,774,1211,792,1227,806,1246,824,1253,830,1245,842,1228,857,1199,876,1172,889,1140,912,1108,926,1082,925,1063,919,1065,895,1055,866,1044,839,1031,827,1005,821,981,820,952,831,931,845,921,875,928,893,942,904,970,917,985,926,995,929,1008,939,1015,953,1016,965,1009,976,996,983,963,992,930,1010,911,1015,887,1026,859,1049,843,1068,834,1078,828,1078,826,1078"
                        href="alt.html" alt="Alt  " />
        <area shape="poly" coords="795,617,801,592,797,575,778,567,752,562,727,565,703,570,677,589,670,604,677,618,692,630,707,633,724,642,733,648,743,658,748,675,740,688,727,701,703,719,672,731,631,745,610,766,613,798,625,822,640,852,652,869,696,871,733,862,752,841,776,822,790,809,813,801,856,803,868,817,871,844,855,867,812,879,773,891,745,901,724,918,721,944,728,963,748,976,770,1001,804,1023,822,1046,821,1077,820,1077"
                        href="alt.html" alt="alt" />
</map>





</body>










</html>
 
Kein Wunder, da steht usemap="#HG”. Du musst natürlich den Namen der Map angeben, also usemap="image12". Außerdem sind die schließenden Hochkommas bei dir ein Sonderzeichen und nicht das Standardzeichen. Wenn man genau hinsieht, erkennt man es.
Um den weißen Rand wegzubekommen, musst Du beim body-Tag margin und padding auf 0 setzen:
HTML: 
<body style="margin:0px; padding:0px;">
Bei mir wird, im Gegensatz zu deiner Freundin, die Grafik angezeigt.
 
Zuletzt bearbeitet von einem Moderator:
Danke erstmals für die Antwort!
Wie mach ich das denn in Standard? Ich machs mit "umsch.+2" ist das etwa falsch?




ach gefunden...


aber ich kann die Puzzelteile immernoch nicht anklicken :(
 
Zuletzt bearbeitet:
Umsch+2 ist richtig. Aber hinter dem HG ist ein anderes Zeichen. Lösche das und füge es mit Umsch+2 neu ein.
 
Hallo Sempervivum, bin grad auf der arbeit und muss leider feststellen das der body-tag zum anpassen der grafik an den Desktop im "Vollbildmodus" nicht funktioniert :( ich bekomme den scrolbalken nicht weg. und die weißen Ränder sind jetzt noch größer. Das keinen HTML code für den scrollbalken gibt das weiß ich mittlerweile zumindest keinen der funktioniert. kann man das irgendwie mit php oder nem script lösen? oder noch besser wäre es in css.
 
Wenn Du Scrollbalken unterdrücken willst, musst Du natürlich eine Sprache nehmen die im Browser des Besuchers ausgeführt wird, also CSS. Dort solltest Du dir mal overflow anschauen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben