timoe: Bildwechsel durch Klicken auf h3 oder das Bild

SELF-Forum

Bildwechsel durch Klicken auf h3 oder das Bild

timoe
– Informationen zu den Bewertungsregeln

Hallo!

Für ein Accordion benötige ich eine Pfeil-Grafik, die sich ändert:

Ich habe einen Text (Klick mich) und daneben eine Grafik (ein Pfeil nach rechts).
Klicke ich nun auf den Text oder den Pfeil, so soll der Pfeil nach unten zeigen.

Und wenn man nochmal drauf klickt wieder nach rechts.

=> Die Pfeil-Grafik muss mit JavaScript ausgetauscht werden.

Ich habe es so hinbekommen, dass es beim Klicken auf den Pfeil ausgetauscht wird,
aber nicht, wenn man den Text anklickt.

Mein Code:

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>test</title>  
  
<style type="text/css">  
h3 {  
    display:inline;  
}  
</style>  
  
<script language="JavaScript" type="text/javascript">  
    function bildwechsel(Bildname) {  
	if(document.getElementById(Bildname).src.indexOf('pfeil-down.gif') == -1) {  
	    document.getElementById(Bildname).src = "pfeil-down.gif"  
	}	  
	else {  
	    document.getElementById(Bildname).src = "pfeil.gif"  
	}  
    }  
</script>  
</head>  
  
<body>  
<h3>Klick mich</h3>  
<img src="pfeil.gif" name="grafik" id="grafik" onClick="bildwechsel(this.name)">  
</body>  
</html>

Wie modifiziere ich <h3> und den JS-Code, dass man auch auf diesem den Pfeil wechseln kann? Ist sicher nur ne Kleinigkeit. Vielen Dank für Lsgsvorschläge :)

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bildwechsel durch Klicken auf h3 oder das Bild

    misterunknown Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Moin,

    <h3>Klick mich</h3>

    Dem H3-Element kannst du auch ein onclick-Attribut geben. Das würde dann so aussehen:
    onclick="bildwechsel('grafik')"

    oder, wenn du den Vorschlag von unten übernimmst:

    onclick="bildwechsel(document.getElementById('grafik'))"

    <img src="pfeil.gif" name="grafik" id="grafik" onClick="bildwechsel(this.name)">

    Mit onclick="bilwechsel(this)" würdest du direkt die Referenz auf das Bild übergeben und könntest innerhalb der Funktion einfach mit Bildwechsel.src arbeiten.

    Mindestens solltest du aber auch einen Wert übergeben, den du später auch abfragst. Das heißt, wenn du in der Funktion getElementById() arbeitest, übergib auch this.id und nicht this.name.

    Grüße Marco

    --
    Ich spreche Spaghetticode - fließend.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Bildwechsel durch Klicken auf h3 oder das Bild

    Der Martin
    +1 Informationen zu den Bewertungsregeln

    Hi,

    Für ein Accordion benötige ich eine Pfeil-Grafik, die sich ändert:
    Ich habe einen Text (Klick mich) und daneben eine Grafik (ein Pfeil nach rechts).
    Klicke ich nun auf den Text oder den Pfeil, so soll der Pfeil nach unten zeigen.
    Und wenn man nochmal drauf klickt wieder nach rechts.

    und gleichzeitig soll vermutlich ein nachfolgender Textblock ein- und ausgeblendet werden, richtig?

    => Die Pfeil-Grafik muss mit JavaScript ausgetauscht werden.

    Nein. Man kommt ganz ohne Javascript aus. Ich würde eine CSS-Lösung vorschlagen, die (beispielhaft) auf folgendem Markup aufbaut:

    <ol class="accordion">  
 <li>  
  <input type="checkbox" id="acc1"><label for="acc1">Abschnittsüberschrift</label>  
  <div>  
   Mehr Text. Viel mehr Text. Oder Bilder. Oder sonstwas.  
  </div>  
 </li>  
 ...  
</ol>

    Ich hab das gleich in eine Liste verpackt, weil dein Hinweis auf ein Accordion vermuten lässt, dass es eine ganze Reihe solcher Strukturen gibt. Der eigentliche Kniff ist nun, sowohl das label-Element, als auch den div-Container vom Zustand :checked der Checkbox abhängig zu machen, während die Checkbox selbst ausgeblendet wird (die klicksensitive Fläche soll der label-Text sein).

    ol.accordion  
 { list-style-type: none;    /* keine Bullets/Nummern anzeigen */  
 }  
  
ol.accordion input[type="checkbox"]  
 { display: none;            /* Checkbox ausblenden */  
 }  
  
ol.accordion input[type="checkbox"]~label  
 { background:  url(downarrow.png) no-repeat left top; /* Default: Pfeil nach unten */  
   padding-right: 20px;      /* Platz für Pfeil */  
 }  
ol.accordion input[type="checkbox"]:not(:checked)~div  
 { display: none;            /* div-Container ausblenden, wenn Checkbox nicht gewählt ist */  
 }  
ol.accordion input[type="checkbox"]:not(:checked)~label  
 { background:  url(rightarrow.png) no-repeat left top; /* Checkbox inaktiv: Pfeil nach rechts */  
 }

    Die scheinbar umständliche Konstruktion mit der Negation duch :not() bewirkt, dass Browser, die die Pseudoklassen :not und/oder :checked nicht unterstützen, als Notlösung alle Blöcke aufklappen.
    Hab ich noch was vergessen? ... Ich glaub, das war's im Wesentlichen.

    So long,
     Martin

    --
    Zwischen Leber und Milz
    passt immer noch'n Pils.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Bildwechsel durch Klicken auf h3 oder das Bild

      1UnitedPower Homepage des Autors
      – Informationen zu den Bewertungsregeln

      => Die Pfeil-Grafik muss mit JavaScript ausgetauscht werden.

      Nein. Man kommt ganz ohne Javascript aus. Ich würde eine CSS-Lösung vorschlagen, die (beispielhaft) auf folgendem Markup aufbaut:

      <ol class="accordion">

      <li>
        <input type="checkbox" id="acc1"><label for="acc1">Abschnittsüberschrift</label>
        <div>
         Mehr Text. Viel mehr Text. Oder Bilder. Oder sonstwas.
        </div>
      </li>
      ...
      </ol>

        
Das klingt ganz nach einem Fall für das [details-Element](http://www.w3.org/TR/html51/interactive-elements.html#the-details-element). In Chrome wird es sogar schon mit besagtem Pfeil dargetellt.  
  
~~~html
  
<ul class="accordion">  
   <li>  
      <details>  
         <summary>Abschnittsüberschrift</summary>  
         <div>  
            Mehr Text. Viel mehr Text. Oder Bilder. Oder sonstwas.  
         </div>  
      </details>  
   </li>  
</ul>
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Bildwechsel durch Klicken auf h3 oder das Bild

        timoe
        – Informationen zu den Bewertungsregeln

        => Die Pfeil-Grafik muss mit JavaScript ausgetauscht werden.

        Nein. Man kommt ganz ohne Javascript aus. Ich würde eine CSS-Lösung vorschlagen, die (beispielhaft) auf folgendem Markup aufbaut:

        <ol class="accordion">

        <li>
          <input type="checkbox" id="acc1"><label for="acc1">Abschnittsüberschrift</label>
          <div>
           Mehr Text. Viel mehr Text. Oder Bilder. Oder sonstwas.
          </div>
        </li>
        ...
        </ol>

        
>   
> Das klingt ganz nach einem Fall für das [details-Element](http://www.w3.org/TR/html51/interactive-elements.html#the-details-element). In Chrome wird es sogar schon mit besagtem Pfeil dargetellt.  
>   
> ~~~html
  

> <ul class="accordion">  
>    <li>  
>       <details>  
>          <summary>Abschnittsüberschrift</summary>  
>          <div>  
>             Mehr Text. Viel mehr Text. Oder Bilder. Oder sonstwas.  
>          </div>  
>       </details>  
>    </li>  
> </ul>  
>

        Danke für diesen Tipp. Ich habe es bisher mit javascript gelöst, siehe meinen thread:
        http://forum.de.selfhtml.org/?t=213086&m=1456331

        Bei dieser Lösung wollte ich eigentlich bleiben.
        Nun muss ich noch eine Möglichkeit finden, wie ich immer nur 1 ausgeklappt bekomme.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln