Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > Grafisch

transparantie

bwfighter - 15/09/2005 20:59
HTML interesse		Hoi Ik heb een achtergrond en wil dat ie voor 50% transparant is als ik die wil gebruiken op mijn site zodat de achtergrond erdoor komt Hoe dioe ik dit in PS of weet iemand hier een script voor

13 antwoorden

Gesponsorde links

RickyB - 15/09/2005 21:05
Onbekend		je moet bij photoshop een transperante afbeeldign maken en apslaan als gif.. waarschijnlijk zal dat wel werken..

bwfighter - 15/09/2005 21:06
HTML interesse		en hoe doe je dat

NCube - 15/09/2005 21:09
HTML beginner		het GIF formaat ondersteunt geen gedeeltelijke transparantie, je moet daarvoor PNG gebruiken.

RickyB - 15/09/2005 21:12 (laatste wijziging 15/09/2005 21:12)
Onbekend		je opent photoshop en je gaat naar: file -> new.. je vult het aantal pixels in en de rest v/d eigenschappen en bij background contents doe je transperant je drukt op ok en je maakt je plaatje... dan als dat plaatje af is, dan ga je naar file -> save as en je selecteerd gif (niet animated gif) en drukt op ok... dan komt er een venstertje en bij forced doe je web en bij transperant vink je dat hokje aan.. dan issie opgeslagen en issie trasperant snappie?? ik hoop dat het met jou versie van photoshop ook zo werkt edit::: lees de bovenstaande reactie.. dat zou nl. best eens waar kenne zijn

gijs - 15/09/2005 21:13
HTML beginner		Citaat: en hoe doe je dat Als je de afbeelding hebt geopend in PhotoShop, zie je als het goed is ergens rechts een venstertje. Daar kan je instellen in procenten, hoeveel procent hij moet zijn. Als het goed is staat daar nu 100%. Vervolgens sla je het bestand op als ***.png en je bent klaar

vinTage - 15/09/2005 21:13
Nieuw lid		en png heeft internet explorer weer moeite mee.

gijs - 15/09/2005 21:27 (laatste wijziging 15/09/2005 21:58)
HTML beginner		Citaat: en png heeft internet explorer weer moeite mee. Wie gebruikt er dan ook Internet Explorer vinTage edit: Citaat: Wie gebruikt er dan ook Internet Explorer waarschijnlijk nooit naar de stats gekeken op verschillende websites? Die post is dus even onzinnig als je avatar. : sarc : </edit> gijs edit: Citaat: Die post is dus even onzinnig als je avatar. Aha, jij hebt me dus die status gegeven vinTage edit: neen

Maarten - 15/09/2005 22:06
Erelid		PNG werkt perfect in IE met volgende fix: http://homepage.ntlworld.com/bobosola/ En in IE7 worden PNG's ook ondersteund! Rondje van de zaak :p

Ontani - 15/09/2005 22:49

-1

die PNG fix werkt enkel voor afbeeldingen en niet voor achtergronden.

daarvoor gebruik het volgende:

maak een bestand aan: iepngfix.htc met de volgende code

php code - Bekijk de code zonder highlighting - Klap code in

                <public:component>
<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">

var blankImg = 'blank.gif';


var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m)
{
 if (filters[f])
 {
  filters[f].enabled = s ? true : false;
  if (s) with (filters[f]) { src = s; sizingMethod = m }
 }
 else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}

function doFix()
{
 // Assume IE7 is OK.
 if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
  (event && !/(background|src)/.test(event.propertyName))) return;

 var bgImg = currentStyle.backgroundImage || style.backgroundImage;

 if (tagName == 'IMG')
 {
  if ((/\.png$/i).test(src))
  {
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   filt(src, 'scale');
   src = blankImg;
  }
  else if (src.indexOf(blankImg) < 0) filt();
 }
 else if (bgImg && bgImg != 'none')
 {
  if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
  {
   var s = RegExp.$1;
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   style.backgroundImage = 'none';
   filt(s, 'crop');
   // IE link fix.
   for (var n = 0; n < childNodes.length; n++) childNodes[n].style.position = 'relative';
  }
  else filt();
 }
}

doFix();

</script>
</public:component>

            
<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />
 
<script type="text/javascript">
 
var blankImg = 'blank.gif';
 
 
var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
 
function filt(s, m)
{
 if (filters[f])
 {
  filters[f].enabled = s ? true : false;
  if (s) with (filters[f]) { src = s; sizingMethod = m }
 }
 else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}
 
function doFix()
{
 // Assume IE7 is OK.
 if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
  (event && !/(background|src)/.test(event.propertyName))) return;
 
 var bgImg = currentStyle.backgroundImage || style.backgroundImage;
 
 if (tagName == 'IMG')
 {
  if ((/\.png$/i).test(src))
  {
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   filt(src, 'scale');
   src = blankImg;
  }
  else if (src.indexOf(blankImg) < 0) filt();
 }
 else if (bgImg && bgImg != 'none')
 {
  if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
  {
   var s = RegExp.$1;
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   style.backgroundImage = 'none';
   filt(s, 'crop');
   // IE link fix.
   for (var n = 0; n < childNodes.length; n++) childNodes[n].style.position = 'relative';
  }
  else filt();
 }
}
 
doFix();
 
</script>
</public:component>
 

daarna zet in je stylesheet voor welke tags de png fix moet dienen:

php code - Bekijk de code zonder highlighting - Klap code in

                div { 
 	behavior: url("iepngfix.htc");
}

            
div { 
 	behavior: url("iepngfix.htc");
}
 

voor meerdere tags:

php code - Bekijk de code zonder highlighting - Klap code in

                div,img,span { 
 	behavior: url("iepngfix.htc");
}

            
div,img,span { 
 	behavior: url("iepngfix.htc");
}
 

Frederic - 15/09/2005 22:50
PHP ver gevorderde		Schandalig toch, zo'n lange fix gewoon om het in IE te laten werken ... Maar dat is offtopic

Ontani - 15/09/2005 22:54
-1		als het in een appart bestandje staat merk je der amper iets van. Het enige nadeel behavior is geen tag die wordt goedgekeurd door W3C

BaddyZ - 11/10/2005 13:06
Nieuw lid		transperancy 50 % in adobe ? of bedoel je iets anders?

lays - 11/10/2005 16:37 (laatste wijziging 11/10/2005 16:38)
Lid		wat je kunt doen is een filter aanzetten met css. Ik heb het volgende op mijn website gedaan, dit werkt met alle afbeeldingen. php code - Bekijk de code zonder highlighting - Klap code in <img src="afbeelding.jpg" style="width: 200px; height: 150px; border: 0 none; filter: alpha(opacity=50); -moz-opacity: 50; opacity: 50;"> <img src="afbeelding.jpg" style="width: 200px; height: 150px; border: 0 none; filter: alpha(opacity=50); -moz-opacity: 50; opacity: 50;"> de waarde 0 is compleet transperant en 100 is normaal. Dit moet in de html komen staan van je webpagina!! dus geen photoshop nodig of andere programma's. Sla je afbeelding gewoon normaal op 100% zeg maar en laad de afbeelding zoals hierboven bescgreven

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten