DIV referentiepunt wijzigen?

Status
Niet open voor verdere reacties.
W

witteandre

Gebruiker
Lid geworden
13 aug 2004
Berichten
10
Hoi,

Voor mijn site heb ik een kaart gemaakt met posities van de wandelingen.
Zie http://www.klikprintenwandel.nl/bolletjeskaart3.asp
Dat gaat allemaal goed alleen ik maak voor die posities gebruik van de HTML DIV code: <div style='position:absolute; left:40px; top:40px; z-index: 0; visibility:visible'>
Het probleem is nu dat het referentiepunt van DIV de linkerbovenhoek van de pagina is. Het lukt me niet om hem vanuit bijvoorbeeld de linkerbovenhoek van een tabel te laten rekenen.

Mijn site is namelijk opgebouwd binnen een gecentreerde tabel.
( http://www.klikprintenwandel.nl/overzicht.asp ). Afhankelijk van de gebruikte resolutie zal de kaart dan steeds op een andere positie uitkomen wat uiteraard niet de bedoeling is.
Wie kan me helpen met een oplossing?

André de Witte
 
witteandre,
Probeer eens het volgende uit.
Maak een div vb KaartNederland.En geef de volgende atributen mee,
Code: 
#KaartNederland {
	width: 388px;
	position: relative;
	height: 451px;
	background-image: url(Nkrtnederlandprov.gif);
	background-attachment: scroll;
	background-repeat: no-repeat;
}
Uw div kaartnederland een position relative meegeven daarin kan je dan vanuit de linkerbovenhoek die is nu 0,0 abs positioneren.
Plaats daarin uw tabel table#AutoNumber5. Verwijder ook het plaatje Nkrtnederlandprov.gif
uit de tabel, want dat wordt nu ingeladen in de div KaartNederland.
Nu kan je in de div KaartNederland vanuit de linker boven hoek absolut positionere wan die heeft nu de coördinaten 0,0.
Hieronder een vb:
Code: 
<div id="KaartNederland">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" id="AutoNumber5">
   <tr>
      <td width="450 px">
	 <map name="FPMap0">
    <area href="#NH" shape="poly" alt="Noord-Holland" coords="140, 93, 135, 76, 143, 62, 153, 57, 157, 67, 162, 100, 170, 97, 171, 101, 174, 107, 175, 124, 180, 129, 186, 126, 193, 129, 191, 136, 189, 139, 183, 144, 176, 144, 172, 141, 168, 143, 167, 150, 167, 157, 172, 161, 172, 164, 171, 167, 168, 170, 171, 180, 167, 183, 162, 185, 162, 187, 164, 190, 168, 192, 174, 192, 180, 197, 190, 198, 191, 202, 183, 215, 180, 215, 180, 212, 177, 210, 172, 211, 169, 204, 170, 200, 165, 198, 158, 200, 157, 204, 152, 205, 147, 209, 139, 210, 137, 206, 125, 210, 122, 207, 126, 199, 127, 195, 127, 192, 122, 195, 119, 192, 118, 188, 128, 164, 131, 137, 135, 112, 140, 92">
    <area href="#UTR" shape="poly" alt="Utrecht" coords="194, 205, 202, 208, 206, 217, 206, 220, 211, 221, 212, 227, 211, 236, 212, 237, 218, 234, 221, 244, 225, 251, 225, 254, 221, 252, 218, 252, 210, 249, 205, 251, 200, 249, 198, 252, 190, 249, 184, 251, 182, 248, 171, 246, 167, 249, 165, 247, 162, 251, 159, 251, 156, 254, 153, 253, 150, 249, 152, 246, 149, 242, 152, 237, 149, 235, 149, 231, 146, 227, 154, 228, 150, 212, 155, 209, 161, 204, 164, 202, 165, 203, 170, 215, 175, 214, 177, 215, 176, 218, 179, 219, 184, 219, 187, 216, 193, 204">
    <area href="#GLd" shape="poly" alt="Gelderland" coords="237, 187, 246, 181, 250, 175, 250, 173, 253, 167, 256, 173, 261, 173, 266, 168, 269, 167, 272, 172, 275, 181, 275, 183, 274, 185, 271, 188, 270, 193, 270, 197, 272, 199, 278, 207, 284, 212, 293, 214, 304, 211, 313, 219, 322, 221, 325, 223, 329, 223, 331, 229, 337, 230, 336, 233, 332, 238, 332, 240, 345, 251, 342, 259, 338, 262, 333, 258, 315, 266, 315, 270, 314, 271, 309, 267, 303, 266, 305, 270, 298, 269, 296, 265, 288, 267, 286, 262, 275, 261, 278, 269, 277, 271, 272, 265, 267, 274, 260, 272, 259, 273, 262, 282, 260, 285, 250, 283, 241, 284, 237, 279, 233, 277, 229, 274, 222, 273, 219, 274, 215, 273, 211, 276, 204, 276, 199, 283, 191, 287, 181, 284, 179, 281, 174, 280, 170, 276, 169, 275, 168, 271, 174, 269, 177, 267, 185, 255, 189, 254, 195, 255, 198, 255, 201, 254, 206, 254, 209, 252, 223, 257, 227, 257, 229, 254, 228, 248, 224, 237, 221, 229, 214, 233, 216, 225, 214, 221, 212, 217, 210, 214, 208, 209, 211, 209, 216, 210, 219, 207, 223, 198, 224, 194, 229, 192, 237, 186">
    <area href="#LB" shape="poly" alt="Limburg" coords="255, 289, 264, 290, 266, 299, 268, 301, 273, 303, 271, 307, 275, 314, 278, 318, 283, 322, 284, 329, 285, 337, 283, 343, 285, 348, 284, 352, 281, 352, 276, 364, 273, 365, 272, 378, 278, 381, 279, 382, 272, 387, 267, 390, 264, 392, 260, 399, 257, 394, 251, 396, 254, 409, 254, 414, 258, 410, 263, 410, 263, 417, 264, 419, 270, 420, 271, 427, 267, 429, 266, 435, 261, 437, 260, 438, 264, 442, 265, 443, 257, 445, 254, 441, 248, 444, 242, 440, 236, 442, 235, 437, 230, 430, 230, 429, 236, 426, 241, 416, 241, 411, 245, 398, 249, 390, 248, 387, 252, 385, 246, 379, 243, 376, 227, 374, 229, 371, 230, 362, 233, 359, 242, 356, 255, 351, 259, 346, 255, 337, 252, 327, 250, 319, 254, 320, 259, 320, 264, 318, 267, 321, 268, 312, 267, 308, 263, 303, 261, 293, 260, 291, 256, 290, 256, 289">
    <area href="#ZH" shape="poly" alt="Zuid-Holland" coords="115, 198, 105, 218, 97, 228, 84, 242, 79, 250, 88, 257, 95, 263, 97, 267, 96, 270, 93, 270, 88, 270, 79, 261, 76, 256, 73, 256, 72, 260, 72, 265, 72, 270, 73, 275, 72, 275, 66, 272, 58, 273, 49, 277, 51, 283, 53, 284, 59, 282, 64, 280, 67, 281, 67, 285, 70, 293, 75, 294, 79, 297, 87, 301, 92, 303, 97, 303, 101, 301, 104, 297, 105, 293, 102, 291, 98, 293, 85, 285, 82, 282, 75, 277, 78, 274, 83, 276, 89, 282, 101, 288, 112, 292, 116, 293, 120, 294, 125, 292, 126, 291, 136, 291, 144, 291, 147, 292, 152, 292, 159, 290, 163, 290, 170, 292, 173, 290, 177, 287, 176, 284, 167, 279, 164, 275, 164, 270, 164, 266, 168, 265, 175, 263, 178, 260, 181, 254, 176, 250, 171, 250, 167, 254, 164, 253, 157, 256, 153, 259, 150, 255, 148, 246, 146, 238, 146, 232, 144, 225, 149, 225, 147, 213, 139, 215, 136, 213, 126, 214, 122, 214, 120, 210, 120, 207, 122, 200, 122, 199, 116, 198, 114, 200">
    <area href="#ZEEl" shape="poly" alt="Zeeland" coords="47, 290, 43, 288, 36, 289, 33, 293, 35, 298, 38, 301, 42, 302, 45, 305, 43, 305, 44, 306, 43, 308, 40, 311, 36, 311, 23, 312, 8, 322, 9, 325, 16, 331, 21, 337, 26, 338, 26, 340, 25, 343, 24, 343, 16, 342, 11, 344, 6, 344, 2, 348, 3, 352, 1, 357, 4, 363, 9, 369, 17, 369, 19, 364, 24, 361, 32, 361, 40, 364, 45, 368, 44, 372, 44, 374, 49, 373, 53, 375, 58, 375, 64, 371, 67, 370, 69, 370, 72, 369, 77, 365, 89, 352, 89, 350, 86, 349, 83, 352, 79, 353, 69, 347, 63, 342, 59, 345, 56, 350, 51, 353, 45, 353, 39, 351, 29, 346, 26, 345, 30, 338, 34, 335, 36, 339, 40, 344, 43, 344, 48, 346, 51, 346, 55, 344, 57, 341, 60, 338, 62, 337, 66, 339, 72, 343, 76, 343, 85, 344, 89, 345, 94, 344, 90, 337, 80, 337, 76, 333, 67, 326, 70, 319, 76, 324, 80, 324, 85, 326, 86, 323, 86, 319, 83, 313, 75, 309, 76, 302, 72, 299, 66, 295, 65, 293, 63, 290, 61, 290, 55, 289, 52, 288, 47, 291, 44, 289">
    <area href="#BRA" shape="poly" alt="Brabant" coords="108, 300, 124, 301, 129, 297, 137, 298, 142, 295, 147, 295, 156, 294, 161, 294, 166, 296, 171, 295, 178, 291, 181, 289, 189, 291, 195, 290, 198, 287, 203, 283, 206, 280, 211, 279, 215, 276, 219, 277, 225, 277, 230, 279, 234, 282, 238, 286, 245, 289, 247, 288, 251, 287, 255, 291, 257, 292, 260, 298, 260, 303, 263, 308, 264, 311, 263, 313, 262, 315, 257, 315, 249, 314, 248, 318, 249, 330, 257, 346, 252, 350, 235, 356, 231, 357, 228, 362, 226, 371, 224, 371, 220, 363, 217, 359, 213, 359, 205, 364, 197, 364, 196, 366, 188, 362, 188, 359, 186, 354, 181, 354, 175, 344, 175, 337, 176, 332, 172, 331, 165, 332, 163, 337, 158, 343, 154, 340, 150, 340, 149, 330, 147, 327, 139, 325, 137, 330, 132, 333, 133, 334, 133, 340, 128, 338, 124, 337, 121, 339, 121, 331, 121, 328, 114, 328, 107, 333, 102, 334, 105, 343, 106, 347, 104, 352, 100, 347, 95, 345, 92, 336, 93, 332, 90, 327, 91, 324, 92, 317, 87, 312, 87, 309, 95, 312, 100, 309, 105, 303, 109, 300">
    <area href="#ov"  shape="poly" alt="overijssel" coords="276, 126, 278, 138, 298, 144, 306, 154, 317, 153, 320, 145, 328, 142, 332, 145, 336, 154, 334, 161, 332, 170, 340, 179, 348, 178, 359, 181, 363, 180, 370, 187, 367, 201, 367, 208, 364, 210, 355, 219, 348, 226, 339, 226, 336, 220, 327, 217, 317, 215, 309, 208, 295, 209, 288, 207, 281, 200, 277, 192, 281, 187, 282, 178, 275, 167, 272, 163, 267, 164, 261, 168, 256, 164, 252, 155, 255, 152, 259, 153, 263, 149, 268, 149, 268, 145, 266, 137, 259, 122, 255, 120, 262, 121, 269, 121, 274, 117, 277, 114, 280, 116, 284, 121">
    <area href="#Dr" shape="poly" alt="Drenthe" coords="368, 143, 372, 114, 365, 107, 365, 103, 338, 71, 333, 71, 331, 72, 319, 59, 313, 58, 308, 63, 303, 74, 306, 82, 311, 90, 310, 100, 302, 103, 296, 102, 283, 111, 289, 118, 283, 129, 284, 137, 300, 137, 307, 146, 314, 146, 319, 135, 330, 138, 339, 142, 355, 140">
    <area href="#Gr" shape="poly" alt="Groningen" coords="284, 27, 298, 25, 312, 24, 326, 20, 342, 17, 346, 22, 348, 21, 351, 33, 384, 53, 380, 66, 384, 84, 374, 107, 374, 101, 347, 70, 336, 66, 333, 67, 324, 55, 318, 54, 315, 53, 303, 57, 300, 69, 289, 66, 289, 63, 292, 49, 300, 37, 297, 33, 294, 32">
    <area href="#Fr" shape="poly" alt="Friesland" coords="290, 36, 282, 32, 282, 26, 266, 26, 248, 32, 229, 41, 212, 55, 208, 73, 208, 92, 208, 101, 205, 106, 215, 109, 222, 111, 228, 107, 243, 110, 248, 117, 258, 113, 263, 111, 267, 114, 279, 111, 282, 103, 293, 97, 301, 99, 305, 93, 300, 81, 292, 74, 284, 71, 281, 62, 283, 55, 291, 47, 291, 39">
    <area href="#Fl" shape="poly" alt="Flevoland" coords="216, 204, 219, 189, 228, 187, 237, 178, 250, 169, 247, 160, 246, 148, 259, 145, 260, 133, 250, 125, 245, 123, 240, 118, 230, 119, 228, 126, 227, 139, 229, 145, 226, 153, 218, 160, 212, 164, 206, 169, 190, 181, 181, 189, 184, 191, 190, 192, 198, 197, 205, 204">
    </map>
	<!-- Plaatsen aanduiden met rode stip-->
	<div style='position:absolute; left:142px; top:72px; z-index: 0; visibility:visible'>
      <a href="route.asp?id=92">
      <img src='rood.gif' border=0 style='mouse: hand' alt='De Weggetjes &nbsp;&nbsp; Den Burg (Texel) &nbsp;&nbsp; 5 / 8 / 12&nbsp;KM'></a>
	  
	  <div style='position:absolute; left:75px; top:-16px; z-index: 0; visibility:visible'>
      <a href="route.asp?id=138">
      <img src='rood.gif' border=0 style='mouse: hand' alt='Stadswandeling in en om Franeker &nbsp;&nbsp; Franeker &nbsp;&nbsp; 7,5&nbsp;KM'></a> </div>

<div style='position:absolute; left:342px; top:71px; z-index: 0; visibility:visible'>
      <a href="route.asp?id=91">
      <img src='rood.gif' border=0 style='mouse: hand' alt='Noordhoekroute &nbsp;&nbsp; Noordhorn &nbsp;&nbsp; 9&nbsp;KM'></a>
 </div>
 
 <div style='position:absolute; left:370px; top:93px; z-index: 0; visibility:visible'>
      <a href="route.asp?id=134">
      <img src='rood.gif' border=0 style='mouse: hand' alt='Noordlaarder Es &  Bos &nbsp;&nbsp; Noordlaren &nbsp;&nbsp; 8, 14, 18&nbsp;KM'></a>
 </div>
 
 <div style='position:absolute; left:357px; top:126px; z-index: 0; visibility:visible'>
      <a href="route.asp?id=99">
      <img src='rood.gif' border=0 style='mouse: hand' alt='Hoog- en Laaghalerveen &nbsp;&nbsp; Hooghalen &nbsp;&nbsp; 15&nbsp;KM'></a>
 </div>
 </div>
</tr>
</table>
</div>
Rest alleen nog uw pos abs aan te passen vanuit de div KaartNederland.
Laat even iets weten als het werkt.
suc6
 
witteandre,
Daar had ik geen rekening mee gehouden. Terug naar af? nee denk ik.
Het plaatje Nkrtnederlandprov.gif niet meer als achtergrond plaatje inladen in de div KaartNederland maar er terug zo inplaatsen zoals vroeger.vb
Code: 
<area href="#Fl" shape="poly" alt="Flevoland" coords="216, 204, 219, 189, 228, 187, 237, 178, 250, 169, 247, 160, 246, 148, 259, 145, 260, 133, 250, 125, 245, 123, 240, 118, 230, 119, 228, 126, 227, 139, 229, 145, 226, 153, 218, 160, 212, 164, 206, 169, 190, 181, 181, 189, 184, 191, 190, 192, 198, 197, 205, 204">
    </map>
	[COLOR="Red"]<img src="Nkrtnederlandprov.gif" width="388" height="451" border="0" usemap="#Map">[/COLOR]
	<!-- Plaats aanduiden-->
	<div style='position:absolute; left:142px; top:72px; z-index: 0; visibility:visible'>
      <a href="route.asp?id=92">
      <img src='rood.gif' border=0 style='mouse: hand' alt='De Weggetjes &nbsp;&nbsp; Den Burg (Texel) &nbsp;&nbsp; 5 / 8 / 12&nbsp;KM'></a>
en dan terug uw imagemaps terug aanmaken, wel een beetje werk maar normaal zou het moeten werken.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan