✔ Div ein/ausblenden mit blendtrans

[Schokohazi]

Hallo,

es geht um folgende Site: http://expl0sive.org/splitter/

Die einzelnen Layer sollen sich bei Klick auf die Buttons ein- und ausblenden, habe dafür das blendtrans Script genommen. Wie man aber sieht, scheint zuerst der Frame aber sehr kurz auf, geht wieder weg und wird dann wieder eingeblendet, da ich nicht weiß wie ich das in die Ein-/und Ausblendfunktion der Layer richtig einbaue, momentan siehts so aus:

<a href="javascriptpacity('hg_infos', 0, 100, 500);" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('infos','','images/buttons/infos_roll.png',1)"><img src="images/buttons/infos.png" alt="Termine" name="infos" border="0" id="infos" onclick="MM_showHideLayers('hg_band','','hide','hg_infos','','show','hg_merch','','hide')" /></a>

Das Ausblenden bei Klick auf einen anderen Button sollte außerdem auch mit dem Script geschehen.

 

[Quaese]

Hi,

die Funktion MM_showHideLayers ist überflüssig. Stattdessen versteckst du die Elemente #hg_infos, #hg_band, #hg_merch nicht mit der visibility-Eigenschaft, sondern machst sie transparent.

#hg_infos, #hg_band, #hg_merch{
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}

Für das Ein- und Ausblenden wird eine kleine Funktion definiert. Dieser wird die ID des Elements übergeben, das eingefadet werden soll.

var arrAll = new Array("hg_infos", "hg_band", "hg_merch");

function myToggle(strID){
  for(var i=0; i<arrAll.length; i++){
    changeOpac(0, arrAll[i]);
  }

  opacity(strID, 0, 100, 500);

  return false;
}

Diese Funktion wird im onclick-Ereignis des zugehörigen Links aufgerufen. Um die Standardfunktionalität des Links zu unterbinden, wird false zurückgegeben.

Ein Aufruf könnte wie folgt aussehen:

<div id="button_infos"><a href="#" onclick="return myToggle('hg_infos);" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('infos','','images/buttons/infos_roll.png',1)"><img src="images/buttons/infos.png" alt="Termine" name="infos" border="0" id="infos" /></a></div>

Vielleicht kannst du damit etwas anfangen.

Ciao
Quaese

 

[Schokohazi]

Vielen Dank, funktioniert perfekt!

Hab allerdings noch zwei Probleme mit dem IE, erstens werden die DIVs für Merchandise und Info nur abgeschnitten angezeigt und die Überschriften der DIVs sind im IE höher plaziert als im FF?

 

[Maik]

Hi,

Hab allerdings noch zwei Probleme mit dem IE, erstens werden die DIVs für Merchandise und Info nur abgeschnitten angezeigt

schau mal in das Stylesheet, was für die betroffenen Boxen als Breite bzw. Höhe festgelegt ist - definitiv zu klein, würd' ich jetzt einfach mal behaupten, und daran hält sich der IE7+

und die Überschriften der DIVs sind im IE höher plaziert als im FF?

Hier dürfte diese CSS-Regelerweiterung weiterhelfen, um die unterschiedlichen Initialwerte dieser Eigenschaften in den Browsern auszugleichen:

h1 {
margin:0;
padding:10px;
}

mfg Maik