login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[solved] images resizen

Offline zamna - 05/08/2006 13:54 (laatste wijziging 17/12/2006 17:26)
Avatar van zamnaHTML beginner Wat ik wil
aangezien mijn sitebreedte meeverandert met het browser en dus niet vast is, moeten de afbeeldingen mee veranderen.

Het probleem
Het aanpassen van de afbeeldingen aan de browsergrootte lukt maar niet wanneer men het venster na het laden van de pagina verkleint omdat de vensterbreedte enkel bij de pageload wordt opgevraagd.

De code

Hier vraag ik de breedte van het huidige venster op, de code is crossbrowser. Staat boven in de body.
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="javascript">
  2. var resize_w = 400;
  3.  
  4. if (parseInt(navigator.appVersion)>3) {
  5.  	if (navigator.appName=="Netscape") {
  6. 		resize_w = window.innerWidth-416;
  7. 	}
  8. 	if (navigator.appName.indexOf("Microsoft")!=-1) {
  9. 		resize_w = document.body.offsetWidth-420;
  10. 	}
  11. }
  12. </script>


Hier wijzig ik de breedte van de images, staat onderaan in de body.
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="javascript">
  2.  
  3. function check_images() {
  4.  
  5. for(i=0;i<document.images.length;i++) {
  6. 	if(document.images[i].width > resize_w)
  7. 		document.images[i].width = resize_w;
  8. 	}
  9. }
  10.  
  11. setInterval(check_images,2000);
  12.  
  13. </script>
  14. <script language="javascript">
  15. 	check_images();
  16. </script>

2 antwoorden

Gesponsorde links
Offline Ontani - 05/08/2006 13:56
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 probeer eens met:
<body onresize="check_images();">
Offline zamna - 05/08/2006 14:50 (laatste wijziging 17/12/2006 17:26)
Avatar van zamna HTML beginner Werkt met deze code:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. function getWindowWidth(){
  2.   var ww = 0;
  3.   d = document;
  4.    if ( typeof window.innerWidth != 'undefined' )
  5.      ww = window.innerWidth;  // NN and Opera version
  6.    else
  7.    {
  8.      if ( d.documentElement
  9.        && typeof d.documentElement.clientWidth!='undefined'
  10.        && d.documentElement.clientWidth != 0 )
  11.        ww = d.documentElement.clientWidth;
  12.      else
  13.        if ( d.body
  14.          && typeof d.body.clientWidth != 'undefined' )
  15.          ww = d.body.clientWidth;
  16.      else alert ("Can't identify window width - please tell me which browser you are using.")
  17.    }
  18.    return ww;
  19. }
  20.  
  21. function resizeimg() {
  22.   	var resize_w = getWindowWidth();
  23. 	if (forum == "ja") {
  24. 		resize_w -= 540;
  25. 	} else {
  26. 		resize_w -= 420;
  27. 	}	
  28. 	for(i=0;i<document.images.length;i++) {
  29. 		if(document.images[i].width > resize_w) {
  30. 			document.images[i].width = resize_w;
  31. 		}
  32. 	}
  33. }
  34.  
  35. setInterval(resizeimg,2000);
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.192s