[Javascript] Hoe parent van object opvragen - Softwareontwikkeling

donderdag 18 december 2003 18:33

Acties:

Statsidioot

Topicstarter

Hoi allemaal,

Ik ben bezig met een simpel script om een plaatje op normale grootte te laten zien als je er met je muis overheen gaat, en anders laat hij 'm maar half zo groot zien.
Dat heb ik al werkend gekregen, maar als ik nou meerdere plaatjes op die pagina heb, waarvan er tussenzitten die niet die functionaliteit moeten krijgen, heb ik iets anders bedacht.

Bij onLoad ga ik toch al 'n functie in, dus heb ik daar meteen een array van alle images laten maken, en hun originele afmetingen.

Nu probeer ik, om alleen de images in de array te zetten die nu in een bepaalde tabel staan.
De tabel heb ik het id "plaatjesTabel" gegeven om heb zo te herkennen.

Nu is dus de vraag:
Als ik een object heb, een plaatje bv. Hoe kan ik daar het parent object ( bv de tabel ) krijgen?

ik doe nu door document.images[i].Parent
maar dat werkt dus niet.

misschien kunnen jullie mij helpen, hier de code zoals ik hem nu heb:

PHP:

<html>
<head>
<script language="JavaScript">
<!-- hide
var plaatjes = new Array();

function plaatjeGroot(plaatje)
{
  for (i=0;i<plaatjes.length;i++)
  {
    if (plaatje == plaatjes[i].image)
    {
      plaatjes[i].image.width = plaatjes[i].width;
    }
  }  
}

function plaatjeKlein(plaatje)
{
  for (i=0;i<plaatjes.length;i++)
  {
    plaatjes[i].image.width = plaatjes[i].width / 2;
  }  
}

function start()
{
  i = 0;
  j = 0;
  while (document.images[i] != null)
  {
    if (document.images[i].Parent == document.getElementById("plaatjesTabel"))
    {
      plaatje = new Object();
      plaatje.image = document.images[i];
      plaatje.width = document.images[i].width;
      plaatjes[j] = plaatje;
      j = j+1;
    }
    i = i+1;
  }
  
  alert("aantal plaatjes: "+j);
  
  for (i=0;i<plaatjes.length;i++)
  {
    plaatjes[i].image.width = plaatjes[i].width / 2;
  }  
}

// -->
</script>
</head>
<body onLoad="start()">
<center>
  [img]"plaatje.gif"[/img] 
</center>
<table id="plaatjesTabel" border="0" align="center"
  cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="middle">
      <img src="plaatje.gif" onMouseOver="plaatjeGroot(this)"
         onMouseOut="plaatjeKlein(this)"> 
      <img src="plaatje.gif" onMouseOver="plaatjeGroot(this)"
         onMouseOut="plaatjeKlein(this)">
    </td>
  </tr>
</table>
</body>
</html>

php genoemt voor de kleurencodering hier

maar ik vergelijk dus de tabel met het parent van een plaatje, ik weet niet eens of dat klopt.

kan iemand mij hier mee helpen?

[ Voor 20% gewijzigd door KompjoeFriek op 18-12-2003 18:35 ]

WhatPulse! - Rosetta@Home - Docking@Home

donderdag 18 december 2003 18:41

Acties:

André

Analytics dude

parentNode?

donderdag 18 december 2003 18:43

Acties:

Verwijderd

.parentNode moet je hebben. 'k Heb verder niet gekeken naar je code.
ppk heeft een handige dom tabel als je het even niet meer weet:
http://www.quirksmode.org/dom/contents.html

donderdag 18 december 2003 18:53

Acties:

KompjoeFriek

Statsidioot

Topicstarter

Jullie hebben gelijk, parentNode werkt!

ik heb het getest door de border van de tabel op 1 te zetten, en dan doe ik:
document.images[2].parentNode.style.height = 100;
en dat werkt ook nog

maar als ik hem vergelijk met de tabel werkt het niet

nou dat ik dit typ, bedenk ik dat de cell de parent van de image is, en niet de tabel

nadat ik de cell het juiste ID mee gaf werkte het perfect.

BEDANKT!

WhatPulse! - Rosetta@Home - Docking@Home

donderdag 18 december 2003 19:01

Acties:

crisp

Devver

Pixelated

als je het echt helemaal volgens de dom wil doen:

JavaScript:

1	document.getElementsByTagName('IMG').items(2).parentNode.style.height='100px';

Intentionally left blank

donderdag 18 december 2003 19:25

Acties:

KompjoeFriek

Statsidioot

Topicstarter

is de DOM manier cross browser?

WhatPulse! - Rosetta@Home - Docking@Home

donderdag 18 december 2003 19:26

Acties:

André

Analytics dude

Als het goed is wel

donderdag 18 december 2003 19:33

Acties:

KompjoeFriek

Statsidioot

Topicstarter

Nou werkt het dus niet meer

De eigenschap of methode wordt niet ondersteund door dit object

PHP:

1	while (document.getElementsByTagName('IMG').items(i) != null)

was

PHP:

1	while (document.images[i] != null)

WhatPulse! - Rosetta@Home - Docking@Home

donderdag 18 december 2003 19:38

Acties:

crisp

Devver

Pixelated

die null check is ook erg ranzig, je kan beter de length eerst uitvragen

Intentionally left blank

donderdag 18 december 2003 19:41

Acties:

André

Analytics dude

PHP:

1	while (document.getElementsByTagName('IMG').items[i] != null)

donderdag 18 december 2003 19:43

Acties:

KompjoeFriek

Statsidioot

Topicstarter

kan dat ook al?

WhatPulse! - Rosetta@Home - Docking@Home

donderdag 18 december 2003 19:48

Acties:

Verwijderd

Doe gewoon slim, en doe écht DOM

document.images.item(nummertje)
document.images.namedItem('naampje')

Niet de overhead van document.getElementsByTagName, en toch DOM.
En ja, het is dus item, en niet items.

[ Voor 4% gewijzigd door Verwijderd op 18-12-2003 19:49 ]

donderdag 18 december 2003 21:13

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op 18 december 2003 @ 19:48:
Doe gewoon slim, en doe écht DOM

document.images.item(nummertje)
document.images.namedItem('naampje')
Niet de overhead van document.getElementsByTagName, en toch DOM.

is de images collection dan ook gewoon onderdeel van de DOM? Dat wist ik niet

Ik dacht dat browsers dat er alleen nog maar vanwege backwards compatibility in hadden zitten...

En ja, het is dus item, en niet items.

* crisp moet weer meer zelf gaan testen alvorens iets te posten...

[ Voor 12% gewijzigd door crisp op 18-12-2003 21:13 ]

Intentionally left blank

donderdag 18 december 2003 22:35

Acties:

KompjoeFriek

Statsidioot

Topicstarter

Heey bedankt Cheatah en crisp!

Ik heb 'm nou dan volgens DOM gemaakt, toch?

hij werkt iig goed hier

de versie die ik nou heb maakt de tabel (cell) waar de plaatjes in staan net zo groot als het grootste plaatje zodat de tekst eronder niet gek doet bij een mouseover.

PHP:

<html>
<head>
<script language="JavaScript">
<!-- hide
var plaatjes = new Array();
var tabelHoogte = 0;

function plaatjeGroot(plaatje)
{
  for (i=0;i<plaatjes.length;i++)
  {
    if (plaatje == plaatjes[i].image)
    {
      plaatjes[i].image.width = plaatjes[i].width;
    }
  }  
}

function plaatjeKlein(plaatje)
{
  for (i=0;i<plaatjes.length;i++)
  {
    plaatjes[i].image.width = plaatjes[i].width / 2;
  }  
}

function plaatjeStart()
{
  i = 0;
  j = 0;
  while (document.images.item(i) != null)
  {
    tabel = document.getElementById("plaatjesTabel");
    if (document.images.item(i).parentNode == tabel ||
    document.images.item(i).parentNode.parentNode == tabel)
    {
      plaatje = new Object();
      plaatje.image = document.images.item(i);
      plaatje.width = document.images.item(i).width;
      plaatjes[j] = plaatje;
      if (document.images.item(i).height > tabelHoogte)
      {
        tabelHoogte = document.images.item(i).height;
      }
      j = j+1;
    }
    i = i+1;
  }
  
  for (i=0;i<plaatjes.length;i++)
  {
    plaatjes[i].image.width = plaatjes[i].width / 2;
  }
  
  tabel.style.height = tabelHoogte;
}

function start()
{
  plaatjeStart();
}

// -->
</script>
</head>
<body onLoad="start()">
<center>
  [img]"plaatje.gif"[/img] 
</center>
<table border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td align="center" valign="top" id="plaatjesTabel">
      <img src="plaatje.gif" align="top"
onMouseOver="plaatjeGroot(this)" onMouseOut="plaatjeKlein(this)" alt="">
      <a href="http://www.test.nl" target="_blank">
        <img src="plaatje.gif" alt="" border="0" align="top"
onMouseOver="plaatjeGroot(this)" onMouseOut="plaatjeKlein(this)">
      </a>
    </td>
  </tr>
</table>
<center>
  testtekst
</center>
</body>
</html>

Wel ff zeggen als het nog niet volledig DOM (die standaard

) is hè.

WhatPulse! - Rosetta@Home - Docking@Home

donderdag 18 december 2003 23:59

Acties:

Verwijderd

Je html mag ook nog wel een verjongings kuurtje ondergaan, de <center> tag is toch wel erg oud/ranzig/nietDOM^tm

vrijdag 19 december 2003 01:23

Acties:

KompjoeFriek

Statsidioot

Topicstarter

Verwijderd schreef op 18 december 2003 @ 23:59:
Je html mag ook nog wel een verjongings kuurtje ondergaan, de <center> tag is toch wel erg oud/ranzig/nietDOM^tm

Hoe zorg ik er anders voor om de tekst recht onder de tabel te krijgen?
via een div krijg ik er meteen een regel tussen

[edit]
ik zie dat ik 't ook gebruik bij 't plaatje een stuk daar boven, daar moets ik 't gewoon ff snel typen, en zeg nou zelf wat type je sneller?

code:

1	<center></center>

of

code:

1	<div align="center"></div>

1e is 17 chars, 2e is 26 chars

[ Voor 37% gewijzigd door KompjoeFriek op 19-12-2003 01:27 ]

WhatPulse! - Rosetta@Home - Docking@Home

vrijdag 19 december 2003 01:30

Acties:

MAZZA

Barbie is er weer!

Maar center is deprecated