Toon posts:

[js] Lengte en breedte van afbeelding achterhalen...

Pagina: 1
Acties:

maandag 12 december 2005 19:42

Acties:

Verwijderd

Topicstarter
Ik heb in JS een functie die een stukje HTML genereert. Nu wil ik dat deze verschillende HTML maakt voor plaatjes in landscape en plaatjes in portrait vorm.

Nu ben ik al een poosje aan het klunzen, maar het lukt me nog niet.
Onderstaande code werkt wel in de zin dat ie alle foto's weergeeft, maar het vreemde is dat zowel landscape als portrait foto's beiden uitgelijnd worden op 70px van links. Blijkbaar zit er in de if wat scheef, maar ik kom er niet achter wat...

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function returnimgcode(theimg){
var imghtml=""
var imgvar=theimg[0];
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
if (imgvar.width < imgvar.height) {
    imghtml+='<DIV style="position: relative; top: 0px; left: 10px;">[img]"'+theimg[0]+'"[/img]</DIV>'
}
else {
    imghtml+='<DIV style="position: relative; top: 0px; left: 70px;">[img]"'+theimg[0]+'"[/img]</DIV>'
}
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}



theimg bestaat overigens uit een afbeelding en een link, maar dat had de JS-expert vast al wel door...

maandag 12 december 2005 19:57

Acties:
  • Jurgle
  • Registratie: Februari 2003
  • Laatst online: 25-03 00:07

Jurgle

100% Compatible

Kun je niet een image laden in een <img> tag waarvan in de style, display op none staat. Dan van die tag de width en heigth opvragen, daar vervolgens dingen mee doen en dan de display op inline zetten?

My opinions may have changed but not the fact that I am right ― Ashleigh Brilliant

maandag 12 december 2005 20:08

Acties:
  • Acid_Burn
  • Registratie: Augustus 2001
  • Laatst online: 20-04 16:42

Acid_Burn

uhuh

Is de image uberhaubt geladen? Ander kan je natuurlijk niet de afmetingen bepalen.

Dit is de code die ik vroeger gebruikte voor een popupje die automatisch resizede. Welke plaatje getoond moet worden kan je meegeven aan dit bijvoorbeeld toonplaatje.html te noemen en de url van het plaatje als parameter, bijvoorbeeld:

server.com/toonplaatje.html?htt://urlnaarplaatje.

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
 <TITLE>Click image to close window.</TITLE>
 <script language="javascript">
   var arrTemp=self.location.href.split("?");

   var picUrl = (arrTemp.length>0)?arrTemp[1]:"";
   var NS = (navigator.appName=="Netscape")?true:false;


   var myPhoto = new Image();

     function LoadPic() {
        myPhoto.src = picUrl;     // load the desired picture
        myPhoto.onload = MakeItFit;  // replaces and resizes the please wait picture with photo when loading is complete.
     };


     function MakeItFit() {
       iWidth = (NS)?window.innerWidth:document.body.clientWidth;     // window width
       iHeight = (NS)?window.innerHeight:document.body.clientHeight;  // window height

       iWidth = myPhoto.width - iWidth;                               // needed internal width
       iHeight = myPhoto.height - iHeight;                            // needed internal height

       window.resizeBy(iWidth, iHeight);                              // resize window to fit picture

       document.images["photo"].src = myPhoto.src;                    // replace the please wait pic with the photo

       self.focus();                                                  //make sure the window has the focus
     };

 </script>
</HEAD>
<link href="../style.css" rel="stylesheet" type="text/css">
<meta http-equiv="imagetoolbar" content="no" />
<BODY bgcolor="#000000" topmargin="0" marginheight="0" leftmargin="0" marginwidth="0" onload="LoadPic()" onblur="top.close()">
 <script language='javascript'>
  document.write( "<a href='javascript:window.close();'>[img]'../images/moment.gif'[/img]</a>" );
 </script>
</BODY>

</HTML>

Glass Eye Photography | Zelfbouw wireless fightstick | Mijn puzzel site

Reageer