tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
4
ZUGRIFFE
999
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 09.04.05 14:34 #1
    HardcoreVibes HardcoreVibes ist offline Mitglied
    Registriert seit
    Aug 2003
    Ort
    Nandlstadt
    Beiträge
    22
    Ich habe folgenden Quelltext (selfhtml - abgeändert)

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

    <html><head><title>Test</title>
<script language="JScript" type="text/jscript">
Bild1 = new Image();
Bild1.src = "madrid1.jpg";
Bild2 = new Image();
Bild2.src = "madrid2.jpg";
var Bild = 1;
function Bildwechsel () {
  if (Bild == 1) {
    Bild = 2;
    document.all.Madrid.filters.blendTrans.Apply();
    document.all.Madrid.src = Bild2.src;
    document.all.Madrid.filters.blendTrans.Play();
  } else {
    Bild = 1;
    document.all.Madrid.filters.blendTrans.Apply();
    document.all.Madrid.src = Bild1.src;
    document.all.Madrid.filters.blendTrans.Play();
  }
}
</script>
</head><body>
<img id="Madrid" src="madrid1.jpg" style="cursor:hand; filter:blendTrans(Duration=1, Transition=16)" onMouseOver="Bildwechsel()" onMouseOut="Bildwechsel()" border="0" alt="Das ist Madrid">
</body>
</html>

    Die ganze Sache funktioniert auch einwandfrei...! Nur: Ich möchte mir eine Site bauen, wo mehrere solcher bilder untereinander zu finden sind... also verschiedene Bilder, die mit dem gleichen script angesprochen werden und auch ein anderes "Überblendbild" haben... ich hab sowas früher schon mal gebastelt... aus genau dem gleichen Script, nur ich komm einfach nicht mehr dahinter, wie das ganze umgeschrieben werden musste... Eines weiß ich noch: Das Script musste um einige Zeilen erweitert werden... *g*

    Ich danke im Voraus für eure Hilfe

    C YA!
     
    Zitieren Zitieren
  2. 11.04.05 03:42 #2
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Im Groben gesagt solltest du dem Skript die jeweiligen Image()-Objekte als Parameter beim Funktionsaufruf übergeben... dann kannst du die Funktion sooft verwenden, wie du willst.
     
    Zitieren Zitieren
  3. 11.04.05 21:31 #3
    HardcoreVibes HardcoreVibes ist offline Mitglied
    Registriert seit
    Aug 2003
    Ort
    Nandlstadt
    Beiträge
    22
    poste mal den Code... hab schon so viele Varianten versucht, die mir eingefallen sind...

    Die Möglichkeit, die mir am logischten erscheint ist folgende:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

    <html><head><title>Test</title>
<script language="JScript" type="text/jscript">
Bild1 = new Image();
Bild1.src = "home1.gif";
Bild2 = new Image();
Bild2.src = "home2.gif";
Bild3 = new Image();
Bild3.src = "about1.gif";
Bild4 = new Image();
Bild4.src = "about2.gif";
var Bild = 1;
function Bildwechsel () {
  if (Bild == 1) {
    Bild = 2;
    document.all.home.filters.blendTrans.Apply();
    document.all.about.filters.blendTrans.Apply();
    document.all.home.src = Bild2.src;
    document.all.about.src = Bild4.src;
    document.all.home.filters.blendTrans.Play();
    document.all.about.filters.blendTrans.Play();
  } else {
    Bild = 1;
    document.all.home.filters.blendTrans.Apply();
    document.all.about.filters.blendTrans.Apply();
    document.all.home.src = Bild1.src;
    document.all.about.src = Bild3.src;
    document.all.home.filters.blendTrans.Play();
    document.all.about.filters.blendTrans.Play();
  }
}
</script>
</head><body>
<img id="home" src="home1.gif" style="filter:blendTrans(Duration=.2, Transition=16)" onMouseOver="Bildwechsel()" onMouseOut="Bildwechsel()" border="0" alt="Das ist Madrid">
<img id="about" src="about1.gif" style="filter:blendTrans(Duration=.2, Transition=16)" onMouseOver="Bildwechsel()" onMouseOut="Bildwechsel()" border="0" alt="Das ist Madrid">
 
</body>
</html>

    Wenn ich dann auf eines der Bilder zeige, gehen beide gleichzeitig... sollen sie aber nich!
    Geändert von HardcoreVibes (11.04.05 um 21:44 Uhr)
     
    Zitieren Zitieren
  4. 12.04.05 00:25 #4
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    z.B. so(habs nen bisschen eingekürzt, muss man weniger schreiben ):
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

    <script type="text/jscript">
 
arrImgs=['about','home'];
 
 
arrImg=[];
 
//Vorladen der Bilder und speichern der erzeugten Objekte in Array "arrImg"
for(i=0;i<arrImgs.length;++i)
    {
        arrImg[arrImgs[i]]=new Array()
        arrImg[arrImgs[i]][0]=new Image();arrImg[arrImgs[i]][0].src=arrImgs[i]+'1.gif';
        arrImg[arrImgs[i]][1]=new Image();arrImg[arrImgs[i]][1].src=arrImgs[i]+'2.gif';
    }
 
 
 
function Bildwechsel() 
{
    for(i=0;i<Bildwechsel.arguments.length;++i)
        {
            objImg=document.all[Bildwechsel.arguments[i]];
            objImg.filters.blendTrans.Apply();
            objImg.src = (objImg.src==arrImg[Bildwechsel.arguments[i]][0].src)
                            ? arrImg[Bildwechsel.arguments[i]][1].src
                            : arrImg[Bildwechsel.arguments[i]][0].src;
            objImg.filters.blendTrans.Play();
        }
}
</script>

    Wichtig:
    der Aufbau der <img>-Tags muss so bleiben, wie du ihn schon hast.
    Soll bedeuten: Die ID des Bildes ist identisch mit dem Dateinamen(mal von der 1 abgesehen)

    also immer nach dem Schema:
    Code :
    1

    <img id="blubb" src="blubb1.gif">
    das Alternativbild dann "blubb2.gif" ....also genauso, wie es schon ist.

    Der Aufruf geht wie folgt:
    Code :
    1

    onMouseOver="Bildwechsel('home','about')"
    ...also jeweils die ID's der zu ändernden Bilder in Anführungszeichen, durch Kommas getrennt.
    (bei onMouseOut dasselbe)

    Wieviele Bilder du da angibst, ist dir überlassen.
     
    Zitieren Zitieren
  5. 15.04.05 22:21 #5
    HardcoreVibes HardcoreVibes ist offline Mitglied
    Registriert seit
    Aug 2003
    Ort
    Nandlstadt
    Beiträge
    22
    genau das hab ich gesucht...

    danke!
     
    Zitieren Zitieren
« Text in Textarea einfügen funktioniert nicht? | möchte Flash vermeiden - Animation ;) »

Ähnliche Themen

  1. Div ein/ausblenden mit blendtrans
    Von Schokohazi im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 06.09.09, 21:51
  2. angelic filters
    Von ikon im Forum Bildbearbeitung & Illustration
    Antworten: 0
    Letzter Beitrag: 10.08.05, 21:08
  3. BlendTrans auto wiederholen
    Von wefewfwqefwefwe im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 05.08.04, 12:48
  4. Filters (die Zweite)
    Von xxenon im Forum CSS
    Antworten: 2
    Letzter Beitrag: 27.06.01, 13:17
  5. Filters
    Von xxenon im Forum CSS
    Antworten: 5
    Letzter Beitrag: 06.06.01, 23:20