Headerwechsel per Mouseover

tinchen · 25.11.2006, 15:01

Hallo ihr,

ich habe mal wieder eine Idee, aber zu wenig Ahnung von JS oder gar Ajax um das umzusetzen. Vielleicht könnt ihr mir im Grundsatz ein wenig helfen.

Ich möchte, dass der Header bereits beim Mouserover wechselt. Dabei soll der User über das Topmenü den Header beeinflussen können. Beim Laden wird dann das Bild zum Standardbild, dass jeweils beim Mouseover zu sehen ist. Verständlich?

Ist das sinnvoll hier JS zu benutzen oder muss man da eine Stufe härter ran?

Wenn JS ausreichen sollte kann man jemand ein Beispiel geben, die man per
Mouseover in einem Link ein Bild in einem Div wechselt?

Gruß
Tine

agrajag · 25.11.2006, 15:19

das ganze ist eigentlich nicht so schwer:

per onmouseover-Event wechselst du einfach das Hintergrundbild des divs. Bei onmouseout setzt du wieder das "Standardbild".

Wenn du dem div eine id verpasst hast kannst du ganz einfach über document.getElementById("dieide").style.background das Hintergrundbild setzen:

http://de.selfhtml.org/javascript/ob..._eigenschaften

tinchen · 25.11.2006, 16:59

Meine ersten Ideen sehen so aus. Vielleicht kann man jemand etwas unter die Arme greifen, denn das läuft noch nicht richtig. Dann werde ich die Bilder wohl per JS vorladen, bleibt mit bei header wohl nichts anderes über. Zudem würde mich interssieren, ob man da noch einen Überblendeffekt einbauen kann? Wenn möglich in der Art, dass man das an- bzw. ausstellen kann.

So sieht es bis jetzt aus:

PHP-Code:

  var headerImage = new Array();

headerImage[0] = "pic1.jpg";

headerImage[1] = "pic2.jpg";

 
function changeHeaderImage(imgindex) {

    if (document.getElementById){

        document.getElementById("header").style.backgroundImage  = "url([imgindex])";

    }

}

 
function getHeaderImage() {

         if (document.getElementById){

        document.getElementById("header").style.backgroundImage  = "url(pic2.jpg)";

    }

}

 
//-->

</script>

 
[url="#"]link1[/url]

[url="#"]link2[/url]

Derzeit wird das Bild beim Mouseover nicht geladen.
Der Fehler steckt hier, aber wie muss es richtig heißen?
"url([imgindex])"; oder = "url(headerImage[imgindex])";
Geht beides nicht.

Gruß
Tine

nikosch · 25.11.2006, 17:13

ich denke
style.backgroundImage = "url(" + headerImage[imgindex] + ")";
müßte richtig sein.

tinchen · 25.11.2006, 17:20

Danke, dass passt. Bei der Gelegenheit bin ich dann auch zu

PHP-Code:

  "url(" + headerImage[imgindex] + ") no-repeat";

konvertiert.

Gruß
Tine

tinchen · 26.11.2006, 12:48

Hallo,

Meine Frage ist nun, wie man das vielleicht etwas weniger hart gestalten kann.
Die Bilder wechseln relativ schnell. Kann man da eine Art Überblendeffect einbauen?
Ich habe schon eine ganze Weile im Netz gesucht, aber da ist so richtig nichts dabei.
Mal nur für IE, mal ungeeigent, mal weiß ich überhaupt gar nichts damit anzufangen.

Weiterhin tritt auf der genannten Seite hin und wieder ein JS Fehler auf. Nicht immer,
nur sporadisch, ich kann keinen Algorithmus feststellen. Woran mag das liegen?
Angeblich werden zwei Funktionen nicht gefunden, die sind aber definitiv da.

Gruß
Tine

nikosch · 26.11.2006, 16:00

betreffs der Fehler: bei mir tauchen jene auf, wenn ich schnell genug bin, (vor dem laden der externen JS Dateien? vorher) auf einen Button den Rollover auszuführen.

zumindest mit DSL find ich die Bannerwechsel so eigentlich i.O.

hat es eigentlich nen tieferen sinn, dass du an alle deine funktionen wie z.B. changeHeaderImage() immer den selben pfad übergibst? kann der auch wechseln? ansonsten mach dir doch ne konstante in JS.

brian johnson · 26.11.2006, 22:49

lass dafür die finger von JS und benutze CSS.....

http://www.1ngo.de/web/bildwechsel.html

tinchen · 26.11.2006, 23:06

Das Menu und Header direkten Kontakt haben, ist nur in diesem Beispiel so.
Es soll möglich sein Menü und Header vollständig voneinanderer zu trennen.
Da wird eine reine CSS Lösung wohl eher schwierig.

Gruß
Tine

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] "Spezielles" Mouseover	errox	JavaScript, Ajax und mehr	51	26.06.2008 13:11
[JS] mouseover	cycap	HTML, Usability und Barrierefreiheit	1	29.08.2006 00:15
Navigationmit Mouseover Effekt	themonk	HTML, Usability und Barrierefreiheit	1	15.08.2006 23:09
div erscheint bei mouseover	yoshy	HTML, Usability und Barrierefreiheit	3	03.03.2006 09:35
[Erledigt] Einfacheres MouseOver		HTML, Usability und Barrierefreiheit	1	07.01.2006 16:46
JS: Mouseover Effekt für Bilder. Nach include geht er nicht		HTML, Usability und Barrierefreiheit	4	03.12.2005 16:30
Abgerundetes Rechteckt mit MouseOver Effekt?		HTML, Usability und Barrierefreiheit	1	30.10.2005 18:13
Textarea Inhalt per mouseover ändern		HTML, Usability und Barrierefreiheit	10	07.09.2005 12:08
mouseover menu		HTML, Usability und Barrierefreiheit	3	22.08.2005 13:31
[Erledigt] Mouseover Menü in Javascript und PHP Lösung ?		PHP Tipps 2005-2	4	20.07.2005 08:48
Mouseover popup	seejay	HTML, Usability und Barrierefreiheit	3	31.05.2005 21:48
Mausverfolger bei Mouseover	Tschuu	HTML, Usability und Barrierefreiheit	1	17.05.2005 12:18
Bild in Zeile bei Mouseover ändern	Tschuu	HTML, Usability und Barrierefreiheit	7	11.03.2005 12:42
a mouseover class ändern	022.9	HTML, Usability und Barrierefreiheit	4	18.02.2005 15:51
[Erledigt] mouseover		HTML, Usability und Barrierefreiheit	15	19.07.2004 18:18

25.11.2006, 15:01
tinchen Erfahrener Benutzer Registriert seit: 16.02.2006 Beiträge: 303	Headerwechsel per Mouseover Hallo ihr, ich habe mal wieder eine Idee, aber zu wenig Ahnung von JS oder gar Ajax um das umzusetzen. Vielleicht könnt ihr mir im Grundsatz ein wenig helfen. Ich möchte, dass der Header bereits beim Mouserover wechselt. Dabei soll der User über das Topmenü den Header beeinflussen können. Beim Laden wird dann das Bild zum Standardbild, dass jeweils beim Mouseover zu sehen ist. Verständlich? Ist das sinnvoll hier JS zu benutzen oder muss man da eine Stufe härter ran? Wenn JS ausreichen sollte kann man jemand ein Beispiel geben, die man per Mouseover in einem Link ein Bild in einem Div wechselt? Gruß Tine


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

25.11.2006, 15:19
agrajag Moderator Registriert seit: 02.10.2006 Beiträge: 3.820 PHP-Kenntnisse: Fortgeschritten	das ganze ist eigentlich nicht so schwer: per onmouseover-Event wechselst du einfach das Hintergrundbild des divs. Bei onmouseout setzt du wieder das "Standardbild". Wenn du dem div eine id verpasst hast kannst du ganz einfach über document.getElementById("dieide").style.background das Hintergrundbild setzen: http://de.selfhtml.org/javascript/ob..._eigenschaften __________________ Today you...Tomorrow me.

25.11.2006, 16:59
tinchen Erfahrener Benutzer Registriert seit: 16.02.2006 Beiträge: 303	Meine ersten Ideen sehen so aus. Vielleicht kann man jemand etwas unter die Arme greifen, denn das läuft noch nicht richtig. Dann werde ich die Bilder wohl per JS vorladen, bleibt mit bei header wohl nichts anderes über. Zudem würde mich interssieren, ob man da noch einen Überblendeffekt einbauen kann? Wenn möglich in der Art, dass man das an- bzw. ausstellen kann. So sieht es bis jetzt aus: PHP-Code: var headerImage = new Array(); headerImage[0] = "pic1.jpg"; headerImage[1] = "pic2.jpg"; function changeHeaderImage(imgindex) { if (document.getElementById){ document.getElementById("header").style.backgroundImage = "url([imgindex])"; } } function getHeaderImage() { if (document.getElementById){ document.getElementById("header").style.backgroundImage = "url(pic2.jpg)"; } } //--> </script> [url="#"]link1[/url] [url="#"]link2[/url] Derzeit wird das Bild beim Mouseover nicht geladen. Der Fehler steckt hier, aber wie muss es richtig heißen? "url([imgindex])"; oder = "url(headerImage[imgindex])"; Geht beides nicht. Gruß Tine

25.11.2006, 17:13
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 34.253 PHP-Kenntnisse: Fortgeschritten	ich denke style.backgroundImage = "url(" + headerImage[imgindex] + ")"; müßte richtig sein.

25.11.2006, 17:20
tinchen Erfahrener Benutzer Registriert seit: 16.02.2006 Beiträge: 303	Danke, dass passt. Bei der Gelegenheit bin ich dann auch zu PHP-Code: `"url(" + headerImage[imgindex] + ") no-repeat";` konvertiert. Gruß Tine

26.11.2006, 12:48
tinchen Erfahrener Benutzer Registriert seit: 16.02.2006 Beiträge: 303	Hallo, Meine Frage ist nun, wie man das vielleicht etwas weniger hart gestalten kann. Die Bilder wechseln relativ schnell. Kann man da eine Art Überblendeffect einbauen? Ich habe schon eine ganze Weile im Netz gesucht, aber da ist so richtig nichts dabei. Mal nur für IE, mal ungeeigent, mal weiß ich überhaupt gar nichts damit anzufangen. Weiterhin tritt auf der genannten Seite hin und wieder ein JS Fehler auf. Nicht immer, nur sporadisch, ich kann keinen Algorithmus feststellen. Woran mag das liegen? Angeblich werden zwei Funktionen nicht gefunden, die sind aber definitiv da. Gruß Tine

26.11.2006, 16:00
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 34.253 PHP-Kenntnisse: Fortgeschritten	betreffs der Fehler: bei mir tauchen jene auf, wenn ich schnell genug bin, (vor dem laden der externen JS Dateien? vorher) auf einen Button den Rollover auszuführen. zumindest mit DSL find ich die Bannerwechsel so eigentlich i.O. hat es eigentlich nen tieferen sinn, dass du an alle deine funktionen wie z.B. changeHeaderImage() immer den selben pfad übergibst? kann der auch wechseln? ansonsten mach dir doch ne konstante in JS.

26.11.2006, 22:49
brian johnson Erfahrener Benutzer Registriert seit: 16.07.2005 Beiträge: 1.007 PHP-Kenntnisse: Fortgeschritten	lass dafür die finger von JS und benutze CSS..... http://www.1ngo.de/web/bildwechsel.html __________________ PHP4?!?>>>Aktuelle PHP Version: 5.2.11 \|\| 5.3.0 Suse 11.2 vorfreude

26.11.2006, 23:06
tinchen Erfahrener Benutzer Registriert seit: 16.02.2006 Beiträge: 303	Das Menu und Header direkten Kontakt haben, ist nur in diesem Beispiel so. Es soll möglich sein Menü und Header vollständig voneinanderer zu trennen. Da wird eine reine CSS Lösung wohl eher schwierig. Gruß Tine