nicht funktionierender Bildwechsel HILFE!!!

[Maddin_91]

Hallo ertmal,

Ich habe gerade das Problem, das dieser Bildwechsel nicht funktioniert. Ich gucke schon den ganzen Tag darüber, aber ich finde irgendwie keinen Fehler.
Und nun bin ich verzweifelt. Ich hoffe ihr könnt mir helfen.

Danke schonmal im voraus

<script type="text/javascript"><!--
var venlorer = Array ("bilder/filialen/venlorer/1.png", "bilder/filialen/venlorer/2.png", "bilder/filialen/venlorer/3.png")

function img_switch(galerie,nr,img){
    document.image[img].src = galerie[nr];
    }
    -->
</script>

<img src="bilder/filialen/venlorer/1.png" name="g_img_v" class="img" />
      <a href="#" onclick="img_switch('venlorer',0,'g_img_v')">
             <img src="bilder/filialen/venlorer/1.png" name="klein_img1" class="klein_img" style="margin-top:0px"/>
      </a><br />
      <a href="#" onclick="img_switch('venlorer',1,'g_img_v')">
             <img src="bilder/filialen/venlorer/2.png" name="klein_img1" class="klein_img" onclick="" />
      </a><br />
      <a href="#" onclick="img_switch(venlorer,2)">
             <img src="bilder/filialen/venlorer/3.png" name="klein_img1" class="klein_img" />
      </a>

 

[stroyer]

AW: nicht funktionierender Bildwechsel HILFE!!!

Auf den ersten Blick fallen mir ein paar Kleinigkeiten auf:

<img src="bilder/filialen/venlorer/1.png" name="g_img_v" class="img" />
<a href="javascript:void(0);" onclick="javascript:img_switch(venlorer,0,'g_img_v')">
  <img src="bilder/filialen/venlorer/1.png" name="klein_img1" class="klein_img" style="margin-top:0px" />
</a><br />
<a href="javascript:void(0);" onclick="javascript:img_switch(venlorer,1,'g_img_v')">
  <img src="bilder/filialen/venlorer/2.png" name="klein_img2" class="klein_img" />
</a><br />
<a href="javascript:void(0);" onclick="javascript:img_switch(venlorer,2,'g_img_v')">
  <img src="bilder/filialen/venlorer/3.png" name="klein_img3" class="klein_img" />
</a>

Und im Script:

var venlorer = new Array("bilder/filialen/venlorer/1.png", "bilder/filialen/venlorer/2.png", "bilder/filialen/venlorer/3.png");

function img_switch(galerie,nr,img)
  {
    document.images[img].src = galerie[nr];
  }

Hauptursachen: Variablenname als String übergeben und fehlender Strichpunkt nach dem Array.

 

[Maddin_91]

AW: nicht funktionierender Bildwechsel HILFE!!!

Hallo,
Klappt leider immer noch nicht.
So wie ich das geschrieben hab, ging es früher in anderen skripten auch.
Leider habe ich diese nicht mehr :$

 

[stroyer]

AW: nicht funktionierender Bildwechsel HILFE!!!

Es heißt wenn document.images; dann gehts. Ich würde dir aber empfehlen:
document.getElementById(img).src = galerie[nr];

Dazu dem img eine ID geben:

<img src="bilder/filialen/venlorer/1.png" name="g_img_v" id="g_img_v"
 class="img" />
<a href="javascript:void(0);" onclick="javascript:img_switch(venlorer,0,'g_img_v')">
  <img src="bilder/filialen/venlorer/1.png" name="klein_img1" class="klein_img" style="margin-top:0px" />
</a><br />
<a href="javascript:void(0);" onclick="javascript:img_switch(venlorer,1,'g_img_v')">
  <img src="bilder/filialen/venlorer/2.png" name="klein_img2" class="klein_img" />
</a><br />
<a href="javascript:void(0);" onclick="javascript:img_switch(venlorer,2,'g_img_v')">
  <img src="bilder/filialen/venlorer/3.png" name="klein_img3" class="klein_img" />
</a>

und

var venlorer = new Array("bilder/filialen/venlorer/1.png", "bilder/filialen/venlorer/2.png", "bilder/filialen/venlorer/3.png");

function img_switch(galerie,nr,img)
  {
    document.getElementById(img).src = galerie[nr];
  }

 

[Maddin_91]

AW: nicht funktionierender Bildwechsel HILFE!!!

juhu es klappt,
danke für den tipp!
Das s hab ich immer übersehen.
Da zeigt sich wieder, das man sich lieber immer Zeit lassen sollte.

Ich wollte lieber mal diese Methode ausprobieren.

Nochmal vielen Dank


Dann könnte ich auch nochmal direkt fragen wie man ein angeklicktes Bild in der Opazität runter schraubt.
Ich weiß nur das man in CSS mit dem Sheet opacity = 50% um es leicht transparent zu machen.
Nur weiter weiß ich leider nicht

 

[stroyer]

AW: nicht funktionierender Bildwechsel HILFE!!!

opacity wird mit 0.0 - 0.1 angegeben. Hier wären es dann 0.5; Das funktioniert aber niccht in allen Browsern;
Ältere Firefox verwenden so weit ich weiß
-moz-opacity:0.5

und der IE lässt es zum Teil nur mit Filtern zu.

 

[cebito]

AW: nicht funktionierender Bildwechsel HILFE!!!

opacity:0.5; /* alle Browser */
filter:alpha(opacity=50); /* IE */

...sollte reichen, glaub kaum, das da noch sooooo alte FF-Versionen unterwegs sind.

 

[Maddin_91]

AW: nicht funktionierender Bildwechsel HILFE!!!

Hallo nochmal,
wäre es so denn richtig?

document.images['klein' + img + nr].style.opacity = 0.5;
document.images['klein' + img + nr].style.filter = 'alpha(opacity=50)';

Das komische ist, alles was ich dahinter setze, wird nicht mehr ausgeführt.
ich weiß nicht was fehlt, könnt ihr mir vlt helfen???

 

[stroyer]

AW: nicht funktionierender Bildwechsel HILFE!!!

['klein_img'+nr] probier mal das bzw. poste sonst deinen aktuellen Quellcode

 

[cebito]

AW: nicht funktionierender Bildwechsel HILFE!!!

document.images[0].style.opacity = 0.5;
document.images[0].style.filter = 'alpha(opacity=50)';

0=erstes Bild im Dokument 1=zweites usw... somit könntest du deiner Funktion beim Aufrufen eine Zahl (Nummer des Bildes im Dokument) übergeben und dann schreiben:

function irgendwas(zahl){
document.images[zahl].style.opacity = 0.5;
document.images[zahl].style.filter = 'alpha(opacity=50)';
}

Edit: einfacher und Anwenderfreundlicher wäre es allerdings, wenn du den Bildern einfach eine class gibst...

.klein{
opacity:1;
filter:alpha(opacity=100);
}
.klein:hover{
opacity:0.5;
filter:alpha(opacity=50);
}

Was mich nur wundert, normalerweise sind die Bilder halbtransparent und werden beim Mouseover voll sichtbar, du möchtest es anscheinend umgekehrt

 

[Maddin_91]

AW: nicht funktionierender Bildwechsel HILFE!!!

Ich hab bisschen verändert
auch die variabeln, um es bisscehn praktischer und einfacher zu machen

Javascript:

function img_switch(galerie,nr,img){
        document.images['g_' + img].src = galerie[nr];
        document.images['klein' + img + nr].style.opacity = 0.5;
        document.images['klein' + img + nr].style.filter = 'alpha(opacity=50)';
}

HTML:

<a href="javascript:void(0);" onclick="javascript:img_switch(venlorer,0,'img_v')"><img src="bilder/filialen/venlorer/1.png" name="klein_img_v0" class="klein_img" style="margin-top:0px"/></a><br />
                 <a href="javascript:void(0);" onclick="javascript:img_switch(venlorer,1,'img_v')"><img src="bilder/filialen/venlorer/2.png" name="klein_img_v1" class="klein_img" /></a><br />
                  <a href="javascript:void(0);" onclick="javascript:img_switch(venlorer,2,'img_v')"><img src="bilder/filialen/venlorer/3.png" name="klein_img_v2" class="klein_img" /></a>

 

[Maddin_91]

AW: nicht funktionierender Bildwechsel HILFE!!!

@cebiot: da kommt dann das problem das das große bild die nr.1 ist was kann ich den da machen?

 

[stroyer]

AW: nicht funktionierender Bildwechsel HILFE!!!

Da fehlt auf jeden Fall im name ein Unterstrich:

function img_switch(galerie,nr,img){
        document.images['g_' + img].src = galerie[nr];
        document.images['klein_' + img + nr].style.opacity = 0.5;
        document.images['klein_' + img + nr].style.filter = 'alpha(opacity=50)';
}

 

[Maddin_91]

AW: nicht funktionierender Bildwechsel HILFE!!!

Nein der name ist richtig.
Sonst würde der Bildwechsel ja nicht mehr funktionieren.

'klein_' + img(=img_v)+nr (=1)

 

[cebito]

AW: nicht funktionierender Bildwechsel HILFE!!!

@cebiot: da kommt dann das problem das das große bild die nr.1 ist was kann ich den da machen?

Siehe Edit aus meinem letzten Post, kein zählen, kein Durcheinander und Leute ohne JS sehen es auch noch...

 

[stroyer]

AW: nicht funktionierender Bildwechsel HILFE!!!

Die Zeile ist für den Bildwechsel zuständig: document.images['g_' + img].src = galerie[nr]; (g_img_v)

Die anderen zwei Zeilen sind für die Transparenz:
document.images['klein_' + img + nr].style.opacity = 0.5;
document.images['klein_' + img + nr].style.filter = 'alpha(opacity=50)';

du hast bei den letzten zwei Zeilen keinen Unterstrich gehabt (=>kleinimg_v1 statt klein_img_v1)

EDIT: cebitos Variante ist besser; da geht der Effekt auch wieder weg.
Ich würde es sicherheitshalber auf

.klein img{
opacity:1;
filter:alpha(opacity=100);
}
.klein:hover img{
opacity:0.5;
filter:alpha(opacity=50);
}

ändern.

 

[Maddin_91]

AW: nicht funktionierender Bildwechsel HILFE!!!

Jaa mein grund gedanke war das ich eine "galerie" mache und das bild was gerade aktiv ist ist dann transparent

Nur hab ich mich da leicht überschätzt:uhm:

 

[stroyer]

AW: nicht funktionierender Bildwechsel HILFE!!!

Dann geht die CSS-Variante nicht, da das nur solange wirkt, wie der Mauszeiger am Bild oben ist.
Das Problem ist, dass, sobald man auf ein Bild klickt, bei allen anderen die Transparenz weg geht.

EDIT:
Dann müsst es so gehen:

function img_switch(galerie,nr,img)
  {
    document.images['g_' + img].src = galerie[nr];
    var i=0;
    while(true)
      {
        if(document.images['klein_' + img + i]==null||document.images['klein_' + img + i]==undefined)
          {
            break;
          }
        if(i!=nr)
          {
            document.images['klein_' + img + i].style.opacity = 1.0;
            document.images['klein_' + img + i].style.filter = 'alpha(opacity=100)';
          }
        else
          {
            document.images['klein_' + img + i].style.opacity = 0.5;
            document.images['klein_' + img + i].style.filter = 'alpha(opacity=50)';
          }
        i++;
      }
  }

Edit: nr und i vertauscht

 

[Maddin_91]

AW: nicht funktionierender Bildwechsel HILFE!!!

Das mit dem CSS ist gar nicht so schlecht

nur jetzt muss es noch so bleiben bis man ein anderes anwählt

ich hab mir gedacht das es evt mit onload geht

javascript:

function img_switch(galerie,nr,img){
        document.images['g_' + img].src = galerie[nr];
        document.images[nr+1].style.opacity = 0.5;
        document.images[nr+1].style.filter = 'alpha(opacity=50)';
}
function opazität(){
        document.images[img].style.opacity = 1;
        document.images[img].style.filter = 'alpha(opacity=100)';    
}

<body onload="javascript:opazität()">

nr+1 damit das richtige Bild getroffen wird

Das letzte Problem ist nur noch das es nicht wieder ganz sichtbar wird, wenn ein anderes ausgewählt wird.
Wenn das gelöst ist, wäre ich eig fertig soweit.

 

[stroyer]

AW: nicht funktionierender Bildwechsel HILFE!!!

Ich denke mein Code müsste besser gehen;
1) Eine Funktion darf keinen Umlaut enthalten
2) img ist in opazität nicht definiert
3) nr+1 würde in dem Fall nur eine 1 dranhängen; abgesehen davon, dass dieses Element nicht existiert
4) Am Anfang ist die Opazität überall 1

Folgendes wäre auch eine Variante (Führt bei unterschiedlichen/mehreren img zu Problemen):

var img_select=-1;
function img_switch(galerie,nr,img)
  {
    document.images['g_' + img].src = galerie[nr];
    var i=0;
    if(img_select>-1)
      {
        document.images['klein_' + img + img_select].style.opacity = 1.0;
        document.images['klein_' + img + img_select].style.filter = 'alpha(opacity=100)';
      }
    document.images['klein_' + img + nr].style.opacity = 0.5;
    document.images['klein_' + img + nr].style.filter = 'alpha(opacity=50)';
    img_select=nr;
  }