✔ Bild bei mouseover faden (in, out).

  • Themenstarter Themenstarter Comenius
  • Beginndatum Beginndatum
C

Comenius

Guten Abend,

ich weiss ehrlich gesagt nicht wann ich angefangen habe, nach Tutorials und fertigen Scripts zu suchen.... Egal.

Meine Navigationsleiste besteht aus Bildern die durch CSS bei mouseover durch andere ersetzt werden. Alles kein Problem.

So ein fade-Effekt ist allerdings - zumindest in meinen Augen - viel cooler ;)

Nun habe ich eine Zeit lang mit Flash herumgespielt, was natürlich überhaupt nicht geklappt hat. Außerdem würde dann ja noch die Sache mit dem Flashplayer kommen.

Also bin ich auf die Suche nach Javascript gegangen und sogar mehr oder weniger fündig geworden. Leider sind manche Tutorials nicht ausführlich beschrieben, oder nur für den IE ausgelegt. Eine Lösung die all das besitzt was mich glücklich machen würde, habe ich allerdings nicht gefunden.

Daher nun mein Anliegen:

Wie schon gesagt, habe ich meine Hyperlinks in Bilder gepackt, die durch mouseover durch andere ersetzt werden sollen. Das ganze möchte ich nun mit einem fade in, sowie out! realisieren.

Eigentlich würde ich mich schon mit einem schönen Tutorial zufrieden geben :)

Ich hoffe, mir kann jemand helfen und bedanke mich einfach schonmal.

Gruss
Commi
 
hmm, ein Tutorial zu schreiben habe ich keine Lust, aber ich kann dir ein Beispiel machen:
Code: 
...
<script language="javascript">
//hier werden die Bilder vorgeladen
var foher;
foher = new Image(); 
foher.src="foher.jpg"; // Pfad zu dem ersten Bild
var nacher;
nacher = new Image();
nacher.src="nacher.jpg"; // Pfad zu dem zweitem Bild
</script>
<body>
<a href="http://www.tutorials.de"><img src="foher.jpg" alt="" onmouseover="this.src=nacher.src;" onmouseout="this.src=foher.src;" /></a>
</body>
...

wenn ich keine Tippfehler drinne habe müsste es gehen ^^
 
Hmmmm,

Funktioniert 1A, Danke. Aber jetzt bin ich genauso weit wie mit meinem CSS-Code :)

Ich wollte das ja gerne mit einem "Fade-Übergang" realisieren.

Kannst du dir sowas vielleicht auch mal eben locker aus dem Ärmel schütteln? ;)

Gruss
Commi
 
hmmm, das ist der selbe Prinzip ;)
da kannst dann eine Function machen, die halt nicht nur 2 bilder aus wechselt sondern 3:
Code: 
.. //hier die var img;
//img.src = ".... 
var nacher = new Array();
naher[1] = new Image();
naher[1].src = "nacher1.jpg";
naher[2] = new Image();
naher[2].src = "nacher2.jpg";
... // und so weiter
//dann die function:
function fade_in(img)
{
for(var i = 1; i<= 5; i++)
{
    img.src=nacher[i].src;
}
}
 
:confused: :( :confused: <------ Genau so habe ich gerade ausgesehen.

Wären die ersten zwei Zeilen nicht, hätte ich den Code jetzt einfach 1 zu 1 kopiert, aber ich verstehe es leider nicht:

.. //hier die var img;
//img.src = "....

Wäre cool, wenn du mir das vielleicht noch etwas erklären könntest.
Achja, falls das am Ende echt läuft (was ich doch annehme ;-] ), geht das dann in allen Browsern, oder nur im IE ?

Danke

Gruss
Commi
 
@thetrue

Ich glaube, Comenius meint mit "Fade", das ein Bild ausgeblendet wird und das andere eingeblendet...und das fliessend, also über die Änderung der Transparenz der beteiligten Bilder.

Ich hab auf Basis dieses Skriptes-> http://www.tutorials.de/forum/javas...unktioniert-nicht-im-mozilla.html#post1151359

...mal was gebastelt:
Funktionsweise: das zuerst anzuzeigende Bild ist im Link als Hintergrundbild angegeben.
Das Austauschbild ist in diesen Link eingebunden, über die Transparenz-Formate des IE/Mozilla aber erstmal versteckt.
Beim mouseover wird die Transparenz heraufgesetzt...beim mouseout wieder reduziert.

Funktioniert halt in IE/Mozilla ....andere Browser ermöglichen kein Ändern der Transparenz.


Test-> http://www.doktormolle.de/temp/image_fader/
 
ich denke Comenius meint eher eine Animation, wie mit flash ...
@Sven Mintel aber damit kann man nur halt die transparenz ändern ... aber wenn man gute effecte hinkriegen will hilft deine Möglichkeit net so ...

so:
hier
http://the-true.net/tuts/menu/menu.html
ist das Beispiel!
hier der Code:
Code: 
<html>
<head><title>Menu Beispiel</title></head>
<script language="javascript">
var imgi = new Array(); // Array erstellen
imgi[1] = new Image(); // Array füllen ..
imgi[1].src =  "1.jpg"; // Bild vorladen
imgi[2] = new Image(); 
imgi[2].src =  "2.jpg";
imgi[3] = new Image();
imgi[3].src =  "3.jpg";
imgi[4] = new Image();
imgi[4].src =  "4.jpg";
imgi[5] = new Image();
imgi[5].src =  "5.jpg";
imgi[6] = new Image();
imgi[6].src =  "6.jpg";
imgi[7] = new Image();
imgi[7].src =  "7.jpg";
var i = 2;
var obj;
var stop_open = false; // damit man weiß ob Menu weiter aufmachen soll...
function openn(objn) // function für öffnen
{
	obj = objn; // img object
	stop_open = false; // damit open functioneirt ...
	openm(); // die haupt function
}
function closen(objn)
{
	obj = objn;
	stop_open = true; // damit open nicht functiniert aber close
	closem();	
}
function openm()
{
	obj.src=imgi[i].src; // bilder tauschen ...
	if(i < 7 && stop_open == false)
	{
		i++;
		setTimeout("openm();", 100); // speed des Tauschs ...
	}
}
function closem()
{
	obj = document.getElementById('bild');
	obj.src=imgi[i].src;
	if(i >1 && stop_open == true)
	{
		i--;
		setTimeout("closem();", 100);
	}
}
</script>
<body>
<a href="http://www.the-true.net"><img id="bild" src="1.jpg" alt="thetrues Menu" onmouseover="openn(this);" onmouseout="closen(this);" /></a>
</body>
</html>

ich finde ist eine gut gelungene Animation :)
mfg thetrue

PS: functioneirt in allen Browser ...
 
Zuletzt bearbeitet:
Puuhh... Coole Sachen habt ihr da ja.

Ich weiss nur leider nicht, ob sich mit einer der beiden oben genannten Möglichkeiten mein Vorhaben umsetzen lässt.

Deshalb jetzt mal eine Grafik meiner Navigationsleiste:

Grauer Pfeil = Normalzustand
Oranger Pfeil = Mouseover
Schwarzer Pfeil = Aktiver Link

3 Grafiken, die mit CSS einfach geladen werden.

Nun möchte ich gerne bei mousover einen schönen weichen übergang von dem grauen, zum orangenen Pfeil.

Mein Grundgedanke bestand darin, ein paar Grafiken die unterschiedliche orange, - bzw. Grautöne besitzen, mit einem JS - Code zusammen zu flicken.

Gruss
Commi
 

Anhänge

  • Navigation.JPG
    Navigation.JPG
    5,1 KB · Aufrufe: 50
hmm, ich denke da ist meine möglichkeit besser, aber die andere würde auch gehen zwar net so ganz doll, aber es würde gehen
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück