[JS] verander class op basis van id reset andere id's - Softwareontwikkeling

maandag 26 juni 2006 16:41

Acties:

Verwijderd

Topicstarter

Tweakers,

Ik probeer een foto overzichtje m.b.v. javascript mooi weer te geven. Ik had zelf ingedachten dat de volgende 2 zaken mooi zouden zijn:

[list=1]Zodra men op een thumbnail klikt dan wordt de grote versie met een fade effect getoond;[/list] [list=2]Thumbnails zijn standaard gedeeltelijk doorzichtig, alleen de op dat moment getoond thumnail wordt normaal getoond;[/list]

Hiervoor heb ik een 2-tal script bij elkaar gevoegd wat nu bijna volledig werkt. Het enige wat niet werkt is dat zodra de class van de geselecteerde thumbnail gewijzigd wordt (zodat deze normaal getoond wordt) deze class niet meer terug gezet wordt op het moment dat ik een andere thumbnail selecteer.

Nu is het dus zo dat alle thumbnails die aangeklikt zijn normaal getoond worden, terwijl alleen de op dat moment geselecteerde normaal getoond moet worden. Kan een van jullie me op weg helpen? Ik ben zelf al bezig geweest een soort van reset functie op basis van element names te maken, alleen deze werkte niet.

Ik heb het idee dat het heel simpel kan, maar ik kom er zelf niet uit. Hier de code die ik tot dusver heb:

code:

<html>
<head>
<title>Producten overzicht</title>
<style type="text/css">
.shining {
filter:alpha(opacity=30);
-moz-opacity:0.3;
}

.highlighted {
border: 1px solid black;
}
</style>

<script language="JavaScript">
 function LoadGallery(pictureName, imageFile)
 {
  if (document.all)
  {
   document.getElementById(pictureName).style.filter="blendTrans(duration=0.5)";
   document.getElementById(pictureName).filters.blendTrans.Apply();
  }
  document.getElementById(pictureName).src = imageFile;
  if (document.all)
  {
   document.getElementById(pictureName).filters.blendTrans.Play();
   identity=document.getElementById(pictureName);
  }
 }
</script>
<script language="JavaScript">
 function ChangeClass(pictureId, className)
 {
  if (document.all)
  {
   document.getElementById(pictureId).className = className;
  }
 }
</script>
</head>

<body topmargin="2" leftmargin="4">
 <table border="0" cellpadding="2">
  <tr>
   <td>[img]"image1.jpg"[/img]<br>
   <td><a href="#_self" onclick="LoadGallery('Producten','image1.jpg'); ChangeClass('1', 'highlighted')">[img]"image1.jpg"[/img]</a></td>
   <td><a href="#_self" onclick="LoadGallery('Producten','image2.jpg'); ChangeClass('2', 'highlighted')">[img]"image2.jpg"[/img]</a></td>
   <td><a href="#_self" onclick="LoadGallery('Producten','image3.jpg'); ChangeClass('3', 'highlighted')">[img]"image3.jpg"[/img]</a></td>
   <td><a href="#_self" onclick="LoadGallery('Producten','image4.jpg'); ChangeClass('4', 'highlighted')">[img]"image4.jpg"[/img]</a></td>
   <td>
  </tr>
</table>
</body>
</html>

maandag 26 juni 2006 18:06

Acties:

crisp

Devver

Pixelated

Bijhouden in een global var welk element je moet resetten
verder nog wat puntjes:
- een id mag niet met een cijfer beginnen
- gebruik geen anchor-element als het geen link is; zet in dit geval de onclick gewoon op je image - kan je ook gelijk mbv het 'this' keyword een referentie meegeven
- wat is het nut van de document.all afvragingen? IE4 is al uitgestorven hoor

Kijk liever of de filters property bestaat als je zonodig een IE-only filter wilt toepassen.

[ Voor 12% gewijzigd door crisp op 26-06-2006 18:07 ]

Intentionally left blank

Reageer