Zoom funktion på kort

<p><img src="kort1.jpg" id="kort"></p>

<a href="#" onclick="document.getElementById('kort').src = 'kort2.jpg'">Kort2</a><br>

<a href="#" onclick="document.getElementById('kort').src = 'kort3.jpg'">Kort3</a>

evt??

Det kan godt være, at det er den kode jeg skal bruge, men kunne du ikke skrive hvordan jeg skal få den implementeret i min html -kode.. - og desuden zoom knappen består her kun af to links - kunne man ikke lave det mere "prof"?  -

Joh, selvfølgelig kan man det. Men hvordan det skal se ud, kommer jo langt mere an på det generelle design af siden, end noget andet.

Du kunne lægge billede-knapper ind i linksene i stedet for bare tekst, eller du kunne lave dem om til <INPUT TYPE="button"> i stedet. Eller gøre som på Kraks.dk og lave det til radioknapper.

Mht. implementering kan du bare smide de tre linjer ind i dit HTML-doc, og så længe de tre billeder (kort1, 2 og 3.jpg) eksisterer, burde det virke.

Hvis du vil have forslag til design etc, må du nok vise hvordan resten af din side ser ud, og forklare lidt mere :)

Fandt denne kode er den den samme som din - hvad gør cur m.m. som står i denne
...
<script>
curImage=0;
function zoom_image(dir) {
  curImage+=dir;
  if (curImage<0) {
    curImage=0;
  }
  if (curImage>5) {
    curImage=5;
  }
  document.getElementById("theImage").src="billede"+curImage+".gif";

}
</script>
<img src="map.gif">
<a href="#" onclick="zoom_image(1); return false">+</a>
<a href="#" onclick="zoom_image(-1); return false">-</a>
</body>

Hvor skrives det der input button i s´å fald?
Der skal så være tre links, man skal jo kunne komme tilbage til det første kort let!

Ja, den kode gør stort set det samme som min. Den er bare opbygget som en funktion, og så regner den i trin, så i stedet for at der er en knap for hvert trin, er der en knap for "+1" og "-1". Det er lidt nemmere hvis der er mange zoom-niveauer, men hvis der kun er 3, er det lidt lige meget, ikke?

Hvis du vil have det i inputs, ser det noget i den stil ud:


<form>
<input type="button" onclick="document.getElementById('kort').src = 'kort1.jpg'" value="Zoom 1" />
<input type="button" onclick="document.getElementById('kort').src = 'kort2.jpg'" value="Zoom 2" />
<input type="button" onclick="document.getElementById('kort').src = 'kort3.jpg'" value="Zoom 3" />
</form>

<img src="kort1.jpg" id="kort" />

Nu har jeg 7 kort opbygget i din første kode!!! Skal jeg så ændre til den anden kode - det fungerer nu ellers ok med din kode - hvad vil forskellen være?

Ingen forskel i hastighed eller nemhed for brugeren.
Den eneste forskel er at det måske er nemmere for programmøren at overskue.

Hvis du synes det er nemmere bare at lave nye knapper, så bare bliv ved som du gør. Det sker der skam ikke noget ved.

Du kan se mit resultat på brh-advokater.dk/HV.htm, hvad synes du? :=)
Hvis du har ændringsforslag så sig endelig til!

Det ser sgu ganske professionelt ud :)

Hvis jeg skulle komme med et forslag, måtte det være at precache billederne, så de loader hurtigere, når du klikker på zoom-kortet. Det gør du allerede med nogle af billederne på siden, men i tilfælde af at koden er noget du bare har sat ind, gør du det bare ved at skrive følgende i dit script (efter "<script type="text/javascript">") :

var mapImages = new Array(7);
mapImages[0] = new Image(289, 221);
mapImages[0].src = "map.gif";
mapImages[1] = new Image(289, 221);
mapImages[1].src = "map2.gif";
mapImages[2] = new Image(289, 221);
mapImages[2].src = "map3.gif";
mapImages[3] = new Image(289, 221);
mapImages[3].src = "map4.gif";
mapImages[4] = new Image(289, 221);
mapImages[4].src = "map5.gif";
mapImages[5] = new Image(289, 221);
mapImages[5].src = "map6.gif";
mapImages[6] = new Image(289, 221);
mapImages[6].src = "map7.gif";

Er det rigtigt sat ind i html-koden nu?
Kunne noget gøres bedre?
Her er dine velfortjente point!

Du behøver ikke afslutte det ene script der er i forvejen, og begynde et nyt - du kan bare lægge det hele i det første - men det gør ingen forskel, så bare lad det være.

Ellers ser det rigtigt nok ud - held og lykke med siden, og tak :)