Notifikationer

Markér alle som læst Log ud

flol Nybegynder

27. februar 2007 - 11:20 Der er 14 kommentarer og
1 løsning

Ryk rundt i billede

hej! :)
jeg kunne godt tænke mig og vide, hvordan jeg kan få et lille billede, til at kunne rykke rundt i et større billede, der er delt op i area links?

altså fx:

------------------kode-------------------

<img src="file:///C|/Documents and Settings/elev/Skrivebord/design/test.jpg" width="500" height="500" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="138,127,207,196" href="?flet=1" alt="" name="1" />
<area shape="rect" coords="206,127,275,196" href="?flet=2" alt="" name="2" />
<area shape="rect" coords="274,127,343,196" href="?flet=3" alt="" name="3" />
<area shape="rect" coords="342,127,411,196" href="?flet=4" alt="" name="4" />
<area shape="rect" coords="46,195,113,262" href="?flet=5" alt="" name="5" />
<area shape="rect" coords="112,195,179,262" href="?flet=6" alt="" name="6" />
<area shape="rect" coords="178,195,245,262" href="?flet=7" alt="" name="7" />
<area shape="rect" coords="244,195,311,262" href="?flet=8" alt="" name="8" />
<area shape="rect" coords="310,195,377,262" href="?flet=9" alt="" name="9" />
<area shape="rect" coords="376,195,443,262" href="?flet=10" alt="" name="10" />
<area shape="rect" coords="24,261,90,327" href="?flet=11" alt="" name="11" />
<area shape="rect" coords="89,261,155,327" href="?flet=12" alt="" name="12" />
<area shape="rect" coords="154,261,220,327" href="?flet=13" alt="" name="13" />
<area shape="rect" coords="219,261,285,327" href="?flet=14" alt="" name="14" />
<area shape="rect" coords="284,261,350,327" href="?flet=15" alt="" name="15" />
<area shape="rect" coords="70,127,139,196" href="?flet=16" alt="" name="16" />
<area shape="rect" coords="349,261,415,327" href="?flet=17" alt="" name="17" />
<area shape="rect" coords="414,261,480,327" href="?flet=18" alt="" name="18" />
<area shape="rect" coords="23,326,87,390" href="?flet=19" alt="" name="19" />
<area shape="rect" coords="275,326,339,390" href="?flet=20" alt="" name="20" />
<area shape="rect" coords="338,326,402,390" href="?flet=21" alt="" name="21" />
<area shape="rect" coords="401,326,465,390" href="?flet=22" alt="" name="22" />
<area shape="rect" coords="86,326,150,390" href="?flet=23" alt="" name="23" />
<area shape="rect" coords="149,326,213,390" href="?flet=24" alt="" name="24" />
<area shape="rect" coords="212,326,276,390" href="?flet=25" alt="" name="25" />
<area shape="rect" coords="3,389,67,453" href="?flet=26" alt="" name="26" />
<area shape="rect" coords="66,389,130,453" href="?flet=27" alt="" name="27" />
<area shape="rect" coords="129,389,193,453" href="?flet=28" alt="" name="28" />
<area shape="rect" coords="192,389,256,453" href="?flet=29" alt="" name="29" />
<area shape="rect" coords="255,389,319,453" href="?flet=30" alt="" name="30" />
<area shape="rect" coords="318,389,382,453" href="?flet=31" alt="" name="31" />
<area shape="rect" coords="381,389,445,453" href="?flet=32" alt="" name="32" />
<area shape="rect" coords="444,389,508,453" href="?flet=33" alt="" name="33" />
</map>

--------------------/kode-------------------

Dette er jo bare et billede, der er delt op i "links" men, hvis nu jeg havde et andet billede, som fyldte så meget, som en af "links/areas" felterne kunne jeg så ikke få det billede, til at kunne rykke rundt i billedet ?
kan det lade sig gøre ?

Synes godt om

roenving Novice

27. februar 2007 - 14:12 #1

Tjah, et eksempel på, at det kan lade sig gøre:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test flyt til Areas</title>
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
</style>
<script language="javascript" type="text/javascript">
var ars = null, actArea = 0, Div;
var koords = [];
window.onload = function(){
var elm = document.getElementById("Map");
ars = elm.getElementsByTagName("area");
for(i=0,im=ars.length;im>i;i++)
koords[i] = ars[i].coords;
Div = document.getElementById("minDiv");
}
function moveDiv(){
actArea = ++actArea % ars.length;
actK = koords[actArea].split(",");
Div.style.left = actK[0] + "px";
Div.style.top = actK[1] + "px";
Div.style.display = "block";
}
</script>
</head>

<body onresize onload>
<button name="button2" id="button2" onclick="moveDiv()">Flyt focus</button>
<div style="position:relative">
<img src="../billede.jpg" width="500" height="500" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="138,127,207,196" href="?flet=1" alt="" name="1" />
<area shape="rect" coords="206,127,275,196" href="?flet=2" alt="" name="2" />
<area shape="rect" coords="274,127,343,196" href="?flet=3" alt="" name="3" />
<area shape="rect" coords="342,127,411,196" href="?flet=4" alt="" name="4" />
<area shape="rect" coords="46,195,113,262" href="?flet=5" alt="" name="5" />
<area shape="rect" coords="112,195,179,262" href="?flet=6" alt="" name="6" />
<area shape="rect" coords="178,195,245,262" href="?flet=7" alt="" name="7" />
<area shape="rect" coords="244,195,311,262" href="?flet=8" alt="" name="8" />
<area shape="rect" coords="310,195,377,262" href="?flet=9" alt="" name="9" />
<area shape="rect" coords="376,195,443,262" href="?flet=10" alt="" name="10" />
<area shape="rect" coords="24,261,90,327" href="?flet=11" alt="" name="11" />
<area shape="rect" coords="89,261,155,327" href="?flet=12" alt="" name="12" />
<area shape="rect" coords="154,261,220,327" href="?flet=13" alt="" name="13" />
<area shape="rect" coords="219,261,285,327" href="?flet=14" alt="" name="14" />
<area shape="rect" coords="284,261,350,327" href="?flet=15" alt="" name="15" />
<area shape="rect" coords="70,127,139,196" href="?flet=16" alt="" name="16" />
<area shape="rect" coords="349,261,415,327" href="?flet=17" alt="" name="17" />
<area shape="rect" coords="414,261,480,327" href="?flet=18" alt="" name="18" />
<area shape="rect" coords="23,326,87,390" href="?flet=19" alt="" name="19" />
<area shape="rect" coords="275,326,339,390" href="?flet=20" alt="" name="20" />
<area shape="rect" coords="338,326,402,390" href="?flet=21" alt="" name="21" />
<area shape="rect" coords="401,326,465,390" href="?flet=22" alt="" name="22" />
<area shape="rect" coords="86,326,150,390" href="?flet=23" alt="" name="23" />
<area shape="rect" coords="149,326,213,390" href="?flet=24" alt="" name="24" />
<area shape="rect" coords="212,326,276,390" href="?flet=25" alt="" name="25" />
<area shape="rect" coords="3,389,67,453" href="?flet=26" alt="" name="26" />
<area shape="rect" coords="66,389,130,453" href="?flet=27" alt="" name="27" />
<area shape="rect" coords="129,389,193,453" href="?flet=28" alt="" name="28" />
<area shape="rect" coords="192,389,256,453" href="?flet=29" alt="" name="29" />
<area shape="rect" coords="255,389,319,453" href="?flet=30" alt="" name="30" />
<area shape="rect" coords="318,389,382,453" href="?flet=31" alt="" name="31" />
<area shape="rect" coords="381,389,445,453" href="?flet=32" alt="" name="32" />
<area shape="rect" coords="444,389,508,453" href="?flet=33" alt="" name="33" />
</map>

<div id="minDiv" style="position:absolute;width:64px;height:64px;background:#cca;opacity=0.3;filter:alpha(opacity=30);display:none;"> </div>
</div>

</body>

</html>

Synes godt om

roenving Novice

27. februar 2007 - 14:13 #2

-- og jeg glemte at fjerne noget inde i body-tagget:

<body> !-)

Synes godt om

flol Nybegynder

27. februar 2007 - 16:06 #3

:) det virker jo fint, men tænkte mere på, sådan at man klikker på det sted, man vil hen på billedet, og så kommer man der hen.
Istedet for at trykke på focus knappen?

Synes godt om

roenving Novice

27. februar 2007 - 17:20 #4

<area shape="rect" coords="318,389,382,453" href="?flet=31" alt="" name="31" onclick="moveHere(this)" />

function moveHere(elm){
var actK = elm.coords.split(",");
Div.style.left = actK[0] + "px";
Div.style.top = actK[1] + "px";
Div.style.display = "block";
}

-- og så er det kun Div-variablen, der skal initieres fra start:

var Div = null;
window.onload = function(){
Div = document.getElementById("minDiv");
}

Synes godt om

flol Nybegynder

27. februar 2007 - 17:50 #5

hmm kan ikke rigtig få det til at virke.. :/

Synes godt om

flol Nybegynder

27. februar 2007 - 17:52 #6

den hopper sådan hurtigt over, på det felt man trykker på, og så hopper den tilbage, hvor den startede..!

Synes godt om

flol Nybegynder

27. februar 2007 - 21:50 #7

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test flyt til Areas</title>
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
</style>
<script language="javascript" type="text/javascript">
var Div = null;
window.onload = function(){
Div = document.getElementById("minDiv");
}
function moveHere(elm){
var actK = elm.coords.split(",");
Div.style.left = actK[0] + "px";
Div.style.top = actK[1] + "px";
Div.style.display = "block";
}
</script>
</head>

<body>
<button name="button2" id="button2" onclick="moveDiv()">Flyt focus</button>
<div style="position:relative">
<img src="billede.jpg" width="500" height="500" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="138,127,207,196" href="?flet=1" alt="" name="1" onclick="moveHere(this)" />
<area shape="rect" coords="206,127,275,196" href="?flet=2" alt="" name="2" onclick="moveHere(this)" />
<area shape="rect" coords="274,127,343,196" href="?flet=3" alt="" name="3" onclick="moveHere(this)" />
<area shape="rect" coords="342,127,411,196" href="?flet=4" alt="" name="4" onclick="moveHere(this)" />
<area shape="rect" coords="46,195,113,262" href="?flet=5" alt="" name="5" onclick="moveHere(this)" />
<area shape="rect" coords="112,195,179,262" href="?flet=6" alt="" name="6" onclick="moveHere(this)" />
<area shape="rect" coords="178,195,245,262" href="?flet=7" alt="" name="7" onclick="moveHere(this)" />
<area shape="rect" coords="244,195,311,262" href="?flet=8" alt="" name="8" onclick="moveHere(this)" />
<area shape="rect" coords="310,195,377,262" href="?flet=9" alt="" name="9" onclick="moveHere(this)" />
<area shape="rect" coords="376,195,443,262" href="?flet=10" alt="" name="10" onclick="moveHere(this)" />
<area shape="rect" coords="24,261,90,327" href="?flet=11" alt="" name="11" onclick="moveHere(this)" />
<area shape="rect" coords="89,261,155,327" href="?flet=12" alt="" name="12" onclick="moveHere(this)" />
<area shape="rect" coords="154,261,220,327" href="?flet=13" alt="" name="13" onclick="moveHere(this)" />
<area shape="rect" coords="219,261,285,327" href="?flet=14" alt="" name="14" onclick="moveHere(this)" />
<area shape="rect" coords="284,261,350,327" href="?flet=15" alt="" name="15" onclick="moveHere(this)" />
<area shape="rect" coords="70,127,139,196" href="?flet=16" alt="" name="16" onclick="moveHere(this)" />
<area shape="rect" coords="349,261,415,327" href="?flet=17" alt="" name="17" onclick="moveHere(this)" />
<area shape="rect" coords="414,261,480,327" href="?flet=18" alt="" name="18" onclick="moveHere(this)" />
<area shape="rect" coords="23,326,87,390" href="?flet=19" alt="" name="19" onclick="moveHere(this)" />
<area shape="rect" coords="275,326,339,390" href="?flet=20" alt="" name="20" onclick="moveHere(this)" />
<area shape="rect" coords="338,326,402,390" href="?flet=21" alt="" name="21" onclick="moveHere(this)" />
<area shape="rect" coords="401,326,465,390" href="?flet=22" alt="" name="22" onclick="moveHere(this)" />
<area shape="rect" coords="86,326,150,390" href="?flet=23" alt="" name="23" onclick="moveHere(this)" />
<area shape="rect" coords="149,326,213,390" href="?flet=24" alt="" name="24" onclick="moveHere(this)" />
<area shape="rect" coords="212,326,276,390" href="?flet=25" alt="" name="25" onclick="moveHere(this)" />
<area shape="rect" coords="3,389,67,453" href="?flet=26" alt="" name="26" onclick="moveHere(this)" />
<area shape="rect" coords="66,389,130,453" href="?flet=27" alt="" name="27" onclick="moveHere(this)" />
<area shape="rect" coords="129,389,193,453" href="?flet=28" alt="" name="28" onclick="moveHere(this)" />
<area shape="rect" coords="192,389,256,453" href="?flet=29" alt="" name="29" onclick="moveHere(this)" />
<area shape="rect" coords="255,389,319,453" href="?flet=30" alt="" name="30" onclick="moveHere(this)" />
<area shape="rect" coords="318,389,382,453" href="?flet=31" alt="" name="31" onclick="moveHere(this)" />
<area shape="rect" coords="381,389,445,453" href="?flet=32" alt="" name="32" onclick="moveHere(this)" />
<area shape="rect" coords="444,389,508,453" href="?flet=33" alt="" name="33" onclick="moveHere(this)" />
</map>

<div id="minDiv" style="position:absolute;width:64px;height:64px;background:#000000;"> </div>
</div>

</body>

</html>

Synes godt om

roenving Novice

28. februar 2007 - 08:59 #8

Det er fordi siden reloader, da der jo er en href ...

Synes godt om

flol Nybegynder

28. februar 2007 - 09:51 #9

hmm oki, det vil sige, jeg ikke kan ha en href med?

Synes godt om

roenving Novice

28. februar 2007 - 09:59 #10

-- du kan selvfølgelig lave en ;return false; efter kaldet til funktionen, men det fjerne vel den funktionalitet, du ellers har brug for ?-)

-- hrm, jeg har engang set et script, der onload lavede en menu-fold-dig-dog-ud ud fra urlen, så det kan man vel også lave her ...

Synes godt om

flol Nybegynder

28. februar 2007 - 11:05 #11

hmm ville dog meget gerne, ha et link får, hver sted div'en kommer til at stå, da jeg skal gem det sted i en database ;D
hehe prøver at bygge en lille 3dchat

Synes godt om

flol Nybegynder

28. februar 2007 - 14:35 #12

kunne man fostille sig, man måske kunne gøre noget i den her stil:

<script type="text/javascript">
function gemtext(text) {

og så submitte teksten og det sted man står, til en anden side, hvor så man gemmer i database med PHP?

}
</script>

<input type="text" name="besked" onKeyUp="this.form.div.value=this.value" maxlength="48" /> <input type="button" name="submit" value="send" onClick="gemtext(this.form.besked.value)">

Synes godt om

flol Nybegynder

01. marts 2007 - 11:25 #13

okay har fundet i løsning på at får gemt mine oplysninger ..!

men er super glad for du hjalp med rykke functionen :)

mange tak for hjælpen, kast et svar ;D

Synes godt om

roenving Novice

02. marts 2007 - 10:39 #14

Velbekomme '-)

Synes godt om

roenving Novice

02. marts 2007 - 12:06 #15

-- og tak for point ;~}

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS