Bild nach Klick austauschen

[Tolwin]

Hallo Forum,

ich versuche im Moment eine Seite mit mehreren "Anreisser-Texten"
zu erstellen. Unter jedem Text soll ein Pfeil nach unten
als Image erschein. Auf diesen kann man klicken und der umfangreichere Text öffnet sich.
Habe das bisher so gelöst

Javascript
function showhide(id){
 if (document.getElementById){
  obj = document.getElementById(id);
  if (obj.style.display == "none"){
   obj.style.display = "inline";
  } else {
   obj.style.display = "none";
  }
 }
}

HTML

<p>Anreisser Text <span style="display: none;" id="div01">
weiterer Text  .... blablabla </span>
<a href="#" onclick="showhide('div01'); return(false))">
<img src="images/icons/arrow_down.png" name="downImage"></a>
</p>

Dieser Pfeil soll sich bei geöffnetem Text als up Pfeil erscheinen (image in arrow_up.png austauschen).
Wie kann ich das realisieren? Ein mögliches Problem könnte auch werden,
dass ich mehrere Text mit o.g. Pfeilen habe und diese unabhängig voneinander
funktionieren müssen. Per Google habe ich leider nichts passendes gefunden.

Vielen Dank und schönen Abend
Tolwin

[wucher wichtel]

Hallo!

Wie kann ich das realisieren?

Verändere per onclick die src-Eigenschaft des Bildes, das verändert werden soll.

ciao, ww

[Tolwin]

Hi wucher wichtel,

habe es in meine Funktion eingebaut

function showhide(id){
 if (document.getElementById){
  obj = document.getElementById(id);
  if (obj.style.display == "none"){
   obj.style.display = "inline";
   picture[1] = new Image();
   picture[1].src = "images/icons/arrow_down.png";
  } else {
   obj.style.display = "none";
    picture[0] = new Image();
   picture[0].src = "images/icons/arrow_up.png";
  }
 }
}

aber wie genau kann ich picture[] dem image im HTML Text zuweisen?

<a href="#" onclick="showhide('div01'); return(false); arrowImage(document.upImage)">
<img src="images/icons/arrow_down.png" name="downImage"></a>

Grüße
Tolwin

[wucher wichtel]

Hallo!

aber wie genau kann ich picture[] dem image im HTML Text zuweisen?

Da verstehe ich nicht genau, was du damit meinst. Ich würde es mit IDs lösen:

  
function showhide(id){  
 if (document.getElementById){  
  obj = document.getElementById(id);  
  if (obj.style.display == "none"){  
   obj.style.display = "inline";  
   document.getElementById("picture").src = "images/icons/arrow_down.png";  
  } else {  
   obj.style.display = "none";  
   document.getElementById("picture").src = "images/icons/arrow_up.png";  
  }  
 }  
}  

  
<a href="#" onclick="showhide('div01'); return(false);">  
<img src="images/icons/arrow_down.png" name="downImage" id="picture"></a>  

ciao, ww

[qwert]

so ist es etwas flexibler (und der überflüssige Link ist auch weg)

function showhide(id){

if (document.getElementById){
  obj = document.getElementById(id);

bild = document.getElementById(id+"picture");

if (obj.style.display == "none"){
   obj.style.display = "inline";

bild.src = "images/icons/arrow_down.png";
      bild.alt="reduzieren";

} else {
   obj.style.display = "none";

bild.src = "images/icons/arrow_up.png";
      bild.alt = "erweitern";

}
}
}

>   
> ~~~html
  
<img src="images/icons/arrow_down.png" name="downImage" id="div01picture" onclick="showhide('div01');" alt="erweitern">

Tipp: erstmal alles anzeigen lassen, dann gleich nach dem Laden der Seite mittels JavaScript (onload) einklappen. Sonst bekommen Surfer ohne JavaScript kaum was mit von deiner Seite.