Bild ändern

D

D@nger

Hallo, sorry, mit ist kein Titel eingefallen. Also ich habe hier eine HTML-Datei mit ein wenig Javascript. Das Javascript ist für das Menü gedacht. Und zwar werden die Unterpunkte entweder aus- oder eingeblendet. So, jetzt möchte ich aber auch noch das Bild ändern. "pfeilu.jpg" soll angezeigt werden, wenn das Menü aufgeklappt wird. Hier mal der Code:
HTML: 
<script type="text/javascript">
function switchlayer(Layer_Name)
{

       document.getElementById(Layer_Name).style.display=
	   (document.getElementById(Layer_Name).style.display=='block') ? 'none' : 'block';
	   
	      
	   
       if (document.getElementById(Layer_Name).style.display=="block")
	    {
	     document.images.pfeil1.src="images/pfeilu.jpg";
	    }
       else
        {
	     document.images.pfeil1.src="images/pfeil.jpg";
	    }
   	    
}    
</script>

HTML: 
 <img id="pfeil1" border="0" src="http://www.tutorials.de/forum/images/pfeil.jpg" width="30" height="10"><font face="Arial"><span style="font-size: 13pt"><a onclick="javascript:switchlayer('bilder_wohnung'); return false;" target="I1" href="bilder_wohnung.htm">Bilder Wohnung</a><font color="#A68B79">
  </font></span> </font>
  <div id="bilder_wohnung" style="display:none;">
  <font face="Arial" color="#A68B79">&nbsp;&nbsp; &nbsp; &nbsp; </font>
  <font face="Arial" size="2" color="#A68B79">
  <span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">
  <a target="I1" href="bilder_wohnung_10grechts.htm">1OG rechts</a></span></font><font face="Arial" color="#A68B79"><br>
  &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; </font><font face="Arial" size="2" color="#A68B79">
  <span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">
  <a target="I1" href="bilder_wohnung_10glinks.htm">1OG links</a></span></font><font face="Arial" color="#A68B79"><br>
  &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; </font><font color="#A68B79">
  <a target="I1" href="bilder_wohnung_20glinks.htm"><font size="2">
  <span style="font-family: Arial">2</span></font><font face="Arial" size="2"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">OG 
  links</span></font></a></font><font face="Arial" color="#A68B79"><br>
  
  &nbsp;&nbsp; &nbsp; &nbsp; </font><font face="Arial" size="2" color="#A68B79">
  <span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">
  <a target="I1" href="bilder_wohnung_20grechts.htm">2OG rechts</a><br>
&nbsp;&nbsp;</span></font><font face="Arial" color="#A68B79">&nbsp;&nbsp;&nbsp; </font>
  <font face="Arial" size="2" color="#A68B79">
  <span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">
  &nbsp;<a target="I1" href="bilder_wohnung_30g.htm">30G</a><br>
&nbsp;&nbsp;</span></font><font face="Arial" color="#A68B79">&nbsp;&nbsp; </font>
  <font face="Arial" size="2" color="#A68B79">
  <span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">
  &nbsp;&nbsp;<a target="I1" href="bilder_wohnung_paterre.htm">Paterre</a></span></font></div>
   
   <br>
   
   
  <img id="pfeil2" border="0" src="http://www.tutorials.de/forum/images/pfeil.jpg" width="30" height="10"><font face="Arial"><a href="" onclick="javascript:switchlayer('belegunskalender'); return false;"><span style="font-size: 13pt">Belegunskalender</span></a></font><span style="font-size: 13pt">
  </span>
 <div id="belegunskalender" style="display:none;">
  <font face="Arial" color="#A68B79">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; </font>
  <font face="Arial" size="2" color="#A68B79">
  <span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">
  <a target="I1" href="calendar/10grechts/yearcal.php?op=yearcal&ycyear=2006&catview=0">1OG rechts</a></span></font><font face="Arial" color="#A68B79"><br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font><font face="Arial" size="2" color="#A68B79">
  <span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">
  <a target="I1" href="calendar/10glinks/yearcal.php?op=yearcal&ycyear=2006&catview=0">1OG links</a></span></font><font face="Arial" color="#A68B79"><br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font><font color="#A68B79">
  <a target="I1" href="calendar/20glinks/yearcal.php?op=yearcal&ycyear=2006&catview=0"><font size="2">
  <span style="font-family: Arial">2</span></font><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><font face="Arial" size="2">OG 
  links</font></span></a></font><font face="Arial" color="#A68B79"><br>
  
  &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; </font><font face="Arial" size="2" color="#A68B79">
  <span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">
  <a target="I1" href="calendar/20grechts/yearcal.php?op=yearcal&ycyear=2006&catview=0">2OG rechts</a><br>
&nbsp;&nbsp; </span></font>
  <font face="Arial" color="#A68B79">&nbsp;&nbsp;&nbsp; </font>
  <font face="Arial" size="2" color="#A68B79">
  <span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">
  <a target="I1" href="calendar/30g/yearcal.php?op=yearcal&ycyear=2006&catview=0">30G</a><br>
&nbsp;&nbsp;</span></font><font face="Arial" color="#A68B79">&nbsp;&nbsp;&nbsp; </font>
  <font face="Arial" size="2" color="#A68B79">
  <span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">
  &nbsp;<a target="I1" href="calendar/paterre/yearcal.php?op=yearcal&ycyear=2006&catview=0">Paterre</a></span></font><br>
 </div>
 <br>
</div>

So, das Problem besteht darin, dass egal ob ich auf den ersten oder den 2. Menüeintrag klicke, immer das Bild des ersten geändert wird.
Ich weiß, der Code ist grausam, aber vielleicht kann mit ja trotzdem jemand helfen.
 
Zuletzt bearbeitet von einem Moderator:
D@nger hat gesagt.:
Hallo, sorry, mit ist kein Titel eingefallen. Also ich habe hier eine HTML-Datei mit ein wenig Javascript. Das Javascript ist für das Menü gedacht. Und zwar werden die Unterpunkte entweder aus- oder eingeblendet. So, jetzt möchte ich aber auch noch das Bild ändern. "pfeilu.jpg" soll angezeigt werden, wenn das Menü aufgeklappt wird. Hier mal der Code:

So, das Problem besteht darin, dass egal ob ich auf den ersten oder den 2. Menüeintrag klicke, immer das Bild des ersten geändert wird.
Ich weiß, der Code ist grausam, aber vielleicht kann mit ja trotzdem jemand helfen.
Zum Vergrößern anklicken....

Ich glaub das wird dir beim Problem nicht weiter helfen aber warum benutzt du nicht einfach else?

Code: 
if (document.getElementById(Layer_Name).style.display=="block")
	    {
	     document.images.pfeil1.src="http://www.tutorials.de/forum/images/pfeilu.jpg";
	    }
    else{
	     document.images.pfeil1.src="http://www.tutorials.de/forum/images/pfeil.jpg";
	    }

So wie ich den Code verstehe sind nur 2 Antworten/Varianten zu beachten. Ich kenne mich zwar nicht so mit Javascript aus aber dafür mit C und Basic - ein großer unterschied ist das nicht.
 
Zuletzt bearbeitet:
Hallo, danke, das habe ich auch schon versucht, aber das hat den gleichen Effekt. Hast du sonst noch eine Idee?
 
Zuletzt bearbeitet von einem Moderator:
D@nger hat gesagt.:
Hallo, danke, das habe ich auch schon versucht, aber das hat den gleichen Effekt.
Zum Vergrößern anklicken....

hmm, ich glaub der schlüssel ist "block" ich glaub die zwicken sich, als Antwort. gebe none und was anderes an z.B. "block2" an. Ich kenn aber wie gesagt nicht die Funktion/Objekt die davor steht, weiss nicht so genau was die bewirken soll.
 
Moment ich sehe keinen Sinn in der Abfrage, warum schreibst du nicht gleich so:
Code: 
<script type="text/javascript">
function switchlayer(Layer_Name)
{
       if (document.getElementById(Layer_Name).style.display=="block")
	    {
	     document.images.pfeil1.src="http://www.tutorials.de/forum/images/pfeilu.jpg";
	    }
       else
        {
	     document.images.pfeil1.src="http://www.tutorials.de/forum/images/pfeil.jpg";
	    }
   	    
}    
</script>

Edit: Ahm es geht sogar noch optimerter seh ich gerade aber Probier erst mal
 
Zuletzt bearbeitet:
Block bedeutet, dass der Div-Container eingeblendet wird. Wenn ich das in block2 ändere würde es wahrscheinlich nicht funktionieren.
 
:D ohhhh mann, das ist ja nicht zu fassen. Das habe ich total übersehen. So ist das bei Javascript nun mal :D ok vielen Dank.
 
Hallo, hmmm, also ich verstehe das immer noch nicht so ganz, denn es funktioniert immer noch nicht...
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück