Imagewechsel bei Klick

[tkoenig]

Hallo,

meine auf- und zuklappbaren Datensätze werden durch Klick auf ein Image gesteuert. ich hätte gerne, dass sich das Image entsprechend der Auswahl auf- oder zuklappen ändert. Das folgende JavaSkript verwende ich zum auf- und zuklappen meiner Datensätze:

echo '<script language="JavaScript">
function toggle(control){
  var elem = document.getElementById(control);
  if(elem.style.display == "none"){
    elem.style.display = "block";
    elem.style.background-image = "http://www.html.de/images/klappzu.bmp";
}
  else{
    elem.style.display = "none";
    elem.style.background-image = "http://www.html.de/images/klappauf.bmp";
}}
</script>';

Der Aufruf erfolgt so:

<a href="javascript:toggle(' . $zeile['id'] . ')">
<img src="http://www.html.de/images/klappauf.bmp" align="top" alt="auf-/zuklappen" border="0"></a>

Lasse ich die beiden elem.style.background-image Angaben oben im Skript weg, funktioniert zumindest das auf- und zuklappen einwandfrei. Füge ich sie hinzu, geht leider gar nichts, weder das auf- und zuklappen und natürlich schon gar nicht der Tausch der Images. Was mache ich falsch?

Ciao
Thomas

 

[bodil]

Richtig ist backgroundImage statt background-image. (Letzteres wäre eine Subtraktion ...)

 

[tkoenig]

Oh, stimmt. War wohl 'ne Fehlinformation der Frau Google ;-)
Das Blättern geht jetzt, aber es bleibt beharrlich auf dem Image klappauf.bmp, wechselt nicht auf klappzu.bmp. Da muss ich doch bestimmt was am img src im Aufruf machen, oder?

 

[bodil]

Du hast den Fehler zwei mal behoben? Und du hast tatsächlich vor bmp-Dateien einzubinden??

 

[tkoenig]

Ja, sowohl für IF als auch für ELSE. Sind nur ganz kleine Bitmaps, und vorerst eh nur zu Testzwecken...

 

[tkoenig]

Ich sollte vielleicht dazu sagen, dass das Ganze in einer While-Schleife steckt:

while ($zeile = mysql_fetch_array($db_erg, MYSQL_ASSOC))
...
echo '<a href="javascript:toggle(' . $zeile['id'] . ')">';
<img src="http://www.html.de/images/klappauf.bmp" align="top" alt="auf-/zuklappen" border="0"></a>';
...
echo '<div id="' . $zeile['id'] . '" style="display: none;">';
...

Ab dem DIV sind die Datensätze zugeklappt.

 

[bodil]

Wenn du jetzt z.B. im FF ne Web-Developer-Toolbar installiert hättest, bekämst du möglicherweise einen Fehler angezeigt?

 

[tkoenig]

Hab ich leider nicht.

Geht sowas wie:
<a href="javascript:toggle(' . $zeile['id'] . ')">elem.style.backgroundImage</a>
oder irgendwas in der Art?

Ciao
Thomas

 

[bodil]

(Web-Developer-Toolbar lohnt sich. Und kostet nichts.)
Jedenfalls: Hast du mal den HTML-Code gecheckt, den dir dein PHP generiert?

 

[tkoenig]

Problem gelöst!
Falls es jemanden interessiert, hier der Code:

JavaScript

<script language="JavaScript">
function toggle(showHideDiv, switchImgTag){
  var ele = document.getElementById(showHideDiv);
  var imageEle = document.getElementById(switchImgTag);
  if(ele.style.display == \'block\'){
    ele.style.display = \'none\';
    imageEle.innerHTML = \'<img src="http://www.html.de/images/klappauf.bmp" alt="aufklappen" border="0">\';}
  else{
    ele.style.display = \'block\';
    imageEle.innerHTML = \'<img src="http://www.html.de/images/klappzu.bmp" alt="zuklappen" border="0">\';}}
</script>

Aufruf:

<a id="a' . $zeile['id'] . '" href="javascript:toggle(\'' . $zeile['id'] . '\', \'a' . $zeile['id'] . '\');" ><img src="http://www.html.de/images/klappauf.bmp" alt="aufklappen" border="0"></a>

Aufruf weiter (ab hier zugeklappt):

<div id="' . $zeile['id'] . '" style="display: none;">
...
<div>

Ciao
Thomas

 

[DarkCross44]

Bitte... bitte.. kein Bild im bmp-format!

bmp ist der letzte müll! Kein schwein verwendet das mehr, da es eine sehr schlechte komprimierung hat. Seeeeehr ungeeignet fürs Web!

nimm lieber jpeg oder png

 

[tkoenig]

:-)
Sind doch immer noch die Testimages. Es geht erstmal um die Funktionalität, die Feinheiten dann später.

...so, hab die Bitmaps konvertiert in png's. Jetzt sind sie statt 2k nur noch 1k groß :-)