cebra: "nächstes Bild" mit Rollover-Effekt?

SELF-Forum

"nächstes Bild" mit Rollover-Effekt?

cebra
– Informationen zu den Bewertungsregeln

Hallo,

Ich hab mit Javascript zwei Buttons erstellt, die durch eine Anzahl Bilder navigieren sollen. Das funktioniert auch soweit.

Jetzt möchte ich allerdings bei diesen Buttons auch noch einen Rollovereffekt einbauen. Leider hat das bisher noch nicht geklappt und auch die Suche hat mich nicht wirklich weiter gebracht.
Das übliche:

onmouseover="xy.src='orginal.jpg';"
onmouseout="xz.src='over.jpg';"

hat mir nicht geholfen, vielleicht hab ichs auch einfach falsch eingebaut.

So siehts bisher bei mir aus:

  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title> stu nicholls dot com | menu - skeleton right flyout </title>  
<meta name="Author" content="Stu Nicholls" />  
  
<link rel="stylesheet" type="text/css" href="css/navi.css" />  
<link rel="stylesheet" type="text/css" href="css/layout.css" />  
  
<script src="css/stuHover.js" type="text/javascript"></script>  
<script type="text/javascript">  
/* <![CDATA[ */  
  
var imgs = new Array();  
var imgcnt = 0;  
var thisimg = 0;  
  
imgs[imgcnt++] = '02_alteheimat/01.jpg';  
imgs[imgcnt++] = '02_alteheimat/02.jpg';  
imgs[imgcnt++] = '02_alteheimat/03.jpg';  
  
function nextImg() {  
  if (document.images) {  
      thisimg++;  
      if (thisimg >= imgcnt)  
          thisimg = 0;  
document.getElementById("rollimg").src = imgs[thisimg];  
  }  
}  
  
function prevImg() {  
    if (document.images) {  
        thisimg--;  
        if (thisimg < 0)  
            thisimg = imgcnt-1;  
document.getElementById("rollimg").src = imgs[thisimg];  
    }  
}  
/* ]]> */  
</script>  
  
  
</head>  
  
<body>  
<div class="galerie">  
<img src="02_alteheimat/02.jpg" alt="Bildwechsel mit Javascript" width="0" height="1" />  
                  <!-- preload -->  
<img src="02_alteheimat/01.jpg" alt="Bildwechsel mit Javascript" id="rollimg"/></div>  
  
<div>  
  
[code lang=javascript]<script type="text/javascript">  
			<!--  
	document.write ('<p><a href="javascript:prevImg()"><img src="images/links.gif" alt=""/><\/a><a href="javascript:nextImg()"><img src="images/rechts.gif" alt="" /><\/a><\/p>');  
			// -->  
			</script>

</div>
</ul>
</div>
</div>
</body>
</html>

[/code]

Kann mir jemand sagen, wie ich den code ändern muss?
Vielen Dank!

ps: Falls der Code falsch dargestellt werden sollte bitte ich um Verzeihung, ich nutze das Forum zum ersten mal, da ich bisher durch die Suche auf alle Fragen eine Antwort fand.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. "nächstes Bild" mit Rollover-Effekt?

    Don P
    +1 Informationen zu den Bewertungsregeln

    Hallo,

    Ich hab mit Javascript zwei Buttons erstellt, die durch eine Anzahl Bilder navigieren sollen. Das funktioniert auch soweit.

    Die Buttons sind nicht da. Nicht in deinem Code. Nur zwei Verweise.

    Ich würde das so machen:

      
var imgs = [  
  '02_alteheimat/01.jpg',  
  '02_alteheimat/02.jpg',  
  '02_alteheimat/03.jpg'  
];  
  
imgs.rotate = function (direction) {  
  
  if      (direction < 0) { this.push(this.shift());  }  
  else if (direction > 0) { this.unshift(this.pop()); }  
}  
  
function nextImg(direction) {  
  
  imgs.rotate(direction);  
  document.getElementById("rollimg").src = imgs[0];  
}

    Dann muss man nur zum Vorwärtsblättern nur nextImg(1) aufrufen und zum Rückwärtsblättern nextImg(-1).
    Man braucht keinen Zähler, da einfach die Array-Elemente selbst rotiert werden. Das aktuelle Bild ist immer in imgs[0].

    Jetzt möchte ich allerdings bei diesen Buttons auch noch einen Rollovereffekt einbauen.

    Was meinst du mit "bei diesen Buttons"?

    onmouseover="xy.src='orginal.jpg';"
    onmouseout="xz.src='over.jpg';"

    hat mir nicht geholfen

    Kann auch nicht: onmouseover ist ein Event-Handler, d.h. eine function(){}, nicht nur eine Zuweisung wie "xy.src='orginal.jpg';".
    Das gilt auch für onmouseout.

    Also eher so (wenn xy ein img-element ist):

      
xy.onmouseover = function () { this.src = 'orginal.jpg'; };  
xy.onmouseout = function () { this.src = 'over.jpg'; };

    Gruß, Don P

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. "nächstes Bild" mit Rollover-Effekt?

      cebra
      – Informationen zu den Bewertungsregeln

      Danke schonmal für die Antwort.
      Heißt das bei deiner Version wäre es egal wie viele Bilder im Ordner sind, solange sie durchnummeriert werden? Oder müssen die Bilder trotzdem im Script erscheinen?

      Ich hab wohl aus Versehen den Teil, in dem die Buttons sind nicht reinkopiert.
      Hier nochmal eine Aktualisierung meines codes:

        
<script src="css/stuHover.js" type="text/javascript"></script>  
<script type="text/javascript">  
/* <![CDATA[ */  
  
var imgs = new Array();  
var imgcnt = 0;  
var thisimg = 0;  
  
imgs[imgcnt++] = '02_alteheimat/01.jpg';  
imgs[imgcnt++] = '02_alteheimat/02.jpg';  
imgs[imgcnt++] = '02_alteheimat/03.jpg';  
  
function nextImg() {  
  if (document.images) {  
      thisimg++;  
      if (thisimg >= imgcnt)  
          thisimg = 0;  
document.getElementById("rollimg").src = imgs[thisimg];  
  }  
}  
  
function prevImg() {  
    if (document.images) {  
        thisimg--;  
        if (thisimg < 0)  
            thisimg = imgcnt-1;  
document.getElementById("rollimg").src = imgs[thisimg];  
    }  
}  
/* ]]> */  
</script>

      </head>

        
<body>  
<div id="container">  
<div class="galerie">  
<img src="02_alteheimat/02.jpg" alt="Bildwechsel mit Javascript" width="0" height="1" />  
                  <!-- preload -->  
<img src="02_alteheimat/01.jpg" alt="Bildwechsel mit Javascript" id="rollimg"/></div>  
  
  
<div>  
    [code lang=javascript]<script type="text/javascript">  
			<!--  
	document.write ('<p><a href="javascript:prevImg()"><img src="images/links.gif" alt=""/><\/a><a href="javascript:nextImg()"><img src="images/rechts.gif" alt="" /><\/a><\/p>');  
			// -->  
			</script>

      </div>
      </ul>
      </div>
      </div>
      </body>
      </html>[/code]

      Und für links.gif und rechts.gif möchte ich nun einen Rollover-Effekt.
      Ich hoffe es ist nun klarer.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. "nächstes Bild" mit Rollover-Effekt?

        Don P
        – Informationen zu den Bewertungsregeln

        Hallo,

        Oder müssen die Bilder trotzdem im Script erscheinen?

        Natürlich müssen sie erscheinen. Ein Script im Browser kann ja schlecht erraten, was alles an Bildern auf dem Server rumliegt.

        Aber eben nicht so:

        var imgs = new Array();

        var imgcnt = 0;
        var thisimg = 0;

        imgs[imgcnt++] = '02_alteheimat/01.jpg';
        imgs[imgcnt++] = '02_alteheimat/02.jpg';
        imgs[imgcnt++] = '02_alteheimat/03.jpg';

          
sondern besser so:  
  
~~~javascript
var imgs = [  
  '02_alteheimat/01.jpg',  
  '02_alteheimat/02.jpg',  
  '02_alteheimat/03.jpg'  
];

        Das bewirkt genau dasselbe: Die Bildateinamen landen in einem Array namens "imgs".
        Es ist so aber übersichtlicher, einfacher, leichter verständlich und schneller. Dein Code ist nicht falsch, aber umständlich. Oder fährst du von Berlin besser über Moskau nach Rom ;-)?

        Und für links.gif und rechts.gif möchte ich nun einen Rollover-Effekt.
        Ich hoffe es ist nun klarer.

        Ist klar jetzt. Danach würde ich an deiner Stelle aber in der Rubrik CSS fragen. Dazu muss man kein javascript bemühen. Falls du aber lieber die umständliche Route willst, wie gesagt:

          
onmouseover = function () { this.src = 'over.jpg'; }  
onmouseout = function () { this.src = 'normal.jpg'; }

        Wie man solche Handler an die Buttons bindet? Dazu gibt's SelfHTML: de.selfHTML.org ansurfen und ins Suchfeld z.B. "onmouseover" eingeben...

        Viel Glück,
        Don P

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. "nächstes Bild" mit Rollover-Effekt?

          micha1000
          – Informationen zu den Bewertungsregeln

          Hallo Don P,
          das gehört zwar jetzt nicht hier hin (sorry) aber bin immer noch am ausprobieren mit der Bildergalerie. Habe auch auf deiner Nachricht geantwortet.
          Siehe Java-Bildergalerien.

          Gruß
          micha1000

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln