[Javascript] Background Image Transparant - Softwareontwikkeling

zaterdag 9 juli 2005 14:07

Acties:

Verwijderd

Topicstarter

Ik probeer met het onderstaande script een achtergrond image transparant weer te geven.
De code werkt helemaal goed, maar zodra ik het vet weergegeven stuk code (filter:alpha(opacity=40)) invoer
dan doet het script niks meer en is de background image weg.

Hij laat de image dus wel zien, maar niet transparant, en dat is wat ik wil.
Kan iemand mij vertellen hoe ik dit script zo aan kan passen zodat de image
transparant op de background komt?

code:

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
NS4 = (document.layers);
IE4 = (document.all);

scaleWidth = true;
scaleHeight = true;
imSRC = "images/zp.jpg";
if (NS4) window.onload = setResize;
function setResize(){
setTimeout("window.onresize=reDo;",500);
}
function reDo(){
window.location.reload()
}
if (IE4) window.onresize = reDoIE;
function reDoIE(){
imBG.width = document.body.clientWidth;
imBG.height = document.body.clientHeight;
}
function makeIm() {

winWid = (NS4) ? innerWidth : document.body.clientWidth;
winHgt = (NS4) ? innerHeight : document.body.clientHeight;

imStr = "<DIV ID=elBGim"
+ " STYLE='position:absolute;left:0;top:0;z-index:-1;filter:alpha(opacity=40)'>
+ "<IMG NAME='imBG' BORDER=0 SRC=" + imSRC;
if (scaleWidth) imStr += " WIDTH=" + winWid;
if (scaleHeight) imStr += " HEIGHT=" + winHgt;
imStr += "></DIV>";

document.write(imStr);

}
//-->
</SCRIPT>
</HEAD>
<BODY MARGINHEIGHT=0 MARGINWIDTH=0>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
makeIm();
//-->
</SCRIPT>

Cheerz,

[ Voor 21% gewijzigd door André op 09-07-2005 14:19 ]

zaterdag 9 juli 2005 14:18

Acties:

André

Analytics dude

Ik heb [JAVA] in de titel veranderd naar [Javascript] want het zijn 2 hele verschillende dingen

En zou je je code in het vervolg tussen [code] blokken kunnen plaatsen

De code die je vet had gemaakt heb ik even boven in je post vermeldt

[ Voor 18% gewijzigd door André op 09-07-2005 14:20 ]

zaterdag 9 juli 2005 14:21

Acties:

Verwijderd

Vind je het heel erg dat als ik document.layers, document.all, IE4 en NS4 in een stuk javascript zie, dat ik er niet eens meer naar ga kijken?

Schrijf de code zelf opnieuw, laat die antieke onzin eruit, dan is je code waarschijnlijk een stuk korter. Geef even aan welk(e) regelnummer(s) je bedoelt.

[edit]
Waarom laat je niet eerst die javascript meuk weg? Ik gok dat het ook al niet wilt werken als je die div er zelf neerzet. Mijn gok is dat het aan de negatieve z-index ligt.

[ Voor 72% gewijzigd door Verwijderd op 09-07-2005 14:26 . Reden: mijn fout, code viel weg ]

zaterdag 9 juli 2005 14:36

Acties:

André

Analytics dude

Goede bui modus

code:

<script type="text/javascript">

scaleWidth = true;
scaleHeight = true;
imSRC = "images/zp.jpg";

window.onresize = function reDo()
{
  if (scaleWidth) { document.getElementById("imBG").style.width = document.body.clientWidth + "px"; }
  if (scaleHeight) { document.getElementById("imBG").style.height = document.body.clientHeight + "px"; }
}

function makeIm()
{
  obj = document.createElement("img");
  obj.id = "imBG";
  obj.src = imSRC;

  obj.style.border = "0";
  obj.style.position = "absolute";
  obj.style.left = "0";
  obj.style.top = "0";
  obj.style.zIndex = "0";

  obj.style.filter = "alpha(opacity=40)";
  obj.style.opacity = .4;

  if (scaleWidth) { obj.style.width = document.body.clientWidth + "px"; }
  if (scaleHeight) { obj.style.height = document.body.clientHeight + "px"; }

  document.body.appendChild(obj);
}
makeIm();
</script>>

In je body zetten en anders van de laatste regel dit maken:

code:

1	window.onload = makeIm();

En wat Cheatah al zei, de negatieve z-index wordt niet geslikt door FF

[ Voor 12% gewijzigd door André op 09-07-2005 14:38 ]

zaterdag 9 juli 2005 15:02

Acties:

Verwijderd

Topicstarter

Bedankt voor de goeie bui modus

Helaas werkt dit script ook niet en zie ik helemaal geen achtergrond meer. In het vorige script werkte ook alleen de alpha functie niet, voor de rest alles.
Nog meer suggesties?

zaterdag 9 juli 2005 15:14

Acties:

André

Analytics dude

Hoezo werkt het niet, ik heb hem lokaal werkend in IE en FF

zaterdag 9 juli 2005 15:17

Acties:

Verwijderd

Topicstarter

Vaag

Als ik heb hier invoer dan krijg ik gewoon een witte achtergrond, en bij mijn vorige script wat hier boven staat laat hij wel gewoon de achtergrond zien, alleen bij de alpha functie loopt hij vast en doet hij niks meer. Ik zal nog wel even kijken of ik iets raars tegen kom waardoor jou script blokkeerd oid.

zaterdag 9 juli 2005 15:31

Acties:

André

Analytics dude

Heb je anders iets online staan? Dit script moet trouwens wel in de body staan.

zaterdag 9 juli 2005 15:34

Acties:

Verwijderd

Topicstarter

Ik hem nu werkend, er stond (zoals ik al dacht) een anders stukje codering wat dit tegenhield,
maar het enige wat ik transparant wil hebben is de achtergrond (gewoon doorzichtig) maar de site niet. Dus ik wil niet dat je door de site de achtergrond kan zien, ik wil alleen dat op de plekken waar de achtergrond zichtbaar is dat hij vaag zichtbaar is en niet voor 100% als je begrijpt wat ik bedoel.
Met jou script wordt m'n hele site doorzichtig

zaterdag 9 juli 2005 15:39

Acties:

André

Analytics dude

Mijn script doet precies hetzelfde als jouw script maar dan met nette code. Dus als die van mij niet doet wat je wil dan doet dat oude script het ook niet.

Wat ik trouwens niet begrijp, een achtergrond transparant maken is natuurlijk dikke bullshit omdat er niets doorheen te zien valt. Maak het plaatje met Photoshop oid gewoon transparant en laat de filter en opacity achterwege

dinsdag 12 juli 2005 09:01

Acties:

Verwijderd

Topicstarter

Het is wel gelukt wat ik wil, als ik de obj.style.zIndex = "0"; een negatief getal geef,
bijvoorbeeld: obj.style.zIndex = "-100"; dan gebeurt er precies wat ik wil

Bedankt voor het scripten