Landkarten Link-Punkte

goldpixler

Grünschnabel
Hallo Alle

ich suche und da ich es nicht gefunden habe währe das mein Wunschtut.

Wie kann ich auf einer Landkarten Link-Punkte (z.B. eine Stadt ein Fluss oder ne Sehenswürdigkeit) setzen die ich dann anklicken kann und ein link wird dazu ausgeführt (weitere Seite in der HP)

Sorry neben bei bin absoluter anfänger mache mal gerade 6 wochen HTML. Also währ mir helfen kann, tue es doch bitte.
Danke
Günter Goldpixler.de
 
Hi,

ich hab sowas neulich für die Hauptstädte der US-Bundesstaaten gemacht.

Hier mal mein Code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>USA</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="Map of the USA" />
    <meta name="keywords" content="USA, map, goverment, states, official page" />

    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="seal.gif" type="image/x-icon" rel="shortcut icon" />
</head>

<body>
    <div id="main" align="center">
        <h1>The United States of America</h1>
        <p>Choose a state you want to learn more about:</p>
        <!-- Map of the US with Links to the .gov-pages of the states -->
        <a href="http://www.usa.gov/"> 
            <img src="map.jpg" height="392" width="635" title="The United States of America" id="map" usemap="#map" />
        </a>
        <map name="map">
            <area shape="rect" coords="49, 36, 95, 45"      href="http://access.wa.gov/"                                                            title="Washington" />
            <area shape="rect" coords="43, 84, 71, 94"      href="http://www.oregon.gov/"                                                           title="Oregon" />
            <area shape="rect" coords="158, 64, 192, 71"    href="http://mt.gov/"                                                                   title="Montana" />
            <area shape="rect" coords="110, 106, 130, 114"  href="http://idaho.gov/"                                                                title="Idaho" />
            <area shape="rect" coords="28, 197, 65, 205"    href="http://www.ca.gov/"                                                               title="California" />
            <area shape="rect" coords="64, 152, 95, 161"    href="http://nevada.gov/"                                                               title="Nevada" />
            <area shape="rect" coords="169, 124, 204, 133"  href="http://www.wyoming.gov/"                                                          title="Wyoming" />
            <area shape="rect" coords="127, 167, 144, 176"  href="http://www.utah.gov/"                                                             title="Utha" />
            <area shape="rect" coords="110, 228, 138, 245"  href="http://az.gov/"                                                                   title="Arizona" />
            <area shape="rect" coords="184, 182, 218, 191"  href="http://www.colorado.gov/"                                                         title="Colorado" />
            <area shape="rect" coords="169, 247, 216, 256"  href="http://www.newmexico.gov/"                                                        title="New Mexico" />
            <area shape="rect" coords="237, 65, 288, 74"    href="http://www.nd.gov/"                                                               title="North Dakota" />
            <area shape="rect" coords="239, 107, 292, 117"  href="http://www.sd.gov/"                                                               title="South Dakota" />
            <area shape="rect" coords="249, 149, 287, 158"  href="http://nebraska.gov/"                                                             title="Nebraska" />
            <area shape="rect" coords="262, 192, 292, 201"  href="http://www.kansas.gov"                                                            title="Kensas" />
            <area shape="rect" coords="271, 234, 310, 243"  href="http://oklahoma.gov/"                                                             title="Oklahoma" />
            <area shape="rect" coords="258, 293, 283, 302"  href="http://www.texas.gov/en/Pages/default.aspx"                                       title="Texas" />
            <area shape="rect" coords="58, 323, 84, 335"    href="http://alaska.gov/"                                                               title="Alaska" />
            <area shape="rect" coords="161, 361, 188, 371"  href="http://www.ehawaii.gov/dakine/index.html"                                         title="Hawaii" />
            <area shape="rect" coords="302, 82, 343, 91"    href="http://www.state.mn.us/portal/mn/jsp/home.do?agency=NorthStar"                    title="Minnesota" />
            <area shape="rect" coords="323, 144, 341, 153"  href="http://iowa.gov/"                                                                 title="Iowa" />
            <area shape="rect" coords="329, 192, 362, 202"  href="http://www.mo.gov/"                                                               title="Missuri" />
            <area shape="rect" coords="329, 239, 366, 249"  href="http://portal.arkansas.gov/Pages/default.aspx"                                    title="Arkansas" />
            <area shape="rect" coords="339, 308, 377, 318"  href="http://louisiana.gov/"                                                            title="Louisiana" />
            <area shape="rect" coords="346, 98, 387, 107"   href="http://wisconsin.gov/state/index.html"                                            title="Wiskonsin" />
            <area shape="rect" coords="367, 168, 391, 177"  href="http://www2.illinois.gov/Pages/default.aspx"                                      title="Illinois" />
            <area shape="rect" coords="360, 270, 404, 282"  href="http://www.mississippi.gov/"                                                      title="Mississippi" />
            <area shape="rect" coords="439, 157, 459, 168"  href="http://ohio.gov/"                                                                 title="Ohio" />
            <area shape="rect" coords="408, 204, 443, 214"  href="http://kentucky.gov/Pages/home.aspx"                                              title="Kentucky" />
            <area shape="rect" coords="389, 227, 433, 237"  href="http://tennessee.gov/"                                                            title="Tennessee" />
            <area shape="rect" coords="339, 262, 434, 272"  href="http://www.alabama.gov/portal/index.jsp"                                          title="Alabama" />
            <area shape="rect" coords="476, 337, 505, 348"  href="http://www.myflorida.com/"                                                        title="Florida" />
            <area shape="rect" coords="442, 266, 475, 278"  href="http://georgia.gov/00/home/0,2061,4802,00.html"                                   title="Georgia" />
            <area shape="rect" coords="469, 239, 502, 257"  href="http://www.sc.gov/Pages/default.aspx"                                             title="South Carolina" />
            <area shape="rect" coords="466, 219, 524, 230"  href="http://www.northcarolina.gov/"                                                    title="North Carolina" />
            <area shape="rect" coords="485, 195, 512, 205"  href="http://virginia.gov/cmsportal3/"                                                  title="Virginia" />
            <area shape="rect" coords="474, 141, 527, 151"  href="http://www.pennsylvania.gov/portal/server.pt/community/pa_gov/2966"               title="Pennsylvania" />
            <area shape="rect" coords="493, 113, 533, 123"  href="http://ny.gov/"                                                                   title="New York" />
            <area shape="rect" coords="562, 57, 588, 68"    href="http://www.maine.gov/portal/index.php"                                            title="Maine" />
            <area shape="rect" coords="408, 120, 444, 130"  href="http://michigan.gov/"                                                             title="Michigan" />
            <area shape="rect" coords="398, 168, 429, 177"  href="http://www.in.gov/"                                                               title="Indiana" />
            <area shape="rect" coords="454, 23, 518, 34"    href="http://www.nh.gov/"                                                               title="New Hempshire" />
            <area shape="rect" coords="482, 41, 517, 52"    href="http://vermont.gov/portal/"                                                       title="Vermont" />
            <area shape="rect" coords="457, 58, 516, 69"    href="http://www.massechusetts.com/eflpgg/massachusetts/pid39246/D28893/C680/provGOOD"  title="Massachusetts" />
            <area shape="rect" coords="576, 129, 629, 140"  href="http://www.ri.gov/"                                                               title="Rhode Island" />
            <area shape="rect" coords="582, 146, 629, 157"  href="http://www.ct.gov/"                                                               title="Connecticut" />
            <area shape="rect" coords="582, 166, 628, 173"  href="http://newjersey.gov/"                                                            title="New Jersey" />
            <area shape="rect" coords="591, 179, 629, 191"  href="http://delaware.gov/"                                                             title="Delaware" />
            <area shape="rect" coords="591, 195, 629, 206"  href="http://www.maryland.gov/Pages/default.aspx"                                       title="Maryland" />
            <area shape="rect" coords="582, 212, 629, 220"  href="http://dc.gov/DC/"                                                                title="Washington D.C." />
            <area shape="rect" coords="577, 226, 629, 237"  href="http://www.wv.gov/Pages/default.aspx"                                             title="West Virginia" />
        </map>
    </div>   
</body>
</html>

Das Style-Sheet dazu:
CSS:
body{
    background-color: #909090;
    color: #404040	;
}
#main{
    position: relative;
    background-color: #C0C0C0;
    width: 900px;
    height: auto;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    padding-top: 5px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
}
#map{
    border: medium solid #404040;
}

Im Anhang das Bild + favicon.
Die Koordinaten der Schrift oder auch Grenzen, Flussverläufe, ect. kannst du mit fast jedem Grafik-/ Bildbearbeitungs-Programm herausfinden.

javaDeveloper2011
 

Anhänge

  • map.jpg
    map.jpg
    49,4 KB · Aufrufe: 13
  • seal.gif
    seal.gif
    1,7 KB · Aufrufe: 24
Zuletzt bearbeitet:
Zurück