Avatar billede katja_kh Nybegynder
12. marts 2008 - 11:05 Der er 5 kommentarer og
1 løsning

Imagemap -tryk på link value indsættes i input felt.

Jeg har lavet et imagemap.
Meningen er at man skal kunne vælge et område på kortet, når man klikker skal navnet på området sættes ind i et input felt.

Jeg tror det er noget javascript, men jeg ved ikke hvordan jeg skal gøre det.

Jeg har en gode der ser sådan ud:

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

<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="Zend Studio" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stylesheet/style.css">
<title>Samsø Sommerhuse</title>
</head>
<body>

<div id="main">
    <div class="banner"><div class="titel"></div></div>
   
<a href="index.php"><div class="forside"><div class="text2">Forside</div></div></a>
       
        <a href="tilbud.php"><div class="tilbud"> <div class="text">Aktuelle tilbud</div></div></a>
       
        <a href="leje.php"><div class="leje"><div class="text">Lejebetingelser</div></div></a>
       
        <a href="os.php"><div class="os"><div class="text2">Om os</div></div></a>
       
        <a href="kontakt.php"><div class="kontakt"><div class="text2">Kontakt</div></div></a>
       
        <a href="links.php"><div class="links"><div class="text2">Links</div></div></a>
       
        <div class="form">
            <div class="text">
        <form name="form" method="POST" action="">
        &nbsp;&nbsp;<big>Søg ledigt sommerhus</big><br><br>
            Ankomst:<input type="Text" name="timestamp" value="" style="background-color:#f5f5f5;">
                Område:&nbsp;<input type="text" name="omrode"style="background-color:#f5f5f5;"></input><br><br>
                    Antal sovepladser: <br>
                    <select name="soveplads"style="background-color:#f5f5f5;">
                    <option value="selected">Vælg</option>
                    <option value="2">2 sovepladser</option>
                    <option value="4">4 sovepladser</option>
                    <option value="6">6 sovepladser</option>
                    </select><br><br>
        <input type="submit" name="submit" value="Søg">
        <input type="reset" name="reset" value="Ryd">
            </div>
        </div>
        </form>
       
       
       
        <div class="kort">
            <img src="billeder/imagemap.jpg" width="141" height="312" border="0" usemap="#Map" />
            <map name="Map" id="Map"><area shape="rect" coords="94,236,114,249" href="Ballen" target="_blank" alt="Ballen" />
            <area shape="rect" coords="70,297,97,313" href="#" target="_blank" alt="Lushage" >
            <area shape="rect" coords="38,256,55,267" href="#" target="_blank" alt="Kolby" />
            <area shape="rect" coords="37,221,64,236" href="#" target="_blank" alt="Pillemark" />
            <area shape="rect" coords="31,190,58,203" href="#" target="_blank" alt="Onsbjerg" />
            <area shape="rect" coords="79,194,99,207" href="#" target="_blank" alt="Torup" />
            <area shape="rect" coords="96,172,121,185" href="#" target="_blank" alt="Besser" />
            <area shape="rect" coords="72,152,98,164" href="#" target="_blank" alt="Toftebjerg" />
            <area shape="rect" coords="75,129,98,141" href="#" target="_blank" alt="Stavns" />
            <area shape="rect" coords="32,48,57,60" href="#" target="_blank" alt="Nordby" />
            </map>
        </div>
Avatar billede jokkejensen Novice
12. marts 2008 - 11:34 #1
Det kan gøres lidt smukkere sådan her:

smid det her i <head>

<script type="text/javascript">
function fill(variable)
{
    if(document.getElementById("input"))
    document.getElementById("input").value = variable;
}
</script>

smid den her i din form : <input id="input" />

erstat kort med:
<div class="kort" style="width:141px;height: 312px;position:relative;background:url(billeder/imagemap.jpg) no-repeat;bordeR: 1px solid blue;">
<a href="#" onclick="fill('Lushage')" style="border: 1px solid red; width: 100px;height: 30px;position:absolute;left:0;top:0;">&nbsp;</a>
<a href="#" onclick="fill('Kolby')" style="border: 1px solid red; width: 100px;height: 30px;position:absolute;left:0;top:30px;">&nbsp;</a>
</div>

Du opretter så bare flere links og positionere dem absolut inde i divet, jeg har lige lavet rød border...

/JJ
Avatar billede jokkejensen Novice
12. marts 2008 - 11:35 #2
sådan her:

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

<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="Zend Studio" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stylesheet/style.css">
<title>Samsø Sommerhuse</title>
<script type="text/javascript">
function fill(variable)
{
    if(document.getElementById("input"))
    document.getElementById("input").value = variable;
}
</script>
</head>
<body>

<div id="main">
    <div class="banner"><div class="titel"></div></div>
 
<a href="index.php"><div class="forside"><div class="text2">Forside</div></div></a>
     
        <a href="tilbud.php"><div class="tilbud"> <div class="text">Aktuelle tilbud</div></div></a>
     
        <a href="leje.php"><div class="leje"><div class="text">Lejebetingelser</div></div></a>
     
        <a href="os.php"><div class="os"><div class="text2">Om os</div></div></a>
     
        <a href="kontakt.php"><div class="kontakt"><div class="text2">Kontakt</div></div></a>
     
        <a href="links.php"><div class="links"><div class="text2">Links</div></div></a>
     
        <div class="form">
            <div class="text">
        <form name="form" method="POST" action="">
        &nbsp;&nbsp;<big>Søg ledigt sommerhus</big><br><br>
            Ankomst:<input type="Text" name="timestamp" value="" style="background-color:#f5f5f5;">
                Område:&nbsp;<input type="text" name="omrode"style="background-color:#f5f5f5;"></input><br><br>
                    Antal sovepladser: <br>
                    <select name="soveplads"style="background-color:#f5f5f5;">
                    <option value="selected">Vælg</option>
                    <option value="2">2 sovepladser</option>
                    <option value="4">4 sovepladser</option>
                    <option value="6">6 sovepladser</option>
                    </select><br><br>
        <input type="submit" name="submit" value="Søg" />
        <input type="reset" name="reset" value="Ryd" />
            </div>
        </div>
        <input id="input" />
        </form>
     
     
     


<div class="kort" style="width:141px;height: 312px;position:relative;background:url(billeder/imagemap.jpg) no-repeat;bordeR: 1px solid blue;">
<a href="#" onclick="fill('Lushage')" style="border: 1px solid red; width: 100px;height: 30px;position:absolute;left:0;top:0;">&nbsp;</a>
<a href="#" onclick="fill('Kolby')" style="border: 1px solid red; width: 100px;height: 30px;position:absolute;left:0;top:30px;">&nbsp;</a>
</div>
        </div>
       
        </body>
        </html>
Avatar billede katja_kh Nybegynder
12. marts 2008 - 11:47 #3
det kan jeg så ikke få til at fungere.. Der kommer godt nok 2 røde firkanter øverst i billedet, men når man trykker på dem sker der intet.
Avatar billede jokkejensen Novice
12. marts 2008 - 12:02 #4
prøv at kopiere hele nr 2.. den virker fint her.

Og har du husket at skrive det lille stykke javascript ? - (post lige det hele igen)

/JJ
Avatar billede katja_kh Nybegynder
12. marts 2008 - 12:15 #5
ej undskyld det virker.. input feltet havde bare gemt sig bag mit banner..
Hvis du smider et svar skal du få point.
Avatar billede jokkejensen Novice
12. marts 2008 - 12:34 #6
:).. takker.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester