Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 24

Thema: Bildwechsel

  1. #1
    Avatar von .holger
    .holger ist offline Lounge-Member
    registriert
    22-04-2001
    Ort
    HB und Zw'ahn
    Beiträge
    5.789

    Bildwechsel

    [code by womstar]

    Hier ein kleiner Bildwechsel, der beim überfahren mit der Maus das darunterliegende Bild ändert:

    Code:
    <script language=javascript> 
    function wechsel(a,bild) 
    { 
    window.document.images[a].src=bild; 
    } 
    </script> 
    
    <body> 
    <!--1. bilder wechsel--> 
    <img src=bild1.jpg onmouseover="wechsel(0,'bild2.jpg')"onmouseout="wechsel(0,'bild1.jpg')"> 
    
    <!--2. bilder wechsel--> 
    <img src=bild1.jpg onmouseover="wechsel(1,'bild2.jpg')"onmouseout="wechsel(1,'bild1.jpg')"> 
    
    <!--3. bilder wechsel--> 
    <img src=bild1.jpg onmouseover="wechsel(2,'bild2.jpg')"onmouseout="wechsel(2,'bild1.jpg')"> 
    </body>
    Eigentlich ist das ganz einfach zu erklären, ich nehme das zweite Bild als Beispiel:

    <!--2. bilder wechsel-->
    <img src=bild1.jpg onmouseover="wechsel(1,'bild2.jpg')"onmouseout="wechsel(1,'bild1.jpg')">

    bild1.jpg ist das Ausgangsbild (kann man natürlich ändern)
    bild2.jpg ist das Bild was beim Mouse-over erscheint (auch das kann man ändern)

    sobald die Maus über das Bild geht (onmouseover) wird eine fuction aufgerufen (wechsel) und es werden 2 Werte wiedergegeben (1 & bild2.jpg).
    Der erste Wert (1) gibt die Indexzahl des Bildes (also das wievielte Bild gewechselt werden soll) wieder und der zweite Wert (bild2.jpg) sagt was statt des alten Bildes an dieser Stelle erscheinen soll.

    [EDIT]
    Ach ja, beim verlassen des Bildes mit der Maus wird mit onmouseout das Bild analog dazu wieder zurück getauscht
    [/EDIT]

    Das wars auch schon wieder....

    [code by womstar]
    Geändert von .colin (29-09-2002 um 13:36 Uhr)

  2. #2
    Avatar von Kriegr
    Kriegr ist offline Routinier
    registriert
    06-12-2001
    Ort
    Karlsruhe
    Beiträge
    396

    Question

    Genau so ein script möchte ich in einer include-Datei anwenden. Geht das überhaupt? Falls ja, was muss ich dabei beachten?

    In meiner normalen html-Datei funktioniert das script. Bislang allerdings nicht in der include.
    Kriegr
    Das Leben ist ein Traum in einem Traum!
    Tut das Unnütze, singt die Lieder, die man aus eurem Mund nicht erwartet!
    Seid unbequem, seid Sand, nicht das Öl im Getriebe der Welt!

    We are God
    'Cause only we can create the idea
    Of His existence in our holy brains
    (Yello 'Domingo')

  3. #3
    Avatar von .holger
    .holger ist offline Lounge-Member
    registriert
    22-04-2001
    Ort
    HB und Zw'ahn
    Beiträge
    5.789
    include das script (zwischen <script ..> ... und </script> in den head und den Rest dahin wo es erscheinen soll. dann sollte es gehen (ich hab immer eine PHP Datei wo meine ganzen JS-functions drinstehen die ich in den head include - geht wunderbar)

  4. #4
    Neuling ist offline Grünschnabel
    registriert
    07-03-2003
    Beiträge
    5

    Bildwechsel incl. onmousedown

    Ist es möglich das Script zum Bildwechsel gleichzeitig mit einem "onmousedown"-Befehl zu erweitern?
    Ich möchte das das "onmouseover-Bild" mit dem Befehl onmousedown übernommen wird. Ist das möglich?
    Danke für Hilfe!

  5. #5
    Avatar von .holger
    .holger ist offline Lounge-Member
    registriert
    22-04-2001
    Ort
    HB und Zw'ahn
    Beiträge
    5.789
    wie wäre es mit: <img src=bild1.jpg onmouseover="wechsel(0,'bild2.jpg')"onmouseout="wechsel(0,'bild1.jpg')"onmousedown="wechsel(0,'bild3.jpg')">

    ??

  6. #6
    Neuling ist offline Grünschnabel
    registriert
    07-03-2003
    Beiträge
    5

    bildwechsel mit onmousedown

    Danke für die schnelle Antwort, hab nicht so bald damit gerechnet.
    Sorry, ich bin zum ersten Mal in einem Forum.
    Zum Problem:
    Leider wird der "onmousedown-Befehl" vom "onmouseout-Befehl" wieder gekappt.
    Wenn ich also über den grafischen Menüpunkt fahre,
    erhalte ich Bild2(over),
    klicke ich dann, sehe ich Bild3 (down),
    fahre ich mit der Maus dann wieder vom Menüpunkt, wird Bild 3 ersetzt durch Bild 1.
    Ich hätte aber gern, dass man die "Down-Grafik" so lange sieht, bis ich einen anderen Menüpunkt auswähle.

  7. #7
    Avatar von .holger
    .holger ist offline Lounge-Member
    registriert
    22-04-2001
    Ort
    HB und Zw'ahn
    Beiträge
    5.789
    Probier mal das:
    Code:
          <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
          <!--
           var BildNr, BildName, AktBildName, AltBildName;
           var i, AltBildNr, AktBildNr=1, Bildmax=5;
           if (document.images)
           {
             Bild_Normal=new Array(Bildmax)
             Bild_Tausch=new Array(Bildmax)
             Bild_Click=new Array(Bildmax)
             for (i=1;i<=Bildmax;i++)
             {
               Bild_Normal[i]=new Image();
               Bild_Normal[i].src="n"+i+".gif";
               Bild_Tausch[i]=new Image();
               Bild_Tausch[i].src="t"+i+".gif";
               Bild_Click[i]=new Image();
               Bild_Click[i].src="c"+i+".gif";
             }
           }
           function Over(BildNr)
           {
             if (document.images)
             {
               if (BildNr!=AktBildNr)
               {
                 BildName="Bild" + BildNr;
                 document.images[BildName].src = Bild_Tausch[BildNr].src;
               }
             }
           }
           function Out(BildNr)
           {
             if (document.images)
             {
               if (BildNr!=AktBildNr)
               {
                 BildName="Bild" + BildNr;
                 document.images[BildName].src = Bild_Normal[BildNr].src;
               }
               if (BildNr==AktBildNr)
               {
                 BildName="Bild" + BildNr;
                 document.images[BildName].src = Bild_Click[BildNr].src;
               }
             }
           }
           function Click(BildNr)
           {
             if (document.images)
             {
               AltBildNr=AktBildNr;
               AltBildName="Bild" + AltBildNr;
               AktBildNr=BildNr;
               AktBildName="Bild" + AktBildNr;
               document.images[AltBildName].src = Bild_Normal[AltBildNr].src;
               document.images[AktBildName].src = Bild_Click[AktBildNr].src;
             }
           }
          //-->
          </SCRIPT>
    Aufruf der JS-Funktionen:
    <A HREF="test3.htm" OnClick="Click(3)" OnMouseOver="Over(3)"
    OnMouseOut="Out(3)" OnFocus="blur()"><IMG SRC="n3.gif"
    WIDTH="100" HEIGHT="30" BORDER="0" NAME="Bild3" ALT="..."></A>

    die Bilder heissen dann n1.gif, n2.gif,... ni.gif (n = normal) t1.gif, t2.gif,.... ti.gif (t= tausch), c1.gif, c2.gif,...ci.gif (c= click) wobei die Zahl jeweils die nimmerierung ist und im Link auch angegenen wird. in den Klammern jeweils)

  8. #8
    Neuling ist offline Grünschnabel
    registriert
    07-03-2003
    Beiträge
    5

    bildwechsel

    danke herzlichst,
    ich muss da jetzt erst mit arbeiten, auch um das alles nachvollziehen zu können.
    sollte ich noch probleme haben, wäre es nett wenn ich mich noch mal melden kann.
    besten Dank

  9. #9
    Neuling ist offline Grünschnabel
    registriert
    07-03-2003
    Beiträge
    5

    Problem mit BildName= "bild" + BildNr

    Hallo,
    leider kann ich nicht nachvollziehen, was mit "bild" in dem Script gemeint ist.
    Ich erhalte folgende Fehlermeldung:
    document.images[...] ist Null oder kein Objekt

    Im Script wird die Variable 'BildName' in die eckigen Klammern gesetzt.
    Der Variablen 'BildName' wird vorher "bild" + BildNr zugewiesen.

    BildName= "bild" + BildNr;
    document.images[BildName].src = Bild_Normal[BildNr].src;

    Laut Büchern sollte innerhalb der [] eine Indexnummer eingetragen werden, um die Grafiken gezielt ansprechen zu können.
    Ich weiss nicht mehr weiter, hab schon einige Versuche gestartet "bild" zu ersetzen, aber nichts hat funktioniert.
    Wäre nett wenn du dafür eine Lösung hast.

  10. #10
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913
    kannst du eine TXT-DATEI posten wo dein bisheriger code zusehn ist?

  11. #11
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913
    du hast in deinem script was du mir geschickt hast, die bild namen nicht richtig gesetzt.

    so müsste es aussehn damit das script funzt!

    Code:
    <A HREF="test1.htm" OnClick="Click(0)" OnMouseOver="Over(0)" OnMouseOut="Out(0)" OnFocus="blur()"><IMG SRC="n1.gif" WIDTH="100" HEIGHT="30" BORDER="0" NAME=" Bild1" ALT="..."></A>
    
    <A HREF="test2.htm" OnClick="Click(1)" OnMouseOver="Over(1)" OnMouseOut="Out(1)" OnFocus="blur()"><IMG SRC="n2.gif" WIDTH="100" HEIGHT="30" BORDER="0" NAME=" Bild2" ALT="..."></A>
    
    <A HREF="test3.htm" OnClick="Click(2)" OnMouseOver="Over(2)" OnMouseOut="Out(2)" OnFocus="blur()"><IMG SRC="n3.gif" WIDTH="100" HEIGHT="30" BORDER="0" NAME=" Bild3" ALT="..."></A>
    
    usw...
    Geändert von womstar (10-03-2003 um 17:34 Uhr)

  12. #12
    Neuling ist offline Grünschnabel
    registriert
    07-03-2003
    Beiträge
    5

    sorry , bad news

    Ich habe alles so gemacht wie du beschrieben hast, schrei!

    Außerdem habe ich den ganzen Code noch mal extern an Testdateien und Grafiken ausprobiert, selbst dann geht es nicht.
    Vielleicht liegts ja auch an meiner Soft- bzw. Hardware!?

    hier die Datei nochmal alles:
    <html>
    <head>
    <title>test</title>
    <script language="javaScript">
    var BildNr, BildName, AktBildName, AltBildName;
    var i, AltBildNr, AktBildNr=1, Bildmax=10;
    if (document.images)
    {
    Bild_Normal=new Array(Bildmax)
    Bild_Tausch=new Array(Bildmax)
    Bild_Click=new Array(Bildmax)
    for (i=1;i<=Bildmax;i++)
    {
    Bild_Normal[i]=new Image();
    Bild_Normal[i].src="n"+i+".gif";
    Bild_Tausch[i]=new Image();
    Bild_Tausch[i].src="t"+i+".gif";
    Bild_Click[i]=new Image();
    Bild_Click[i].src="c"+i+".gif";
    }
    }
    function Over(BildNr)
    {
    if (document.images)
    {
    if (BildNr!=AktBildNr)
    {
    BildName="Bild" + BildNr;
    document.images[BildName].src = Bild_Tausch[BildNr].src;
    }
    }
    }
    function Out(BildNr)
    {
    if (document.images)
    {
    if (BildNr!=AktBildNr)
    {
    BildName="Bild" + BildNr;
    document.images[BildName].src = Bild_Normal[BildNr].src;
    }
    if (BildNr==AktBildNr)
    {
    BildName="Bild" + BildNr;
    document.images[BildName].src = Bild_Click[BildNr].src;
    }
    }
    }
    function Click(BildNr)
    {
    if (document.images)
    {
    AltBildNr=AktBildNr;
    AltBildName="Bild" + AltBildNr;
    AktBildNr=BildNr;
    AktBildName="Bild" + AktBildNr;
    document.images[AltBildName].src = Bild_Normal[AltBildNr].src;
    document.images[AktBildName].src = Bild_Click[AktBildNr].src;
    }
    }
    </script>
    </head>
    <body text="#000000" bgcolor="#445566" link="#FF0000" alink="#FF0000" vlink="#FF0000">
    <a href="home.htm" OnClick="Click(0)" OnMouseOver="Over(0)" OnMouseOut="Out(0)" OnFocus="blur()">
    <img src="n1.gif" width="100" height="105" alt="Home" border="0" name=" Bild1" ></a>

    <a href="alle.htm" OnClick="Click(1)" OnMouseOver="Over(1)" OnMouseOut="Out(1)" OnFocus="blur()">
    <img src="n2.gif" width="100" height="105" alt="Info" border="0" name=" Bild2"></a>
    </body>
    </html>

    Fehlermeldungen: 'document.images[...]'ist Null oder kein Objekt
    Die Grafiken habe ich auch ins gleiche Verzeichnis gelegt.
    Er zeigt keine Over-Effekte, insbesondere nicht beim ersten grafischen Link.
    Danke für deine Hilfe, ich muss jetzt erst mal abschalten, kann schon nicht mehr klar denken.

  13. #13
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

    bildwechsel der auch für ältere browser funktioniert!

    Code:
    <html>
    <head>
    <script> 
    function wechsel(bildName,bild){
    	eval("document."+bildName).src=bild;
    }
    </script> 
    </head>
    
    <body>
    <a href="#" onmouseover="wechsel('bild','pic2.gif')" onmouseout="wechsel('bild','pic1.gif')"><img src="pic1.gif" name="bild"></a>
    </body>
    </html>
    dazu ist zu sagen, dass der bildwechsel bei ns4.75 nur dann funktioniert, wenn der onmousover und onmouseout eventhandler in einem <a>-tag steht.
    Geändert von womstar (01-05-2004 um 21:09 Uhr)

  14. #14
    HILFE!!!! ist offline Routinier
    registriert
    03-05-2001
    Beiträge
    297

    Re: Bildwechsel

    Originally posted by .colin
    [code by womstar]

    [code]
    <script language=javascript>
    function wechsel(a,bild)
    {
    window.document.images[a].src=bild;
    }
    </script>

    Bei <script language=javascript> meckert der Validator. Was schafft da Abhilfe?
    jojo

  15. #15
    Dompteur9 ist offline Grünschnabel
    registriert
    31-05-2005
    Beiträge
    1

    AW: Bildwechsel

    Hallo, ich bin neu hier und auch sonst sehr unerfahren was die Webgestaltung betrifft.
    Jetzt habe ich mich allerdings doch dazu durchgerungen, mir ein Webside zu basteln. Dabei sollte mir der MS Publisher helfen. Soweit sehr schön, es hat auch fast alles zu meiner Zufriedenheit geklappt. Nun wollte ich allerdings ein paar Spielereien einbauen, wie z.B. einen Bildwechsel beim Rollover bzw. beim Klick mit der Maus.

    Nachdem ich nun gestern relativ schnell über die Rollover Geschichte mit lediglich zwei Bilder hinweg gekommen schien, bin ich beim Bildwechsel auf Mausklick bei mehreren Bildern fast verzweifelt. Dabei habe ich nun ettliche Foren durchstöbert und ich habe auch einige Skripts gefunden. Kurz vor dem Schlafengehen habe ich gestern in meiner Verzweiflung dann statt dem üblichen IE 6.0 einmal den Netscape Browser 7.1 bzw. Mozilla 1.7 aufgemacht. So und da kam nun der Schock, mit Netscape/Mozilla funktionierte das Rollover auch nicht mehr. Auf der Seite, auf der ich den Wechsel per Klick einbauen wollte, fiel mir allerdings auf, daß sich zwar nicht das Bild, auf das ich klickte, änderte, sondern ein anderes, dort erschienen dann aber der Reihe nach alle vorgesehenen Bilder.

    Dies Phänomen habe ich mir nun heute ausführlicher angeschaut und nach dem Test mit noch einigen anderen Skripts habe ich mittlerweile herausgefunden, das auch das Rollover-Problem bei Netscape und Mozilla dasjenige ist, daß die Bilder an völlig anderer Stelle getauscht werden, nicht aber dort, wo ich es vorgesehen habe.

    Beim IE ist das überhaupt kein Problem. Woran kann das liegen und wie kann ich es abstellen??

    Hier übrigens die links, wo man sich das Problem einmal anschauen kann. Gerne schicke ich auch den Quellcode, wobei ich allerdings davon ausgehe, daß das Problem nicht in dem Wechselskript, sondern irgendwo anders auf der Seite liegen muß:

    www.dudzik.net/Test/indextest.htm
    www.dudzik.net/Test/indextest1.htm

    Vielen Dank schon einmal im Voraus für Euere Hilfe.

    PS: Wer ein schönes Skript für den Bildwechsel von ca. 10 Bildern auf Mausklick hat, kann sich auch gerne melden. Am liebsten wäre mir die Möglichkeit des Hin- und Herblätterns mit linker und rechter Maustaste, auf einen Schaltbutton lege ich hingegen keinen gesteigerten Wert, ein Klick auf das Bild wäre absolut ausreichend.

Seite 1 von 2 12 LetzteLetzte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •