Constantin Kiesling: Rollover-Effekt bei Grafiken

SELF-Forum

Rollover-Effekt bei Grafiken

Constantin Kiesling
– Informationen zu den Bewertungsregeln

Hallo liebe Forums-Community!

Ich experimentiere gerade das erste Mal mit Rollover-Effekten bei grafischen Links und bräuchte eure Hilfe! Mit Adobe ImageReady habe ich folgendes Script erstellt:

<HTML>
<HEAD>

<SCRIPT TYPE="text/javascript">
<!--

function newImage(arg) {
 if (document.images) {
  rslt = new Image();
  rslt.src = arg;
  return rslt;
 }
}

function changeImages() {
 if (document.images && (preloadFlag == true)) {
  for (var i=0; i<changeImages.arguments.length; i+=2) {
   document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
  }
 }
}

var preloadFlag = false;
function preloadImages() {
 if (document.images) {
  bild01_over = newImage("Bilder/bild01-over.gif");
  preloadFlag = true;
 }
}

// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">
<!-- ImageReady Slices (navy-klein02.html) -->
<A HREF="#"
 ONMOUSEOVER="changeImages('bild01', 'Bilder/bild01-over.gif'); return true;"
 ONMOUSEOUT="changeImages('bild01', 'Bilder/bild01.gif'); return true;">
 <IMG NAME="bild01" SRC="Bilder/bild01.gif" WIDTH=150 HEIGHT=113 BORDER=0 ALT=""></A>

</BODY>
</HTML>

Soviel dazu... Aber was mache ich nun, wenn ich mehrere Grafiken mit Rollover-Effekt in eine Page einbauen möchte? An welchen Stellen im Javascript muss ich dann die anderen Dateinamen ergänzen, damit alles reibungslos klappt? Ich würde mich über eure Hilfe wirklich sehr freuen!

Danke und schöne Grüße,
Constantin

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Rollover-Effekt bei Grafiken

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Lieber Constantin,

    Ich experimentiere gerade das erste Mal mit Rollover-Effekten bei grafischen Links und bräuchte eure Hilfe! Mit Adobe ImageReady habe ich folgendes Script erstellt:

    das mit Image-Ready zu machen ist zwar gut und schön, aber es ist eben für Leute, die von HTML und CSS keine Ahnung haben.

    Wenn Du bereit bist, etwas dazu zu lernen, dann verzichtest Du auf den Einsatz von dem mit Image-Ready erstellten Scriptes und lernst, wie man solche Effekte ohne Javascript und mit CSS realisiert.

    CSS ist deshalb wesentlich sinnvoller, weil es von modernen Browsern auch dann unterstützt wird, wenn Javascript deaktiviert oder nicht verfügbar ist. Suche dazu in der Dokumentation von SelfHTML nach den Begriffen "CSS" und ":hover". In den Treffern wirst Du genügend Informationen finden, um Dich in diese Thematik einzuarbeiten.

    ----------------------------------------------------------------------
    Antwort auf Deine ursprüngliche Frage:

    Dein Code: ~~~html <A HREF="#"
     ONMOUSEOVER="changeImages('bild01', 'Bilder/bild01-over.gif'); return true;"
     ONMOUSEOUT="changeImages('bild01', 'Bilder/bild01.gif'); return true;">
     <IMG NAME="bild01" SRC="Bilder/bild01.gif" WIDTH=150 HEIGHT=113 BORDER=0 ALT=""></A>

      
In diesem Quelltext wird eine Bilddatei namens "Bild/bild01.gif" referenziert. Dieser Dateiname (und Pfad) erscheint auch in den Javascript-Eventhandlern "onmouseover" bzw. "onmouseout". Wenn Du bei den anderen Links in eben diesen Eventhandlern die Pfade und Dateinamen entsprechend anpasst, dann kann Dein Adobe-Image-Ready-Script auch bei diesen Bildern den Effekt darstellen.  
  
Das jeweilige "return true;" würde ich aus den Eventhandlern löschen. Es bewirkt nichts und bläht den ansonsten schon fürchterlichen HTML-Code unnötig auf!  
  
Liebe Grüße aus [Ellwangen](http://www.ellwangen.de/),  
  
Felix Riesterer.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln