javascript preload and swap background image - Softwareontwikkeling

dinsdag 16 augustus 2005 00:41

Acties:

Verwijderd

Topicstarter

Weet iemand waarom er bij onclick helemaal niets gebeurt?

code:

<html>
<head>
<script type="text/javascript">
myImage1 = new Image();
myImage1.src = "buttonpages/artback.jpg";
myImage2 = new Image();
myImage2.src = "buttonpages/stippen.jpg";

function swap()
{
if (document.getElementById('table1').backgroundimage==myImage1)
{
document.getElementById('table1').backgroundimage=myImage2;
}
else
{
document.getElementById('table1').backgroundimage=myImage1;
}
}
</script>
</head>

<body bgcolor="#000000">
<form>
<table ID="table1" border="0" cellpadding="0" cellspacing="0" width="100%" height="80%" style="padding-top: 40px" background="buttonpages/stippen.jpg">
<tr>
  <td>
    <INPUT TYPE="button" VALUE="Button"
    ONCLICK="swap()" style="font-family: Arial">
  </td>
</tr>
</table>
</form>
</body>
</html>

dinsdag 16 augustus 2005 00:53

Acties:

NMe

Quia Ego Sic Dico.

Javascript is case sensitive. Is het niet backgroundImage in plaats van backgroundimage? Sowieso moet je document.getElementById('blaat').style.backgroundImage hebben.

[ Voor 33% gewijzigd door NMe op 16-08-2005 00:54 ]

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

dinsdag 16 augustus 2005 01:14

Acties:

Verwijderd

Topicstarter

'kHeb nu dit, maar er gebeurt nog helemaal niks bij onclick

code:

<html>
<head>
<script type="text/javascript">
myImage1 = new Image();
myImage1.src = "buttonpages/artback.jpg";
myImage2 = new Image();
myImage2.src = "buttonpages/stippen.jpg";

function swap()
{
if (document.getElementById('table1').backgroundImage==myImage1)
{
document.getElementById('table1').backgroundImage=myImage2;
}
else
{
document.getElementById('table1').backgroundImage=myImage1;
}
}
</script>
</head>

<body bgcolor="#000000">
<form>
<table ID="table1" border="0" cellpadding="0" cellspacing="0" width="100%" height="80%" style="padding-top: 40px" background="buttonpages/artback.jpg">
<tr>
  <td>
    <INPUT TYPE="button" VALUE="Button"
    ONCLICK="swap()" style="font-family: Arial">
  </td>
</tr>
</table>
</form>
</body>
</html>

EDIT: wacht ff er stond STYLE

[ Voor 24% gewijzigd door Verwijderd op 16-08-2005 01:16 ]

dinsdag 16 augustus 2005 01:15

Acties:

NMe

Quia Ego Sic Dico.

-NMe- schreef op dinsdag 16 augustus 2005 @ 00:53:
Sowieso moet je document.getElementById('blaat').style.backgroundImage hebben.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

dinsdag 16 augustus 2005 01:16

Acties:

disjfa

-NMe- schreef op dinsdag 16 augustus 2005 @ 00:53:
Javascript is case sensitive. Is het niet backgroundImage in plaats van backgroundimage? Sowieso moet je document.getElementById('blaat').style.backgroundImage hebben.

Lees bij voorbaat het dikker gemarkeerde stuk.

Verder is een object geen naam dus kan je beter een obj.src (de naam van de source van je plaatje) gebruiken.

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 16 augustus 2005 01:17

Acties:

Verwijderd

Topicstarter

yep zag het al

dinsdag 16 augustus 2005 01:23

Acties:

Verwijderd

Topicstarter

(de naam van de source van je plaatje)

Wat bedoel je hier mee? M.a.w. wat en hoe moet dat in de functie?

dinsdag 16 augustus 2005 01:25

Acties:

disjfa

Verwijderd schreef op dinsdag 16 augustus 2005 @ 01:23:
[...]
Wat bedoel je hier mee? M.a.w. wat en hoe moet dat in de functie?

Als je een background image set... wat set je dan. Een url naar de link van het plaatje. Wat is een image.src als je in javascript een nieuw plaatje maakt

Een javascript plaatje aanmaken != een css backgroundImage

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 16 augustus 2005 01:30

Acties:

Verwijderd

Topicstarter

Bedoel je zo: (Ik denk niet helemaal aangezien het zo werkt wel werkt, maar alleen moet ik eerst 1 keer extra op de button drukken voordat die begint te werken)

code:

<html>
<head>
<script type="text/javascript">
myImage1 = new Image();
myImage1.src = "buttonpages/artback.jpg";
myImage2 = new Image();
myImage2.src = "buttonpages/stippen.jpg";

function swap()
{
if (document.getElementById('table1').style.backgroundImage=='url(buttonpages/stippen.jpg)')
{
document.getElementById('table1').style.backgroundImage='url(buttonpages/artback.jpg)';
}
else
{
document.getElementById('table1').style.backgroundImage='url(buttonpages/stippen.jpg)';
}
}
</script>
</head>

<body bgcolor="#000000">
<form>
<table ID="table1" border="0" cellpadding="0" cellspacing="0" width="100%" height="80%" style="padding-top: 40px" background="buttonpages/stippen.jpg">
<tr>
  <td>
    <INPUT TYPE="button" VALUE="Button"
    ONCLICK="swap()" style="font-family: Arial">
  </td>
</tr>
</table>
</form>
</body>
</html>

[ Voor 69% gewijzigd door Verwijderd op 16-08-2005 01:37 ]

dinsdag 16 augustus 2005 01:39

Acties:

disjfa

Ik denk dat het makkelijkste voor je is is dat je je een keer in css gaat verdiepen en achter de a:hover image gaat komen. Dan denk ik dat je je veel rotzooit gaat voorkomen met wat je nu wilt gaan doen.

Simpel te zeggen is dat talbes niet gemaakt zijn voor een layout. En dat probeer je nu waarschijnlijk te veel.

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 16 augustus 2005 01:43

Acties:

NMe

Quia Ego Sic Dico.

disjfa schreef op dinsdag 16 augustus 2005 @ 01:39:
Ik denk dat het makkelijkste voor je is is dat je je een keer in css gaat verdiepen en achter de a:hover image gaat komen. Dan denk ik dat je je veel rotzooit gaat voorkomen met wat je nu wilt gaan doen.

Leuk natuurlijk, maar dit alles heeft niks met hovers te maken. Na een muisklik moet het plaatje verwisselen, en dat ga je met een hover niet oplossen. Verder is hier op dit punt geen hyperlink nodig zo te zien, en dan is een a:hover dus ook nogal stom. Om nog maar niet te spreken over IE, dat niet eens overweg kan met een hover op andere tags dan de <a>-tag, tenminste, niet voordat IE7 uitkomt. De manier die hij nu gebruikt lijkt me dus zo stom niet, al kan ie nog steeds beter. Die images die on the fly aangemaakt worden in Javascript lijken me bijvoorbeeld nogal overbodig nu.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

dinsdag 16 augustus 2005 01:48

Acties:

Verwijderd

Topicstarter

OK dat begrijp ik, ik denk ook zeker dat je gelijk hebt dat ik CSS moet gaan leren.

Alleen heb ik al mijn hele pagina zo, met tabellen, staan en mis ik alleen die swap functie. Ik ben hier al even mee bezig en voordat ik CSS ken en alles aangepast heb...

Dus wil ik je vragen me even te helpen dit kleine dingetje goed af te ronden op danwel de "niet bedoelde" manier? Na de tips werkt het swappen wel, maar moet ik eerst een keer extra op de button drukken voordat ik heen en weer kan gaan swappen..Ik begrijp niet waarom dit zo is?

EDIT: het is dus de bedoeling dat er een image (artback.jpg) wordt gepreload aangezien deze wat groter is en dat deze bij een onclick de geplaatste achtergrond van de tabel (stippen.jpg) vervangt en vice versa.

[ Voor 24% gewijzigd door Verwijderd op 16-08-2005 01:53 ]

dinsdag 16 augustus 2005 02:03

Acties:

NMe

Quia Ego Sic Dico.

Het gaat mis omdat je de eerste keer nog geen background-image hebt ingesteld in CSS, en daarom ook de eerste keer document.getElementById('table1').style.backgroundImage niet gelijk is aan "url(buttonpages/stippen.jpg)".

Je hebt nu background="buttonpages/stippen.jpg" staan in je table-tag. Maak daar eens style="background-image: url(buttonpages/stippen.jpg)" van.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

dinsdag 16 augustus 2005 02:15

Acties:

Verwijderd

Topicstarter

Het schijnt te werken

Ik heb nu dit staan:

code:

<html>
<head>
<script type="text/javascript">
myImage1 = new Image();
myImage1.src = "buttonpages/artback.jpg";


function swap()
{
if (document.getElementById('table1').style.backgroundImage=='url(buttonpages/stippen.jpg)')
{
document.getElementById('table1').style.backgroundImage='url(buttonpages/artback.jpg)';
}
else
{
document.getElementById('table1').style.backgroundImage='url(buttonpages/stippen.jpg)';
}
}
</script>
</head>

<body bgcolor="#000000">
<form>
<table ID="table1" style="background-image: url(buttonpages/stippen.jpg)" border="0" cellpadding="0" cellspacing="0" width="100%" height="80%">
<tr>
  <td>
    <INPUT TYPE="button" VALUE="Button"
    ONCLICK="swap()" style="font-family: Arial">
  </td>
</tr>
</table>
</form>
</body>
</html>

voor de zekerheid: dus nu wordt artback.jpg gepreload, zodat hij bij onlick snel weergegeven kan worden?

dinsdag 16 augustus 2005 02:39

Acties:

Verwijderd

Topicstarter

Ik vroeg me opeens af: Is het mogelijk om op een "zelfde" manier een layer over een achtergrond picture te leggen?

Dus stel je voor je hebt een foto als achtergrond (van bijv. een landschap) en je hebt een transparant plaatje met gekleurde stippen. Bij onclick legt die de layer met stippen over de achtergrond zodat er een landschap met daarop gekleurde stippen ontstaat. Zou zoiets kunnen en hoe?

[ Voor 3% gewijzigd door Verwijderd op 16-08-2005 02:40 ]

dinsdag 16 augustus 2005 02:44

Acties:

NMe

Quia Ego Sic Dico.

Misschien dat landschap op je table-tag zetten, en je td-tag zo aanpassen dat hij switcht tussen stippen of geen plaatje? Geen idee eigenlijk of dat zomaar kan, en het klinkt nogal smerig, maar het zal vast wel werken. Overigens is wat je nu doet (een tabel met maar één cel) ook nogal smerig, daar zijn div's voor uitgevonden.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

dinsdag 16 augustus 2005 02:54

Acties:

Verwijderd

Topicstarter

hoe geef je dat aan: geen plaatje ?

Als in:

function swap()
{
if (document.getElementById('table1').style.backgroundImage=='url(buttonpages/stippen.jpg)')
{
document.getElementById('table1').style.backgroundImage=geen plaatje;
}
else
{
document.getElementById('table1').style.backgroundImage='url(buttonpages/stippen.jpg)';
}
}

Met " " ?

[ Voor 42% gewijzigd door Verwijderd op 16-08-2005 02:56 ]

dinsdag 16 augustus 2005 04:00

Acties:

NMe

Quia Ego Sic Dico.

Kijk hier eens onder het kopje "possible values".

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

dinsdag 16 augustus 2005 09:00

Acties:

crisp

Devver

Pixelated

Overigens heeft preloaden voor IE geen enkel nut bij background-image swaps; dankzij een bug in IE zal hij de background-image meestal weer opnieuw gaan ophalen, en daar is geen echte work-around voor.
Je kan dus beter een gewone image gebruiken, met andere elementen absoluut gepositioneerd daar overheen.

[ Voor 21% gewijzigd door crisp op 16-08-2005 09:02 ]

Intentionally left blank

dinsdag 16 augustus 2005 13:24

Acties:

Verwijderd

Topicstarter

i.v.m. de al bestaande opmaak is absoluut positioneren geen optie.

Wat bedoel je met 'meestal'?

[ Voor 24% gewijzigd door Verwijderd op 16-08-2005 13:25 ]

dinsdag 16 augustus 2005 16:00

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op dinsdag 16 augustus 2005 @ 13:24:
i.v.m. de al bestaande opmaak is absoluut positioneren geen optie.

Wat bedoel je met 'meestal'?

Mogelijk dat hij het wel goed doet als je de caching zo instelt dat hij altijd eerst in de cache kijkt, maar bijna niemand zal dat zo ingesteld hebben. Zelfs dan is het maar de vraag of het dan wel goed gaat. Ik gebruik al tijden geen IE meer en ben ook al compleet afgestapt van background-image swapping voor IE.

Intentionally left blank

woensdag 17 augustus 2005 02:16

Acties:

Verwijderd

Topicstarter

als jij toch niet meer met IE werkt wat is dan het probleem? :]

dinsdag 30 augustus 2005 21:02

Acties:

Verwijderd

Topicstarter

Hoe zou je ook in IE dan een image kunnen/moeten preloaden?

..en daar is geen echte work-around voor.
Je kan dus beter een gewone image gebruiken, met andere elementen absoluut gepositioneerd daar overheen.

Bedoel je bijvoorbeeld een tabel met de te preloaden achtergond image en dan in een cel weer een zwart image. om de pagina weer geheel zwart te maken?

[ Voor 74% gewijzigd door Verwijderd op 30-08-2005 21:06 ]

dinsdag 30 augustus 2005 21:16

Acties:

crisp

Devver

Pixelated

JavaScript:

// Preloaden
var image1 = new Image(); image1.src = 'http://www.site.com/images/image1.gif';
var image2 = new Image(); image2.src = 'http://www.site.com/images/image2.gif';

// image swappen
function swap(img)
{
    if (img.src == image1.src) img.src = image2.src;
    else img.src = image1.src;
}

preloaden van background-images heeft voor IE geen enkele zin

Intentionally left blank

woensdag 31 augustus 2005 03:38

Acties:

Verwijderd

Topicstarter

Maar ik heb een background image staan. Het is de bedoeling dat die geswapt wordt naar een gepreloade ander. En vice verca.

Ik doe het nu als volgt (waarbij <body background="artback.jpg">)

code:

myImage1 = new Image();
myImage1.src = "artback.jpg";
myImage2 = new Image();
myImage2.src = "stippen.jpg";

function swap()
{
if (document.body.style.backgroundImage=='url(stippen.jpg)')
{
document.body.style.backgroundImage='url(artback.jpg)';
}
else
{
document.body.style.backgroundImage='url(stippen.jpg)';
}
}

Dus die artback.jpg hoef ik niet meer te preloaden?

[ Voor 22% gewijzigd door Verwijderd op 31-08-2005 03:47 ]

Pagina: 1

Reageer