Avatar billede jrostved Nybegynder
03. juni 2005 - 09:04 Der er 10 kommentarer og
1 løsning

zoom på billed

Hej jeg har et billed der bliver zoomet på http://rostved.com/zooom10.htm
Jeg ville gerne vide om man kan få billedet til kun at zoome ind eller ud når man holder knappen nede?
Og en ting mere.. Kan jeg måske på en eller anden måde gøre så jeg altid har de 3 zoom knapper i en bjælke over billedet selvom jeg scrooler til en af siderne??
På forhånd mange tak!!!
Mvh Jakob Rostved
Avatar billede per1291 Nybegynder
08. juni 2005 - 16:27 #1
Hej - såvidt jeg kan se har du selv løst det første problem. I modsat fald forstår jeg ikke spørgsmålet.

Mht. at lade knapperne stå fast uanset scroll, så har jeg et forslag herunder. Min kode tager kun højde for lodret scroll, men du kan selv udvide så der også tages højde for vandret scroll.
For det første: Læg dine knapper ind i en "div" således:

<div id="Knapper">
<a href="#" onmousedown="java script:resume_zoom();zoom_in()" onmouseup="java script:pause_zoom();">zoom ind</a>
<a href="#" onmousedown="java script:resume_zoom();set_original();">original</a>
<a href="#" onmousedown="java script:resume_zoom();zoom_out();" onmouseup="java script:pause_zoom();">Zoom ud</a>
</div>

For det andet: Tilføj et script med nogle "flytte-rutiner":

<script language="Javascript">
<!--
function MoveKnapper()
{
var ypos=FindScroll()
knap.style.top = ypos+"px"
}
function GetElement(id)
{
  if (document.all) {return window.document.all[id]}
  else {return window.document.getElementById(id)}
}
function FindScroll()
{
if (window.pageYOffset) {return window.pageYOffset}
if (document.documentElement.scrollTop) {return document.documentElement.scrollTop}
if (document.body.scrollTop) {return document.body.scrollTop}
return 0
}
function InitKnapper()
{
knap=GetElement("Knapper")
myInterval=window.setInterval("MoveKnapper()",40) // 40 milliseconds mellem opdateringer
}
var myInterval,Knapperscrolled,knap
//-->
</script>

For det tredje: Lav et funktionskald i din "body":

<body onload="InitKnapper()">

Hilsen  Per
Avatar billede roenving Novice
08. juni 2005 - 16:31 #2
-- og så skal du huske at fjerne de der ugyldige og overflødige java script:-pseudo-protokoller !-)
Avatar billede per1291 Nybegynder
08. juni 2005 - 16:42 #3
Hov - du kan godt slette variablen "Knapperscrolled", da den ikke bruges her.

Forresten er det muligt, at visse af mine if-sætninger er overflødige, pga. udviklingen i moderne browsere. Men det skader ikke at lade dem stå.

Hilsen  Per
Avatar billede jrostved Nybegynder
10. juni 2005 - 00:17 #4
Hvis hele mit zoom dokument skal se sådanher ud virker det ikke som ønsket!!

<html><head>
<div id="Knapper">
<a href="#" onmousedown="java script:resume_zoom();zoom_in()" onmouseup="java script:pause_zoom();">zoom ind</a>
<a href="#" onmousedown="java script:resume_zoom();set_original();">original</a>
<a href="#" onmousedown="java script:resume_zoom();zoom_out();" onmouseup="java script:pause_zoom();">Zoom ud</a>
</div>

<script language="javascript">
var img_path="billed.bmp";
var top_pos=54;
var left_pos=22;
var max_width=1400;
var min_width=244;
var time_length=1;
var step=10;


document.write('<div id="q_div" style="position:absolute; top:' + top_pos + '; left:' + left_pos + '"><img src="' + img_path + '" border="3" bordercolor="#000000" name="z"></div>');

img_act_width=z.width;
img_act_height=z.height;
var original_time=time_length;

function zoom_out()
{
if(z.width==0)
  {
  z.border=0;
  }
if(z.width!=0)
  {
  if(z.width>min_width)
  {
    z.width-=step;
    z.height=Math.round(z.width*((img_act_height)/(img_act_width)));
    setTimeout("zoom_out()",time_length);
  }

  } 
}

function zoom_in()
{
if(z.width==0)
  {
  z.border=0;
  }
if(z.width!=0)
  {
  if(z.width<max_width)
  {
    z.width+=step;
    z.height=Math.round(z.width*((img_act_height)/(img_act_width)));
    setTimeout("zoom_in()",time_length);
  }

  } 
}

function resume_zoom()
{
time_length=original_time;
}

function pause_zoom()
{
time_length=10000000000;
}

function set_original()
{
z.width=img_act_width;
z.height=img_act_height;
}

</script>
<script language="Javascript">
<!--
function MoveKnapper()
{
var ypos=FindScroll()
knap.style.top = ypos+"px"
}
function GetElement(id)
{
  if (document.all) {return window.document.all[id]}
  else {return window.document.getElementById(id)}
}
function FindScroll()
{
if (window.pageYOffset) {return window.pageYOffset}
if (document.documentElement.scrollTop) {return document.documentElement.scrollTop}
if (document.body.scrollTop) {return document.body.scrollTop}
return 0
}
function InitKnapper()
{
knap=GetElement("Knapper")
myInterval=window.setInterval("MoveKnapper()",40) // 40 milliseconds mellem opdateringer
}
var myInterval,Knapperscrolled,knap
//-->
</script>
</head>
<body onload="InitKnapper()">
</body></html>

Mvh Jakob Rostved
Avatar billede roenving Novice
10. juni 2005 - 00:36 #5
Jeg ved ikke hvad der går galt, men det er fuldstændig misforstået at sætte almindelige html-elementer ind i head-sektionen, og så lade body-sektionen tom (udover den der med java script:, som også er direkte ugyldig !-)

-- og der er da godt nok mange ting at rette, det orker jeg ikke, for jeg tror det er nemmere at starte forfra, og da det ikke bare tager hverken 3, 30 eller 300 minutter, har jeg opgivet !-)
Avatar billede per1291 Nybegynder
10. juni 2005 - 02:01 #6
Hej igen - jeg kan se nogle misforståelser i din kode.

Det som roenving snakker om, er at det er god skik at erstatte f.eks. vendingen
java script:resume_zoom();
med vendingen
resume_zoom();
(fordi referencen "java script:" er underforstået).

Det var nok min fejl, at jeg skrev "for det første", "for det andet" osv.
Det handler ikke om rækkefølgen i dokumentet, men kun om nogle punkter i tankerækken.

Afsnittet med den nye Knapper-div skal blive stående i body-delen.

Desuden kunne du erklære selve billed-div'en i HTML-koden, altså undlade den del af dit javascript som hedder
document.write('div id="q_div" ... osv.

Altså, mit forslag er at du skriver således:

<body onload="InitKnapper()">

<div id="Knapper">
<a href="#" onmousedown="resume_zoom();zoom_in()" onmouseup="pause_zoom();">zoom ind</a>
<a href="#" onmousedown="resume_zoom();set_original();">original</a>
<a href="#" onmousedown="resume_zoom();zoom_out();" onmouseup="pause_zoom();">Zoom ud</a>
</div>

<div id="q_div" style="position:absolute; top:54px; left:22px">
<img src="billed.bmp" border="3" bordercolor="#000000" name="z">
</div>

</body></html>

Hilsen  Per
Avatar billede roenving Novice
10. juni 2005 - 02:17 #7
java script: er ikke underforstået, den er fejlplaceret og ugyldig script-kode ...

-- og der er en væsentlig ting i, at jeg fik fejl, fordi der var skrevet name="z" ikke id="z", som ville få det til at virke i IE4+, men jeg gider ikke kere mig om at skrive ie-only-ting, hvis ikke jeg får penge for det ...
Avatar billede per1291 Nybegynder
10. juni 2005 - 12:15 #8
roenving skriver:
> fejlplaceret og ugyldig script-kode ...

Jaja, men der er stadig masser af anvisninger på Nettet hvor den bruges, så fejltagelsen er forståelig.

jrostved: Lad os nu i første omgang få det til at virke i din egen browser. Siden kan vi rette skønhedsfejl og funktionsfejl, sådan at det virker i andre browsere også.

Jeg tror du i første omgang skal glemme mit forslag om at flytte din billed-div ned i HTML-delen. Det vil nemlig kræve nogle flere små-rettelser.

Hilsen  Per
Avatar billede roenving Novice
21. juli 2005 - 20:35 #9
Måske skulle vi genopfriske, da sidate reaktion stammer fra den mail-løse periode !-)
Avatar billede jrostved Nybegynder
15. januar 2008 - 08:24 #10
SVAR!
Avatar billede roenving Novice
17. januar 2008 - 00:51 #11
Fik du det løst ?-)
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