Afbeeldingen niet goed weergegeven in IE

Status
Niet open voor verdere reacties.
H

hawky

Gebruiker
Lid geworden
9 aug 2008
Berichten
114
Ik probeer een afbeelding uit een div te laten "hangen" met deze code:

Code: 
<div style="position:absolute; left:-100px; top:-100px;">
<a id="win" href="HTML/WinTickets.htm">
<img alt="" src="Afbeeldingen/winbutton.png" width="200" height="200" style="border-width: 0px;"/></a></div>

op http://www.beachpartybocholt.be/2010. Hij geeft alles goed weer in Chrome, maar in IE niet =/ Heeft iemand hier een oplossing voor?

Groeten Brecht
 
hawky zei:
Ik probeer een afbeelding uit een div te laten "hangen" met deze code:

Code: 
<div style="position:absolute; left:-100px; top:-100px;">
<a id="win" href="HTML/WinTickets.htm">
<img alt="" src="Afbeeldingen/winbutton.png" width="200" height="200" style="border-width: 0px;"/></a></div>

op http://www.beachpartybocholt.be/2010. Hij geeft alles goed weer in Chrome, maar in IE niet =/ Heeft iemand hier een oplossing voor?

Groeten Brecht
Klik om te vergroten...

Probeer andere formaat.
jpeg ofzo
 
Een ander bestandsformaat zal het niet zijn, denk ik. Het ligt aan de manier van stapelen van laagjes door IE, waardoor het niet goed gaat.
Als je de <div> met de winbutton.png wegknipt uit html-regels 87/88/89, en dan na de footer weer inplakt, met aangepaste styles:
HTML: 
<div style="position:absolute; left:-45px; top:150px; opacity:.9;">
   <a id="win" href="HTML/WinTickets.htm">
   <img src="Afbeeldingen/winbutton.png" width="200" height="200" 
      style="border-width: 0px;" alt="" /></a></div>
</body>
</html>
wordt hij ook in IE7 als bovenste laag volledig getoond.
Alleen is de png nu zijn transparantie is kwijtgeraakt, omdat <= IE7 de css daarvoor niet kent. Dit kan ondervangen worden met een conditional comment in de <head>, na de aanroep van de css-stylesheets:
HTML: 
<!--[if lte IE 7]>
  <style type="text/css">
    #win img {
      filter: alpha(opacity=95);
    }
  </style>
<![endif]-->
Het wordt niet echt mooi in IE7 vind ik, en je kunt ook de alpha-transparantie voor IE7 gewoon vergeten zonder dat er iets ergs gebeurt.
IE8 zou de opacity-eigenschap moeten ondersteunen, maar dat kan ik nu even niet testen.

Succes!
Met vriendelijke groet,
CSShunter

PS:
Overigens is het bg-image waanzinnig groot (807 KB), terwijl de rest van de pagina nu ook niet bepaald lichtgewicht is. Downloaden van de pagina op een telefoon-modem zal veel tijd vragen, want zelfs met mijn snelle ADSL-verbinding gaat het opvallend langzaam. Ik heb in elk geval: hier bubbels.jpg, dezelfde achtergrond als 25% gecomprimeerde jpg; die is nu "maar" 145 KB: dwz 5,5 keer zo snel. ;)
 
Heel erg bedankt! Maar het gaat zo dus nooit goed komen in IE? :confused:

Wat is eigenlijk het probleem dat hij dit niet weergeeft? Want ik kan toch transparante png op mijn website plaatsen?

Groeten Brecht
 
Laatst bewerkt:
IE en png's hebben altijd op gespannen voet met elkaar gestaan: daar is IE altijd erg slecht in geweest, en het betert voetje voor voetje.
Wat hier meespeelt, is dat het oplichten van de png's door de fade-scripts worden bediend. Dat werkt niet meer als je de #winbox uit de #container haalt om de positie te kunnen regelen. Daarom had ik als alternatief de opacity-eigenschap ingevoerd; met de IE-filter-hack erbij, omdat opacity door IE (iig in IE7) ook niet goed ondersteund wordt.
Maar ik heb het fade-script nog eens bekeken, en ha!, dat script blijkt ook eenvoudig op de winbutton losgelaten te kunnen worden zonder dat de aanblik in IE al te erg wordt. Dan kan de hele opacity-operatie weer afgeschaft worden.
  • Hier is het test-voorbeeld (zie broncode voor aangepaste html en css).
De wijzigingen zijn in hoofdzaak:
  • De menu-bar aangepast omdat IE en de andere browsers daar een verschillende hoogte aan toekenden. Dan gaat het niet goed met het absoluut positioneren van de winbutton op het eind van de code.
  • De loze <li><a>|</a></li> 's uit het menu gehaald, en vervangen door ordentelijke rechterborders voor de echte <a>'s.
  • De #winbox gepositioneerd in verhouding tot de helft van de pagina (en dan naar links verschoven om goed uit te komen), dan gaat het goed bij alle resoluties. - Had ik in m'n vorige reactie even niet door. :eek:
  • De winbutton.png verkleind tot z'n werkelijke grootte winbutton140x140.png; dat scheelt een prettige 177-24= 153KB die niet meer gedownload hoeft te worden. :)
  • De achtergrond-bubbels wat bijgetekend aan de linker-& rechterranden, zodat er bij het doorschuiven geen doorgesneden cirkeltjes meer zijn; is nu de vernieuwde bubbels.jpg van 64KB (i.p.v. de eerdere 145KB, na de originele 807KB). :)
Je zou ook in de winbutton de schaduw kunnen weglaten: test 2 met winbutton140x140-nw.png.
Opf er meteen een transparante gif van maar 9KB van maken: test 3 met winbutton140x140-nw.gif.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Heel veel handige dingen die je mij nu allemaal hebt verteld! Ik ben ondertussen zelf ook nog bezig geweest, en ik heb ook ondervonden dat het aan het javascripje lag. Daarom had ik de fade optie weggelaten, maar toen kreeg ik weer problemen met mijn afgeronde hoeken:confused: Nu heb ik gewoon een afbeelding gemaakt van wat ik moet hebben, en deze op de achtergrond gezet. Nu heb ik ook geen problemen meer met de winbutton, en komt hij ook nog mooi over! Maar dat vind je zeker niet goed, omdat het alweer afbeeldingen zijn? of mag dit ook?

De rest ga ik nu toepassen!

Heel hartelijk bedankt,
Groeten Brecht
 
Hoi Brecht,
Van mij mag alles! (als het maar valid html en css is :D )
Hij komt er fraai uit te zien!
Op zoek naar mogelijkheden voor nog meer snelheidswinst (elk bitje is er één!), heb ik nog een proefje gedaan:
  • Alle scripts buiten werking gezet > levert zo'n 85KB die niet meer opgehaald hoeven te worden.
  • In plaats daarvan een super-eenvoudig scriptje van 20 regeltjes om de background-beweging te laten plaatsvinden.
  • Er een #wrapper tussen gezet, waardoor het bg-img opgesplitst kan worden in een klein bestandje voor het zich verticaal herhalend deel (png van 2KB), en een in hoogte beperkt transparant plaatje (png van 140KB) voor de golven. Samen nog geen 150KB i.p.v. de 920KB (!) van de huidige bg11.png.
  • De twee achtergrond-onderdelen kan je nu ook onafhankelijk van elkaar laten bewegen. De één naar links, de ander naar rechts; of alle twee dezelfde kant op, maar met verschillend tempo, enz.
  • Al met al bijna 1MB download-tijd verdonkeremaand! :)
  • Toen kon een onMouseOver-scriptje voor de winbutton er nog wel bij. ;)
  • Zie de uitkomst van de test.
(Misschien dat voor andere pagina's de fancybox e.a. scripts wel nodig zijn, maar voor deze pagina in elk geval niet.)

Met vriendelijke groet,
CSShunter

PS:
De golven kunnen ook nog subtiel op en neer bewegen tijdens hun reis van links naar rechts. Zie de broncode bij het laatste plaatje van 'De Partijspoort-theorie'.
 
Jij bent geweldig!:D

Maar je kan dus beter afbeeldingen gebruiken dan javascriptjes, of ben ik verkeerd?

Ja ik kan eigenlijk nog heel veel veranderen nu, maar ik vind dat hij er al best goed uitziet. Wat vind jij ervan? En weet je nog dingen die beter zouden kunnen?

Alleen voor de achtergrond zoek ik nog iets moois, misschien iets wat met een Beachparty te maken kan hebben :confused:.

Groeten Brecht
 
... beter afbeeldingen gebruiken dan javascriptjes, of ben ik verkeerd?
Klik om te vergroten...
Nou, ik vindt het zelf veel makkelijker om met plaatjes te werken (dan zie je precies wat je doet) dan met javascript (zeker als het van die geleende script-bibliotheken zijn waar van alles en nog wat mee mogelijk is). Vaak wordt een groot deel van zo'n bieb niet gebruikt als je een bepaalde toepassing wilt. Dan krijg je de rest (aan KB's) gewoon mee.
Ik geloof dat een aantal webeditors als Dreamweaver deze scripts als snufjes gebruiken, om het de ontwerper makkelijk te maken. - Maar je weet dan eigenlijk niet precies wat je doet.

Ik ben meer een kladblok-webmaker en gebruik niet van die web-editors: met alles zelf in de hand weet je exact wat de uitkomst is, en waar nodig kan er zo hier en daar een klein javascriptje gebruikt worden: alléén voor dat ene doel waar je het voor nodig hebt. Op bergwandeltocht zeul ik ook niet rond met een 4-persoons bungalowtent in mijn rugzak, terwijl ik aan mijn 1-persoons bivakje genoeg heb. ;)
En voor de toegankelijkheid van sites is het ook gewenst dat de site zonder javascript te bezichtigen en te bedienen is. Javascript hoort "extra functionaliteit" te zijn: voor het mooi of voor het gemak, maar de bezoeker moet er niet van afhankelijk zijn. - Hetzelfde geldt voor Flash, trouwens.
Na deze preek snel naar het feestgedruis! :D

Voor de achtergrond: ik kwam op internet een foto van de Beach Party van vorig jaar tegen, die misschien te gebruiken valt. Een tent met mooie kleurtjes, die (met z'n spiegelbeeld er naast geplakt) als voorbijtrekkend baantje onder de kop kan dienen.
  • Zoiets, misschien? (het is daar niet druk, maar een foto met meer bezoekers zag ik niet; daar is misschien best aan te komen.)
Succes!
CSShunter
 
Zelf gebruik is expression web van microsoft, en daar zitten zover als ik weet geen standaard scriptjes in.

Ja ik vind het wel een goed idee van een beachparty foto, misschien kan ik nog aan grotere fotos komen.

Ken je veel van javascript? Want ik had een idee om de backgroundimage van de body, van links naar rechts te laten gaan, als ik nog ongeveer 240px aan rechts overheb. Maar het lukt me niet om dit te maken:confused:
Code: 
$(function() {
   	   	var	max = 240;
   	   	var offset = 0;
    	$('body').css("background-position", "left " + "top");

	function scrollbackground(){
	   	setTimeout(function(){rechts();}, 3000);
		function rechts(){
		if (!(offset==max)){
			offset + 1;
		    $('body').css("background-position", offset + "px " + "top");
		    setTimeout(function(){rechts();}, 100);
		}
		};
			setTimeout(function(){links();}, 3000);
			function links(){
				if (!(offset==0)){
					offset - 1;
				    $('body').css("background-position", offset + "px " + "top");
		   			setTimeout(function(){links();}, 100);
		   		}
			};
   	}
});

Groeten Brecht
 
Om eerlijk te zijn: nee, ik ben niet erg bedreven in javascript. Ik ken alleen wat huis-tuin-en-keuken-dingetjes.
Maar net genoeg om te zien dat het laatste haakje van je code niet goed is ;)
});
Klik om te vergroten...
Als dat het is, waarom het niet werkt, ben je er. - Maar ik vrees van niet...

Nu snap ik in de eerste plaats nog niet helemaal wat je wilt:
... idee om de backgroundimage van de body, van links naar rechts te laten gaan
als ik nog ongeveer 240px aan rechts over heb.
Klik om te vergroten...
Stel je resolutie staat op 1280x1024px, en het background-img is 1000px breed:
  • Als het bg-img niet gecentreerd staat, heb je rechts 1280-1000= 280px over.
  • Moet het bg-img dan naar rechts schuiven, totdat de rand van het scherm bereikt is?
  • En als bij de rechterrand, dan weer terugschuiven naar de linkerrand van het scherm? Plus bij botsen links weer terug naar rechts, enz.?
  • Of gecentreerd beginnen, en dan naar rechts + daarna pendelen tot links enz.?
  • Wat moet er bij andere resoluties gebeuren? Bij een breder beeldscherm ook doorschuiven tot de rechter rand, of op een bepaalde afstand (hoeveel px? of welk percentage?) daarvandaan?
  • Bij een resolutie van 1024x768px past een bg-img van 1000px er nog net op. Maar wat moet er gebeuren als het bg-img > 1000px is, of als iemand zijn scherm op minder breed heeft staan (bv. bij gebruik van een history-paneel aan de linkerkant)?
De code snap ik ook niet helemaal. Is dit wel (universeel) javascript? De $variabelen ken ik niet in js (maar dat ligt misschien aan mij), en de oproep van een ID gaat bij mijn weten met document.getElementById('deDivId'). En voor de <body> achtergrond-positie bv.:
[JS]document.getElementsByTagName('body')[0].style.backgroundPosition = ''+offset+'px top';[/JS]
i.p.v. met:
[JS]$('body').css("background-position", offset + "px " + "top");[/JS]
Is wat jij gebruikt geen php-code? Dan zou het als <?php ... ?> in de <head> moeten komen, en het html-bestand als php-bestand opgeslagen moeten worden (aangenomen dat de server het gebruik van php ondersteunt).

Misschien heb je hier genoeg aan om verder te komen?
En anders ... is er altijd ook nog de afdeling javascript op dit forum (of de php-rubriek), waar je je vraag kan stellen (je antwoorden op m'n bovenstaande vragen over de bedoeling kan je dan meenemen ;) ).

Met vriendelijke groet,
CSShunter
 
Waarom is dat haakje
Code: 
});
niet goed? Dat is toch gewoon de bovenste functie die afgesloten word.

Ik zal het eens uit proberen te leggen:p Ik heb een background-image van 1920 px breed, het maximum px van een scherm is 1680. Dus 1920-1680 = 240px die ik sowiezo overheb.

  • Het script start
  • De background-position word links gezet
  • (RECHTS) Als offset niet 240 is -> offset +1, background-position: offset+px top (in een loop).
    Anders ga naar functie links
  • (LINKS) Als offset niet 0 is -> offset -1, background-position: offset+px top (in een loop).
    Anders herstart de functie

Groeten Brecht
 
Ai, het haakje! :eek: Ik zag het openingshaakje $(function(){ over het hoofd, omdat ik in javascript denk, waar een functie altijd zonder $ en haakje begint. Sorry!

Nu de uitleg. Kijken of ik het snap. ;)
  • "Het maximum px van een scherm is 1680" > is bij mij minder (1024px), maar dat blijkt voor het vervolg toch geen verschil te maken. Want:
  • De "240px die ik sowiezo over heb" noem ik: de 240px die je sowieso tekort komt. :D
    Ik denk vanuit de schermbreedte, dan is het scherm te klein voor het plaatje. Jij gaat uit van de breedte van de afbeelding, en dan "hou je breedte over" (van de afbeelding) die niet op het scherm komt. Misverstand opgehelderd!
  • Op reis: plaatje staat in het begin op (0,0) helemaal links - aan de rechterkant mis je minstens 240px die niet getoond kan worden op 1680px schermbreedte (in mijn geval: vermissing van 1920-1024= 896px, zo ongeveer de halve plaatjesbreedte).
  • Beeldscherm naar rechts bewegen gaat niet. :p We moeten het img naar links laten schuiven.
  • Img moet met beweging naar links stoppen, als de rechterrand van het img net "tevoorschijn komt" aan de rechterkant van het beeldscherm.
  • Dan stop met beweging naar links, en start van de beweging van het img weer terug naar rechts, totdat de linkerkant weer op (0,0) staat.
  • En zo door blijven pendelen tot de lezer de pagina verlaat.
Als dat klopt zou je met (gewoon) javascript een pendel-functie kunnen maken, in de geest van:
  • (loop voor i=0 tot i=100) > obj.backgroundPostion=''+i+'% 0'
  • if i=100, dan:
  • (loop voor i=100 tot i=0) > obj.backgroundPostion=''+i+'% 0'
... en zo oneindig door-wipwapperen.
Verder is bij een scherm van 1680px breed (=100%) de ruimte voor 1% = 1680/100 = 1,68px. Voor een niet schokkende beweging zal er dus een factor 2 ingebouwd moeten worden. De toename of afname in de bg-positie zal dus met halve % moeten gebeuren, oftewel i/2 in de formule. Zoiets.
Nadeel van deze methode:
  • De bewegingssnelheid wordt afhankelijk van de breedte van je scherm! De percentages nemen even hard toe of af, maar de aantallen pixels die ermee verbonden zijn verschillen immers per resolutie.
Daar valt van af te komen door niet in %, maar in px te gaan rekenen. Maar dan moet je eerst met javascript de door de bezoeker gebruikte beeldschermbreedte opvragen. Dat is iets ingewikkelder, want verschillende browsers gebruiken verschillende trefwoorden en eigenschappen voor de beschikbare ruimte binnen een venster (minus de rechter scrollbar). Maar het kan wel.

Met vriendelijke groet,
CSShunter

PS:
  • In jouw functie is de var max altijd op 240 gesteld; maar die 240px is alléén maar geldig voor een beschikbare breedte van 1680px, en wat de bezoeker voor breedte heeft weet je niet tevoren. Om de var max vast te stellen, zal dus ook een "beeldschermbreedte-sniffer" toegevoegd moeten worden.
  • Middenin staat de regel offset + 1; (en verderop offset - 1;). In elk geval javascript begrijpt dan niet dat je bedoelt offset = offset +1; of offset = offset -1;
  • Je begint met de beweging naar rechts als !(offset==max). Dat is in het begin altijd zo, want dan is de offset=0. Maar als de offset groeit, wordt het plaatje naar rechts bewogen t.o.v. (0,0), en zie je aan de linkerkant een strook met niets verschijnen terwijl er aan de rechterkant nog meer af gaat dan je in het begin kon zien. De beweging gaat precies de verkeerde kant op!
  • Om meer van de afbeelding aan de rechterkant te zien, moet de afbeelding naar links > een negatieve x-waarde krijgen, tot -(max) bereikt is.
  • Zie voor het rangeren van achtergrond-images ook: "De patrijspoort-theorie" (of had ik die al eens genoemd?)
 
Ik heb het ondertussen zelf kunnen oplossen:
Code: 
$(function() {
   	   	var	max = -(1920 - screen.availWidth);
   	   	offset = 0;
    	$('body').css("background-position", "left " + "top");
    
    rechts();
	function rechts() {
	   	if (offset!=max){
	   	offset=offset - 1;
   		document.getElementsByTagName('body')[0].style.backgroundPosition = ''+offset+'px top';
   		setTimeout(function() {rechts();}, 100);
   	}
   	else{
   	links();
   	function links() {
	   	if (offset!=0){
	   	offset=offset + 1;
   		document.getElementsByTagName('body')[0].style.backgroundPosition = ''+offset+'px top';
   		setTimeout(function() {links();}, 100);
   	}
   	else{rechts();}
   	}}}
});

Ik weet wel niet of dit "proper" geprogrammeerd is. Maar het werkt:p
Heel erg bedankt voor je hulp! Als er nog eens iets is, zal ik het je laten weten.

Vriendelijke groeten Brecht
 
Mooi, en gefeliciteerd! Heel prettig dat screen.availWidth nu in alle browsers werkt. Vroeger moest je er een hele detectie op los laten om er via diverse eigenschapnamen achter te komen. Zie verder Quirksmode voor een fraai overzicht.

Of de code proper genoeg is, weet ik niet - het ziet er nu uit als php en javascript een beetje gemixt. Maar hij tuft nu om te beginnen goed naar links, en er zit een mooie dubbele lus in om na een heen-en-weer actie weer opnieuw te beginnen. Dus als ie werkt (in de diverse browsers), lijkt het me proper genoeg!
  • Tenzij je in een volgende reactie iemand anders heel erg hard "nee" hoort brullen. ;)
Met vriendelijke groet,
CSShunter
 
screen.width werkt precies ook goed:p Bij mij werkt het in IE en Chrome, lijkt me goed genoeg :D

Jij bent heel erg bedankt!
Groeten Brecht
 
screen.width werkt precies ook goed
Klik om te vergroten...
O! :eek: Ik dacht dat screen.width betekende: de hele schermbreedte onafhankelijk van het browser-window, en screen.availableWidth: de beschikbare schermbreedte (het browser-window met aftrek van de ruimte van de rechter scrollbar èn met aftrek van de breedte die ingenomen kan worden als iemand een history-paneel o.i.d. aan de linkerkant open heeft staan).
  • Geeft ie dan bij jou ook het volledige plaatje weer aan de rechterkant, als je een history-paneel aan hebt staan, of als je het browser-window verkleint?
  • En werkt het ook in Firefox, Opera en Safari? (die tellen óók mee! samen met IE en Chrome de grote 5 van 't moment).
Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan