doorzichtige laag (deels) over plaatje leggen

[xychix]

Hier heb ik met adobe een blauwe (is onderhand wit geworden en zal nog meer veranderen ) laag over een plaatje gelegd.
Maar ik wil dit graag met (D)html gaan doen.
dus dat ik alleen het plaatje van de auto nodig ben en dat ik dan (vanuit een script) de kleur, dichtheid en plaatsing van de overliggende laag kan bepalen !

Is dat mogelijk ? en hoe ?

alvast bedankt...

[ Voor 10% gewijzigd door xychix op 03-04-2003 11:04 ]

[coubertin119]

Met PNG lijkt dit me te lukken, alleen zal je support voor IE dan moeten droppen. Kijk een keer rond naar opacity zut voor PNG.

[xychix]

Het is absoluut geen optie om IE gebruikers buiten te sluiten.
Ik hoopte dat het html mogelijk was.

zelf ben ik nog bezig met de mogelijkheden van serverside image bewerking (GD libs voor PHP) maar het makkelijkste zou zijn als dit met javascript of Dhtml zou kunnen

[Willem]

Wat dacht je van bijvoorbeeld filter:opacity(alpha=50); in een divje over je img?

[xychix]

willem169 schreef op 03 april 2003 @ 11:04:
Wat dacht je van bijvoorbeeld filter:opacity(alpha=50); in een divje over je img?

Dan moet ik dus op een of andere manier de exacte locatie van de IMG weten...
en dat is lastig want ik wil server gegenereerd een aantal van deze plaatjes op een scherm toveren.

[Willem]

Welke locatie? De positie? Het path?

Je kunt best een divje maken met daarin 2 lagen: laag (z-index:1) met img en laag (z-index:2) met een plaatje van een kleur met bovenstaande alpha opactiy filter.

[Schmoove]

Wat je zou kunnen doen... alhoewel het niet echt een gelikte oplossing is is dit:

1) maak een GIF die bestaat uit een schaakbord patroon, dus blokje blauw, blokje doorzichtig, blokje blauw, blokje doorzichtig.... enz.
2) elk blokje is 1 pixel
3) leg die GIF over je plaatje heen... je krijgt nu een soort van alphablending effect... niet echt natuurlijk, maar het idee is er wel.

Zoals ik al zei.... de oplossing is niet echt mooi, maar werkt wel aardig.

[xychix]

willem169 schreef op 03 April 2003 @ 11:07:
Welke locatie? De positie? Het path?

Je kunt best een divje maken met daarin 2 lagen: laag (z-index:1) met img en laag (z-index:2) met een plaatje van een kleur met bovenstaande alpha opactiy filter.

Moet ik die DIV dan ook een postie meegeven ? of kan ik deze gewoon IN een tabel zetten ?

dus dan krijgen we een cel met 2 divjes erin..
ter groote van het plaatje (die size is wel berekenbaar)

waar is vooral mee zit is de positionering.. moet ik dan niet de X en Y coordinaten weten van het plaatje op de pagina ???

[Willem]

Positionering is met CSS geen punt.
Wat dat betreft zijn er genoeg online references te vinden...

[RM-rf]

coubertin119 schreef op 03 April 2003 @ 10:59:
Met PNG lijkt dit me te lukken, alleen zal je support voor IE dan moeten droppen. Kijk een keer rond naar opacity zut voor PNG.

en als je dan een beetje rondkijkt zul je ontdekken dat full PNG support ook voor msie/pc mogelijk is
http://www.alistapart.com/stories/pngopacity/

[xychix]

kunnen jullie me misschien toch nog een eindje opweghelpen ?

code:

echo "
<td class=\"listDataEven\" align=\"center\">
<div>
  <layer name=\"img$row->id\"  z-index=\"1\">
    [img]\"$rel_img_dir$row->image\"[/img]
  </layer>
  <layer name=\"laag$row->id\" bgcolor=#EEEEEE z-index=\"2\" left=\"0\" top=\"0\">
    skkk
  </layer>
</div>
</td>";

hier word de text niet over het plaatje heen geplaatst maar erachter ?!
hoe kan ik de text eroverheen krijgen. maw. hoe krijg ik de layers boven elkaar ?

de vervolgstappen (het bepalen van de grootte van de layer, en deze een doorzichtige grijze achtergrond geven komt dan nog wel)

ik werk in IE 6.02 maar het moet bijvoorkeur ook in netschaap werken.

[InZane]

foutje

[ Voor 94% gewijzigd door InZane op 04-04-2003 16:42 ]

[InZane]

coubertin119 schreef op 03 April 2003 @ 10:59:
Met PNG lijkt dit me te lukken, alleen zal je support voor IE dan moeten droppen. Kijk een keer rond naar opacity zut voor PNG.

IE support droppen?
Moet ik bij m'n baas mee aankomen

xychix schreef op 04 April 2003 @ 13:06:ik werk in IE 6.02 maar het moet bijvoorkeur ook in netschaap werken.

Bedoel je NS 4.xx? Dan gaat het sowieso niet werken als je de opacity met css wilt gaan bepalen.

[ Voor 18% gewijzigd door InZane op 04-04-2003 16:42 ]

[xychix]

maar kan iemand mij zeggen waarom bovenstaande html (2 posts) terug geen effect heeft ? de text (2e layer) word gewoon acher het plaatje (in de 1e llayer ) geplaatst!

[Guillome]

<layer> is niet een <div>

code:

<div style="position:absolute;">[img]"blah"></div>
<div[/img]</div>

Zoiets

OPACITYSTYLE moeje zelf effe opzoeken in de MSDN van M$.
http://msdn.microsoft.com...dhtml_reference_entry.asp

En met die width en height moet je even zien hoe en wat.

[ Voor 49% gewijzigd door Guillome op 06-04-2003 21:30 ]

[SillyJW]

Of je hier iets aan hebt weet ik niet.. maar ik hoorde iets over auto..
(je plaatje in je openingspost is ook niet meer beschikbaar)

edit:
Je plaatje kwam zojuist weer tevoorschijn

[ Voor 17% gewijzigd door SillyJW op 07-04-2003 13:03 ]

[Verwijderd]

't kan wel als je die PNG met Flash combineert... dus een PNG in Flash doen. De laatste keer dat ik met Flash heb gewerkt was nog met Flash 4, en daar kon ik iig een Flash filmpje transparant hebben. Die in een DIVje en dan over het plaatje heen. Maar als je dan toch een DIV moet gebruiken kan je evengoed met CSS werken

[gitaarwerk]

je kan toch ook bij de gegenereerde content een waarde meegeven die een css positie bepaald samen met een alpha code?

je moet alleen refreshen als je er wat wilt mee gaan doen.. anders zou je het met flash inderdaad nog wat kunnen doen, alleen flash is niet echt meest aantrekkelijke om voor iedereen toereikbaar te maken

[dusty]

Het kan gewoon in dhtml zoals willem al in zijn eerste post zei, je hebt ook nog altijd properties van de image waar een plaatje overheen moet. (dus de locatie van de image en de grootte van het plaatje.)

[xychix]

Het hoeft niet te bljiven bewegen! het moet alleen een plaatje opleveren als in mijn openeings post. Momenteel heb ik het opgelost met serverside php GDlib. maar mijn phpdev4 ondersteund geen transparantie.

als iemand een simpel code voorbeeld zou kunnen geven van een plaatje met een overliggende laag in een cel van een tabel. dan zouden jullie mij zeer gelukkig maken. Zelf kom ik er niet uit!

code:

<tr>
 <td>naam</td>
 <td>hier komt en plaatje dat deels overlapt word door een doorzichtig vlak</td>
 <td>commentaar</td>
</tr>

[Verwijderd]

http://www.drunk.nl/tweakers/testopacity/

hoop dat je er wat aan hebt. Werkt zowel in IE als in Gecko browsers.

[xychix]

Verwijderd schreef op 08 April 2003 @ 00:25:
http://www.drunk.nl/tweakers/testopacity/

hoop dat je er wat aan hebt. Werkt zowel in IE als in Gecko browsers.

Bedankt!!!! dit is precies wat ik zocht !!!

[RM-rf]

Verwijderd schreef op 08 april 2003 @ 00:25:
http://www.drunk.nl/tweakers/testopacity/

hoop dat je er wat aan hebt. Werkt zowel in IE als in Gecko browsers.

en deze werkt zowel in msie, mozilla (Gecko) alswel ook in Opera7
http://oaksanderson.com/opacity/examples/ex1.htm

is gebaseerd op PNG-24

[coubertin119]

RM-rf schreef op 08 april 2003 @ 11:51:
[...]


en deze werkt zowel in msie, mozilla (Gecko) alswel ook in Opera7
http://oaksanderson.com/opacity/examples/ex1.htm

is gebaseerd op PNG-24

Dit bedoelde ik dus met alleen werkt 't in IE dus wel.

coubertin119 schreef op 03 april 2003 @ 10:59:
Met PNG lijkt dit me te lukken, alleen zal je support voor IE dan moeten droppen. Kijk een keer rond naar opacity zut voor PNG.

[Guillome]

En wat was er niet goed aan mijn advies:?