html - JS Find billedes højde og bredde - Udvikleren.dk

Tags: html css

Bruger #4468 @ 18.11.04 17:55

Hvis nu jeg har følgende kode:

Kode

<SCRIPT TYPE="text/javascript">
var _POPUP_FEATURES = 'location=0,statusbar=0,menubar=0,width=400,height=600';

function raw_popup(url, target, features) {
  if (features == undefined) {
    features = _POPUP_FEATURES;
  }
  if (target  == undefined) {
    target = '_blank';
  }
  var theWindow = window.open(url, target, features);
  theWindow.focus();
  return theWindow;
}

function link_popup(src, features) {
  return raw_popup(src.getAttribute('href'), src.getAttribute('target') || '_blank',  features);
}

</SCRIPT>

så vil jeg gerne have width og height automatisk finder det billedes(som bliver åbnet) højde og bredde.
Ville gerne have at den automatisk fandt højden og bredden via funktionen så jeg ikke behøver skrive andet ved mine links end dette:
onclick="link_popup(this); return false;"
Mvh.
Rune Jensen
---------------------------------------------------------------------------
##The one who laugh last is the one who think slowest!##
---------------------------------------------------------------------------

6 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #5789 @ 18.11.04 21:50

640

Kode

<HTML>
	<HEAD>
		<TITLE>The Image Gallery</TITLE>
		<script language="Javascript"> 
			function PopupPic(sPicURL) { 
				window.open("popup.htm?"+sPicURL, "", "resizable=1,HEIGHT=200,WIDTH=200");
			}
		</script>
	</HEAD>
	<BODY bgcolor="#FFFFFF">
		<a href="javascript:PopupPic('Image1.gif')">Image 1</a><br>
		<a href="javascript:PopupPic('Image2.gif')">Image 2</a><br>
		<a href="javascript:PopupPic('Image3.gif')">Image 3</a><br>
	</BODY>
</HTML>

Det er lidt nemmere...

Med venlig hilsen
/Jokke Jensen
www.jj-multimediedesign.dk

Bruger #2654 @ 20.11.04 17:32

102

Hej

hvis du bruger den her kode, skulle det løse nogen problemer:

Kode

<SCRIPT TYPE="text/javascript">
function givMigPropertioner(sti){

	img = new Image();
	img.src = sti;
	if(img.complete){
		var h = ''+img.height;
		var w = ''+img.width;
			return ',width='+w+',height='+h+'';
	} else{
			return '';
	}

}

var _IMG_POPUP_FEATURES = 'location=0,statusbar=0,menubar=0';

function raw_img_popup(url, target, features) {
  if (features == undefined) {
    features = _IMG_POPUP_FEATURES + givMigPropertioner(url);
  }
  if (target  == undefined) {
    target = '_blank';
  }
  var theWindow = window.open('', target, features);
	theWindow.document.writeln('<html>');
	theWindow.document.writeln('<head></head>');
	theWindow.document.writeln('<body>');
	theWindow.document.writeln('<img src="'+url+'" style="position:absolute;left:0px;top:0px;">');
	theWindow.document.writeln('</body>');
	theWindow.document.writeln('</html>');
  theWindow.focus();
  return theWindow;
}

function img_popup(src, features) {
  return raw_img_popup(src.getAttribute('href'), src.getAttribute('target') || '_blank',  features);
}

function loadImgLink(){

	for(j=0;j<document.links.length;j++){
		var sti = document.links[j].href;
		var prefix = sti.substr(sti.length-4);
		if(prefix == '.jpg' || prefix == '.png' || prefix == '.gif'){
			imgLoader = new Image();
			imgLoader.src = sti;
		}
	}

}

</SCRIPT>

og så skal linksne hede noget ala:

Kode

<BODY onload="loadImgLink()">

<a href="dfus.gif" target="_blank" onclick="img_popup(this); return false;">klik</a>

</BODY>

Det scriptet gør, er at når hele siden er hentede, <body onload="..."> finder det alle de links der henviser til filer, der slutter på .jpg, .png eller .gif. Det loader så billerene. Herefter virker det lidt som systemet før. problemet er, at det loader alle billeder, og altså evt. bruger tid på at hente unødig information. På den anden side, er der ingen garanti for at billederne er hentede, når bruger klikker på linkede, men chance er størrer. Det er den bedste løsning, jeg sådan lige kan komme på

adam
Køb en zebra - og kald den plet

[Redigeret d. 20/11-04 17:34:09 af adam]

Bruger #4468 @ 18.11.04 21:58

221

Kode

<HTML>
	<HEAD>
		<TITLE>The Image Gallery</TITLE>
		<script language="Javascript"> 
			function PopupPic(sPicURL) { 
				window.open("popup.htm?"+sPicURL, "", "resizable=1,HEIGHT=200,WIDTH=200");
			}
		</script>
	</HEAD>
	<BODY bgcolor="#FFFFFF">
		<a href="javascript:PopupPic('Image1.gif')">Image 1</a>
		<a href="javascript:PopupPic('Image2.gif')">Image 2</a>
		<a href="javascript:PopupPic('Image3.gif')">Image 3</a>
	</BODY>
</HTML>

Det er lidt nemmere...

Med venlig hilsen
/Jokke Jensen
www.jj-multimediedesign.dk

Virker ikke.. Så kan du ikke vise mig hvordan jeg gør det andet? med at finde højde og bredde?
Mvh.
Rune Jensen
---------------------------------------------------------------------------
##The one who laugh last is the one who think slowest!##
---------------------------------------------------------------------------

Bruger #5789 @ 18.11.04 22:15

640

Kode

function showPic( imgName, imgCaption, imgWidth, imgHeight, textColor, bgColor ) {
	if(imgWidth<=100)imgWidth=100
	if(imgHeight<=100)imgHeight=100
	winHeight=imgHeight+20;
	w = window.open('','Demo','toolbar=no,location=no,directories=no,status=no,scrollbars=no,resizable=yes,copyhistory=no,width='+imgWidth+',height='+winHeight);
	w.document.write( "<html><head><title>"+imgCaption+"</title>" );
	w.document.write( "<STYLE TYPE='text/css'>" );
	w.document.write( "A {font-family: verdana; font-size: 10px; color: "+textColor+"; text-decoration : none;}" );
	w.document.write( "A:Visited {font-family: verdana;font-size: 10px; color: "+textColor+"; }" );
	w.document.write( "A:Active { font-family: verdana; font-size: 10px; color: "+textColor+"; }" );
	w.document.write( "A:Hover { font-family: verdana; font-size: 10px; color: "+textColor+"; }" );
	w.document.write( "IMG {border-color : "+textColor+";}" );
	w.document.write( "BODY { font-family: verdana; font-size : 10px; font-weight: normal; color : "+textColor+"; background-color : "+bgColor+"; }" );
	w.document.write( "</STYLE>" );
	w.document.write( "<script language='JavaScript'>\\n");
	w.document.write( "IE5=NN4=NN6=false\\n");
	w.document.write( "if(document.all)IE5=true;\\n");
	w.document.write( "else if(document.getElementById)NN6=true\\n");
	w.document.write( "else if(document.layers)NN4=true\\n");
	w.document.write( "function autoSize() {\\n");
	w.document.write( "	if(IE5) self.resizeTo(document.images[0].width+10,document.images[0].height+31+20)\\n");
	w.document.write( "	else if(NN6) self.sizeToContent()\\n");
	w.document.write( "	else top.window.resizeTo(document.images[0].width,document.images[0].height+20)\\n");
	w.document.write( "	self.focus()\\n");
	w.document.write( "}\\n</scr");
	w.document.write( "ipt>\\n");
	w.document.write( "</head><body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 onLoad=" );
	w.document.write( "'javascript:autoSize();'>" );
	w.document.write( "<table cellpadding=0 cellspacing=0 border=0><tr><td colspan=3><img src='"+imgName+"' border=0 alt='"+imgCaption+"'></td></tr>" );
	w.document.write( "<tr><td align='left'>  <a>© Bugimus.com</a></td>" );
	w.document.write( "<td align='center'><a>(ctrl-p to print)</a></td>" );
	w.document.write( "<td align='right'><a href='javascript:top.window.close();'>close window</a>  </td></tr>" );
	w.document.write( "</table></body></html>" );
	w.document.close();
}
</script>

kald dem så med :

<a href="javascript:showPic('testimg.jpg','First image, landscape',0,0,'#000000','#999999')"><img src="testimg_thn.jpg" width="100" height="100" border="1" alt="" hspace="20" vspace="20"></a>

Den her er mere crossbrowser...

Med venlig hilsen
/Jokke Jensen
www.jj-multimediedesign.dk

Bruger #2654 @ 19.11.04 16:51

102

Hej,
jeg har ændret lidt, der er kommet en ny metode, der finder størelsen af billedet.

Kode

<SCRIPT TYPE="text/javascript">
function givMigPropertioner(sti){

	img = new Image();
	img.src = sti;
	if(img.complete){
		var h = ''+img.height;
		var w = ''+img.width;
		return ',width='+w+',height='+h+'';
	} else{
		return '';
	}

}

var _POPUP_FEATURES = 'location=0,statusbar=0,menubar=0';

function raw_popup(url, target, features) {
  if (features == undefined) {
    features = _POPUP_FEATURES + givMigPropertioner(url);
  }
  if (target  == undefined) {
    target = '_blank';
  }
  var theWindow = window.open(url, target, features);
  theWindow.focus();
  return theWindow;
}

function link_popup(src, features) {
  return raw_popup(src.getAttribute('href'), src.getAttribute('target') || '_blank',  features);
}

</SCRIPT>

metoden har dog et stort problem, den når ikke at loade store billeder, eller bare små på langsomme forbindelser. Jeg har ikke fundet en god metode, der venter med at finde størelser af billede til det er loadede. Som den er nu, bliver popup vinduets størelse, bare det brugeren havde sidst, hvis ikke billedets propertioner findes

adam
Køb en zebra - og kald den plet

[Redigeret d. 20/11-04 12:40:01 af adam]

Bruger #4468 @ 21.11.04 22:58

221

Hej

hvis du bruger den her kode, skulle det løse nogen problemer:

Kode
<SCRIPT TYPE="text/javascript">
function givMigPropertioner(sti){

	img = new Image();
	img.src = sti;
	if(img.complete){
		var h = ''+img.height;
		var w = ''+img.width;
			return ',width='+w+',height='+h+'';
	} else{
			return '';
	}

}

var _IMG_POPUP_FEATURES = 'location=0,statusbar=0,menubar=0';

function raw_img_popup(url, target, features) {
  if (features == undefined) {
    features = _IMG_POPUP_FEATURES + givMigPropertioner(url);
  }
  if (target  == undefined) {
    target = '_blank';
  }
  var theWindow = window.open('', target, features);
	theWindow.document.writeln('<html>');
	theWindow.document.writeln('<head></head>');
	theWindow.document.writeln('<body>');
	theWindow.document.writeln('<img src="'+url+'" style="position:absolute;left:0px;top:0px;">');
	theWindow.document.writeln('</body>');
	theWindow.document.writeln('</html>');
  theWindow.focus();
  return theWindow;
}

function img_popup(src, features) {
  return raw_img_popup(src.getAttribute('href'), src.getAttribute('target') || '_blank',  features);
}

function loadImgLink(){

	for(j=0;j<document.links.length;j++){
		var sti = document.links[j].href;
		var prefix = sti.substr(sti.length-4);
		if(prefix == '.jpg' || prefix == '.png' || prefix == '.gif'){
			imgLoader = new Image();
			imgLoader.src = sti;
		}
	}

}

</SCRIPT>
og så skal linksne hede noget ala:

Kode
<BODY onload="loadImgLink()">

<a href="dfus.gif" target="_blank" onclick="img_popup(this); return false;">klik</a>

</BODY>
Det scriptet gør, er at når hele siden er hentede, <body onload="..."> finder det alle de links der henviser til filer, der slutter på .jpg, .png eller .gif. Det loader så billerene. Herefter virker det lidt som systemet før. problemet er, at det loader alle billeder, og altså evt. bruger tid på at hente unødig information. På den anden side, er der ingen garanti for at billederne er hentede, når bruger klikker på linkede, men chance er størrer. Det er den bedste løsning, jeg sådan lige kan komme på

adam
Køb en zebra - og kald den plet

[Redigeret d. 20/11-04 17:34:09 af adam]

Det virker perfekt

Mange Tak for hjælpen

Mvh.
Rune Jensen
---------------------------------------------------------------------------
##The one who laugh last is the one who think slowest!##
---------------------------------------------------------------------------

JS Find billedes højde og bredde

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler