Bildwechsel

.holger

.holger

Lounge-Member
[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]
 
Zuletzt bearbeitet:
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. :confused:
 
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)
 
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!
 
wie wäre es mit: <img src=bild1.jpg onmouseover="wechsel(0,'bild2.jpg')"onmouseout="wechsel(0,'bild1.jpg')"onmousedown="wechsel(0,'bild3.jpg')">

??
 
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.
 
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)
 
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
 
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.
 
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([COLOR=red]0[/COLOR])" OnMouseOver="Over([COLOR=red]0[/COLOR])" OnMouseOut="Out([COLOR=red]0[/COLOR])" OnFocus="blur()"><IMG SRC="[COLOR=red]n1.gif[/COLOR]" WIDTH="100" HEIGHT="30" BORDER="0" NAME="[COLOR=red] Bild1[/COLOR]" ALT="..."></A>

<A HREF="test2.htm" OnClick="Click([COLOR=red]1[/COLOR])" OnMouseOver="Over([COLOR=red]1[/COLOR])" OnMouseOut="Out([COLOR=red]1[/COLOR])" OnFocus="blur()"><IMG SRC="[COLOR=red]n2.gif[/COLOR]" WIDTH="100" HEIGHT="30" BORDER="0" NAME="[COLOR=red] Bild2[/COLOR]" ALT="..."></A>

<A HREF="test3.htm" OnClick="Click([COLOR=red]2[/COLOR])" OnMouseOver="Over([COLOR=red]2[/COLOR])" OnMouseOut="Out([COLOR=red]2[/COLOR])" OnFocus="blur()"><IMG SRC="[COLOR=red]n3.gif[/COLOR]" WIDTH="100" HEIGHT="30" BORDER="0" NAME="[COLOR=red] Bild3[/COLOR]" ALT="..."></A>

usw...
 
Zuletzt bearbeitet:
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=new Image();
Bild_Normal.src="n"+i+".gif";
Bild_Tausch=new Image();
Bild_Tausch.src="t"+i+".gif";
Bild_Click=new Image();
Bild_Click.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.
 
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.
 
Zuletzt bearbeitet:
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.
 
HI,
ich hab den Bildwechsel von .holger ausprobiert und jetzt wird aber zusätzlich zum Rollover noch immer das Bild angezeigt, welches normal in der Zelle ist. Aber wenn ich es aus der Zelle lösche, ist da nix bis der Rollover kommt. Es ist wahrscheinlich nur eine Kleinigkeit, aber ich werd noch verrückt!

Hier der Code:

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




<td colspan="2">
<img src=bild1.jpg onmouseover="wechsel(0,'images_home/banner_2.jpg')"onmouseout="wechsel(0,'images_home/banner_1.jpg')">
<img src="images_home/banner_1.jpg" name="banner"></a></a></td>
</tr>

Ich freue mich über jede Hilfe!!
Danke

Gruß
MyDay
 
Kann man das auch irgendwie so hinbekommen, dass automatisch-also ohne dass man mit der Maus was macht alle z.B. 10 Sekunden dass nächste Bild geladen wird, und dass wenn die Reihe von Bildern am Ende ist es wieder von vorne beginnt?
Danke schonmal
Lg Daniel
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben