Transparantie in plaatje: windows niet en mac wel....

Hallo, als ik dit (www.icet.nl en dan met je muis over Nederlands of Engels en dan de witte tekst die onderaan verschijnt, dat is m) plaatje op internet bekijk dan is de achtergrond niet transparant op een pc, op m'n mac wel... Weet iemand hoe dat komt en hoe ik er voor kan zorgen dat ie op een pc ook transparant wordt? Alvast bedankt voor de hulp!

Dat hangt af van browser tot browser. Niet elke browser ondersteunt transparantie en PNG bestanden. Firefox op windows heeft daar normaal geen problemen mee.

ja maar hier op t werk trekken de pc's t niet! Ze draaien op IE.... Maare als ik die afbeelding als gif opsla wordt heel de tekst verpest. helemaal korrelig enzo.... Dus daarom pakte ik png, maar nou heb ik dit gezeik weer....!

Waarom wordt die tekst eigenlijk in een image geplaatst?

Maak daar plain text van, en dan heb je zowiezo al geen problemen meer met transparantie.

Had dit probleem ook al hier de oplossing:

http://forum.macosx.nl/viewtopic.php?p=575968&highlight=png24

[quote:67d2c0337f="klaus"]Waarom wordt die tekst eigenlijk in een image geplaatst?

Maak daar plain text van, en dan heb je zowiezo al geen problemen meer met transparantie.[/quote:67d2c0337f]

ja maar dan kan ik toch geen roll-over meer krijgen??

Als ik me niet vergis ligt dat aan Internet Explorer op PC. Die kan niet goed met CSS én met PNG bestanden omgaan.

Ik heb wel een oplossing gevonden voor je, misschien dat je
er iets mee kunt. Het is een website met een paar goede
voorbeelden/oplossingen voor transparanties in IE-PC.

http://www.domedia.org/oveklykken/css-transparency.php
Als je nog meer wilt, klik dan even bovenin de pagina op
“code examples”.

Mvg,
Joram

bedankt! ik heb in dat andere topic ook al iets gevonden over een pngfix javascriptje... ga t ff uitproberen nu...

[quote:7f5bd0cc25="sic-one"] ja maar dan kan ik toch geen roll-over meer krijgen??[/quote:7f5bd0cc25]

Jawel hoor, je maakt dan wat gebruik van dhtml en css, erg simpel allemaal!
Je kan dit doen door gebruik te maken van het display element in css, en die via de onmouseover van je link aan te passen.

Bijkomend voordeel van gn image te gebruiken is natuurlijk dat je dan de tekst erg snel kunt aanpassen. Nu moet je weer een nieuwe image aanmaken en uploaden.

ja dat gaat mij wel een beetje ver. Doe t liever met een javasriptje. Maar dat pngfix script krijg ik ook niet echt aan de praat!

Er is meer werk aan die png dan aan hetgeen ik zou doen hoor :-) Maar het staat je volkomen vrij natuurlijk om een andere oplossing te gebruiken!

Veel succes, Klaus

maar ik weet helemaal niets van css en van dhtml... ik zou dus de precieze codes enzo moeten vinden anders kom ik er toch niet uit! en javascript lukt nog wel een heel klein beetje....

ik weet nu ook waarom dat pngfix.js t niet doet! Dat komt omdat de afbeeldingen waarom het gaat niet als gewone plaatjes in de site staan maar die pas tevoorschijn komen als je met je muis over Nederlands of Engels heen gaat (zie www.icet.nl). Daarom kan dat script ze denk ik niet fixen! Weet iemand hier een oplossing voor??

[quote:22ddb32f26="klaus"]Er is meer werk aan die png dan aan hetgeen ik zou doen hoor :-) Maar het staat je volkomen vrij natuurlijk om een andere oplossing te gebruiken!

Veel succes, Klaus[/quote:22ddb32f26]

hoe zou jij t doen dan? ik ken namelijk helemaal geen css en geen dhtml…!

[quote:e667d74b96="sic-one"] hoe zou jij t doen dan? ik ken namelijk helemaal geen css en geen dhtml...![/quote:e667d74b96]

Je kan het op een aantal manieren doen, maar zal ik maar 1 uit de doeken doen.

Per blok tekst maak je een <div> layer aan. Je geeft die een unieke naam zodat je die later zal kunnen aanspreken.

Je hebt dus zoiets :

[code:1:e667d74b96]
<div id="blok1">
Dit is blok 1
</div>
<div id="blok2">
Dit is blok 2
</div>
[/code:1:e667d74b96]

Hier moet je dan met css gaan zeggen dat die initieel onzichtbaar moeten zijn.

[code:1:e667d74b96]
<style>
#blok1,#blok2 {display:none;}
</style>
[/code:1:e667d74b96]

Op je links zal je dan iets dergelijks moeten gaan schrijven, ik weet niet of het de volledige juiste syntax zal zijn, maar het zal in de buurt liggen.

[code:1:e667d74b96]
<a href="javascript:void();" onmouseover="document.all.blok1.style.display:block;" onmouseout="document.all.blok1.style.display:none;">LInk 1</a>

en voor andere blok
<a href="javascript:void();" onmouseover="document.all.blok2.style.display:block;" onmouseout="document.all.blok2.style.display:none;">LInk 2</a>
[/code:1:e667d74b96]

Dit is beetje ruwweg wat er allemaal nodig is…

okay, dat ziet er wel goed uit! ik ben nu één laatste manier aan t proberen en anders ga ik jouw manier proberen! we zullen t over 10 minuten zien..... :o

de 10 minuten werden 2 uur want ik snap er geen k*t van! Kan je me misschien nog ietsje verder helpen klaus? Ik snap t echt niet! Het moet gewoon lukken dat als je met je muis over NL gaat dan er dan 2 (!!!) dingen veranderen. 1: de tekst moet zichtbaar worden, 2: er moet een pijltje voor NL verschijnen (is nu ook al). Alvast heel erg bedankt voor de hulp!!!!!!

Post misschien al eens de code die je tot nu toe hebt.

Dit heb ik tot nu toe:

[quote:ff9faf2f7b]<HTML>
<HEAD>
<TITLE>startblok2</TITLE>
<META HTTP-EQUIV=“Content-Type” CONTENT=“text/html; charset=iso-8859-1”>
<!-- ImageReady Preload Script (startblok2.psd) →
<SCRIPT LANGUAGE=“JavaScript”>
<!–

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
startblok2_03_startblok2_04_over = newImage(“images/startblok2_03-startblok2_04.gif”);
startblok2_06_startblok2_07_over = newImage(“images/startblok2_06-startblok2_07.gif”);
t1 = newImage(“images/1.png”);
t2 = newImage(“images/2.png”);
t3 = newImage(“images/3.gif”);
preloadFlag = true;
}
}

// →
</SCRIPT>
<!-- End Preload Script →
[b:ff9faf2f7b]<script type=“text/javascript”>
function SwapImage1() {
document.startblok3.src=“images/startblok2_03-startblok2_04.gif”
}
function SwapImage1Back() {
document.startblok3.src=“images/startblok2_03.gif”
}
function SwapImage2() {
document.t3.src=“images/2.png”
}
function SwapImage2Back() {
document.t3.src=“images/3.gif”
}
function SwapImage3() {
document.startblok6.src=“images/startblok2_06-startblok2_07.gif”
}
function SwapImage3Back() {
document.startblok6.src=“images/startblok2_06.gif”
}
function SwapImage4() {
document.t3.src=“images/1.png”
}
function SwapImage4Back() {
document.t3.src=“images/3.gif”
}
</script>[/b:ff9faf2f7b]
<BGSOUND id=sound>
</HEAD>
<BODY BGCOLOR=#1E1E1E ONLOAD=“preloadImages();” topmargin=“0” leftmargin=“0” background="…/…/…/INHOUD/Achtergrond/achtergrond2.jpg" bgproperties=“fixed” text="#1E1E1E">
<p><SCRIPT language=JavaScript>
<!–
function playHome()
{
if (document.all)
{
document.all.sound.src = “…/…/geluid/piepje1.wav”;
}
}
//–>
</SCRIPT>

<!-- ImageReady Slices (startblok2.psd) →
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD ROWSPAN=4 valign=“bottom”>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </TD>
<TD ROWSPAN=4 valign=“bottom”>
<IMG SRC=“images/startblok2_02.gif” WIDTH=32 HEIGHT=27>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</TD>
<TD ROWSPAN=4 valign=“bottom”>
<img border=“0” src=“gebouw_ICET.JPG” width=“169” height=“107”></TD>
<TD COLSPAN=3>
<IMG SRC=“images/startblok2_02.gif” WIDTH=160 HEIGHT=123></TD>
</TR>
<TR>
<TD>
<IMG name=“startblok3” SRC=“images/startblok2_03.gif” width=“23” height=“26”></TD>
<TD COLSPAN=2>
[b:ff9faf2f7b]<a HREF="…/…/…/NLwelkomalles_temp.html" OnMouseOver=“SwapImage1(), SwapImage2()” OnMouseOut=“SwapImage1Back(), SwapImage2Back()” target="_top">[/b:ff9faf2f7b]
<IMG SRC=“images/startblok2_04.gif” BORDER=0 width=“137” height=“26”></a></TD>

&lt;/TR&gt;
&lt;TR&gt;
	&lt;TD COLSPAN=3&gt;
		&lt;IMG SRC="images/startblok2_05.gif" width=160 height=44&gt;&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
	&lt;TD&gt;
		&lt;IMG Name="startblok6" SRC="images/startblok2_06.gif" WIDTH=23 HEIGHT=28&gt;&lt;/TD&gt;
	&lt;TD&gt;
        [b:ff9faf2f7b]&lt;a OnMouseOver="SwapImage3(), SwapImage4()" OnMouseOut="SwapImage3Back(), SwapImage4Back()" target="_top" href="../../../welkomengels.html"&gt;[/b:ff9faf2f7b]
			&lt;IMG SRC="images/startblok2_07.gif" BORDER=0 width="100" height="28"&gt;&lt;/a&gt;&lt;/TD&gt;
	&lt;TD&gt;
		&lt;IMG SRC="images/startblok2_08.gif" width="37" height="28"&gt;&lt;/TD&gt;
&lt;/TR&gt;

</TABLE>
<!-- End ImageReady Slices →
<table width=“450” border=“0” cellspacing=“0” cellpadding=“0”>
<tr>
<td colspan=“2”><font color="#FFFFFF" size=“2” face=“Arial”>&nbsp; </font></td>
</tr>
<tr>
<td colspan=“2”><font color="#FFFFFF" size=“2” face=“Arial”>&nbsp; </font></td>
</tr>
<tr>
<td width=“283”><div align=“right”><font color="#FFFFFF" size=“3” face=“Arial”><a href="…/…/totaalpaginas/TChinesewelcome.htm"><img src=“images/chinese.gif” width=“137” height=“26” border=“0”></a></font></div></td>
<td width=“167”>&nbsp;</td>
</tr>
<tr>
<td colspan=“2”>&nbsp; </td>
</tr>
<tr>
<td colspan=“2”>&nbsp; </td>
</tr>
<tr>
<td colspan=“2”><font color="#FFFFFF" size=“2” face=“Arial”>&nbsp; </font></td>
</tr>
<tr>
<td colspan=“2”><img src=“images/3.gif” name=“t3” width=“450” height=“130” id=“t3”></td>
</tr>
<tr>
<td colspan=“2”> <font color="#FFFFFF" size=“2” face=“Arial”>&nbsp; </font></td>
</tr>
</table>
<p><font color="#C80000" face=“Arial, Helvetica, sans-serif”></font></p>
</BODY>
</HTML>[/quote:ff9faf2f7b]

Deze doet t perfect maar dan zien die png’s er zo slecht uit in IE! met css ben ik niet verder gekomen dan jij al had gepost… :cry:

Ja, hier toon je nu die png versie, maar toon me es die css-versie, zodat ik die kan bekijken?