Mouseover Problem - verschiedene Hover Grafiken für Navigation - Allgemein

Trainee

Wednesday, August 26th 2009, 2:04pm

Mouseover Problem - verschiedene Hover Grafiken für Navigation

Ich habe folgendes Problem:

Für Mouseover gibts ja im Inet schon zahlreiche Beispiele aber für das was ich brauche habe ich bisher nichts gefunden ...

Also 1.) Wie realisiere ich unten stehendes am betsen ? java, css oder sonstiges ???

2.) Das Problem: Ich hätte gern das in meiner Navi immer wenn ich über den jeweiligen Link gehe eine Grafik eingeblendet wird.
(Siehe Bild Anhang). Nun kommt aber das Problem, die Graik soll keine feste Grafik sein sondern je nachdem welcher Verein dem User zugeordnet ist das Wappen des Vereins ... Ich hoffe ihr versteht so weit was ich da vorhabe

Und wenn der user noch kein zugeordneten Verein hat, dann soll ein fest definiertes NoVerein Wappen angezeigt werden ...

Hoffe jmd aus diesem Forum weiß Rat, also ich habe erst mit Css ein wenig gebastelt und es leider noch nicht hinbekommen ....

MFG

Bolshoi Booze has attached the following image:

vince

Master

Posts: 1,104

2

Wednesday, August 26th 2009, 2:41pm

Hi,

mit css hast du die Möglichkeit Links über die Pseudoklasse :hover zu erweitern, wo du denn natürlich auch ein Bild implementieren kannst.
Das kannst du mit einer Liste und list-style-image realisieren.

Da du das dynamisch realisieren möchtest, könntest du das markup direkt in jedes Listenelement implementieren, wobei du dabei nicht auf die Pseudo Hoverklasse zugreifen kannst, womit das alles flachfällt.

Somit ist dein Ausweg -> JavaScript - Hier hast du die Möglichkeit mit dem Hover Event für den Listeneintrag ein bestimmtes Bild für list-style-image (oder auch über ein eigenes img Tag) zu setzen.

Nutzt du momentan schon JavaScript ? Wenn ja, ein Framework ? Wenn ja, welches ?

Bolshoi Booze

Trainee

Posts: 23

3

Wednesday, August 26th 2009, 6:42pm

also erstmal danke für die Antwort und Information bis hierhin

so da Java ja ein Gebiet ist mit dem ich codingmässig bisher mal null zu tun hatte kann ich dir das nicht genau beantworten zumal ich gerade auch nicht zu Hause bin und kein Zugriff auf die datein habe... aber ich versuche es mal !

also auf meinem Server gibt's das Wcf also das Framework von der wolflab Software(falls das überhaupt was mit dem von dir geforderten Framework zu tun hat

)

anonsten ist bei dem Programm für das dieses gedacht ist kein Framework soviel ich weiß sondern lauft dort alles uber php, MySQL und html ...

es existiert glaube ich nur eine einzige javascrpit Datei beidiesem Programm!

ist das jetzt gut oder schlecht ;-)

Bolshoi Booze

Trainee

Posts: 23

4

Friday, August 28th 2009, 11:40pm

nochmal vorsichtig hoch

Torben Brodt

Administrator

Posts: 8,454

5

Saturday, August 29th 2009, 11:52am

wie lief dein Versuch denn? Da kein Framework dabei ist, musst du es mit "normalem" JavaScript realisieren.

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Bolshoi Booze

Trainee

Posts: 23

6

Saturday, August 29th 2009, 9:03pm

Ich habe es wie erwähnt nur mit CSS probiert!

und habe es nur hinbekommen das ein Wappen für alle angezeigt wurde bei einem veruch die variable anzupassen passiert jedoch gar nichts ...

von Java Script habe ich absolut null Ahnung bin ja gerade erst dabei ordentlich php und MySQL zu pauken und zu verinnerlichen !

Torben Brodt

Administrator

Posts: 8,454

7

Sunday, August 30th 2009, 8:56am

Mit CSS kannst du es lösen indem du dem <li> eine Hintergrundgrafik und dem <a> eine weiße Hinergrundfarbe gibst.
Beim Hovern über das <a> entfernst du das Hintergrundbild an.

Siehe: Navigation mit unterschiedlichen MouseOver-Bildern bzw Demo: http://demo.easy-coding.de/css/navigatio…useover-bildern

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Bolshoi Booze

Trainee

Posts: 23

8

Sunday, August 30th 2009, 9:35am

Das Problem hierbei ist:

in dem Sinne sind es keine unterschiedlichen Bilder also für alle Menüpunkte soll ein und das selbe Bild angezeigt werden.
aber das Bild hängt davon ab, welchen Verein der user hat bzw bei keinem ein standardbild !!!

und das durfte dann nicht nach oben den Punkten gehen weil das ja oben nur mit festen grafikzuweisungen funktioniert

vince

Master

Posts: 1,104

9

Sunday, August 30th 2009, 10:59am

Quoted

Mit CSS kannst du es lösen indem du dem <li> eine Hintergrundgrafik und dem <a> eine weiße Hinergrundfarbe gibst. Beim Hovern über das <a> entfernst du das Hintergrundbild an.

Kreativ muss man sein :thumbup:

Quoted

und das durfte dann nicht nach oben den Punkten gehen weil das ja oben nur mit festen grafikzuweisungen funktioniert

Aber die Zuweisung geschieht nicht in der css Datei, sondern in der Liste.

HTML Code

<ul class="menu">
	<li style="background:url('grafik1.gif') no-repeat right"><a href="#">hover 1</a></li>
	<li style="background:url('grafik2.gif') no-repeat right"><a href="#">hover 2</a></li>
	<li style="background:url('grafik3.gif') no-repeat right"><a href="#">hover 3</a></li>
	<li style="background:url('grafik4.gif') no-repeat right"><a href="#">hover 4</a></li>
</ul>

Somit kannste das ja ganz einfach mit einer Schleife lösen (php).

Bolshoi Booze

Trainee

Posts: 23

10

Sunday, August 30th 2009, 6:06pm

Quoted from "vince"

Quoted

Mit CSS kannst du es lösen indem du dem <li> eine Hintergrundgrafik und dem <a> eine weiße Hinergrundfarbe gibst. Beim Hovern über das <a> entfernst du das Hintergrundbild an.

Kreativ muss man sein :thumbup:

Quoted

und das durfte dann nicht nach oben den Punkten gehen weil das ja oben nur mit festen grafikzuweisungen funktioniert

Aber die Zuweisung geschieht nicht in der css Datei, sondern in der Liste.

HTML Code

<ul class="menu">
	<li style="background:url('grafik1.gif') no-repeat right"><a href="#">hover 1</a></li>
	<li style="background:url('grafik2.gif') no-repeat right"><a href="#">hover 2</a></li>
	<li style="background:url('grafik3.gif') no-repeat right"><a href="#">hover 3</a></li>
	<li style="background:url('grafik4.gif') no-repeat right"><a href="#">hover 4</a></li>
</ul>

Somit kannste das ja ganz einfach mit einer Schleife lösen (php).

ja den Ansatz hatte ich damals bei meinem Versuch auch genauso nur wo kann ich jetzt die variable einsetzten das er sich genau das richtige Bild zieht ? In der php mit der Schleife oder wie ? Verstehe jetzt den nächsten Schritt nicht so ganz :cursing:

vince

Master

Posts: 1,104

11

Sunday, August 30th 2009, 8:10pm

Hi,

Quoted

In der php mit der Schleife oder wie ?

richtig !

Dann poste dochmal deine Ausschnitt.

Bolshoi Booze

Trainee

Posts: 23

12

Monday, August 31st 2009, 10:05am

Quoted from "vince"

Hi,

Quoted

In der php mit der Schleife oder wie ?

richtig !

Dann poste dochmal deine Ausschnitt.

Der code oben steht bir mir so in der html und in der php habe ich noch nichts stehen ...

vince

Master

Posts: 1,104

13

Monday, August 31st 2009, 3:01pm

Quoted from "Bolshoi Booze"

Quoted from "vince"

Hi,

Quoted

In der php mit der Schleife oder wie ?

richtig !
Dann poste dochmal deine Ausschnitt.

Der code oben steht bir mir so in der html und in der php habe ich noch nichts stehen ...

Es gibt x belieb Wege dies zu integrieren, wobei es auch darauf ankommt, wie du deine Seiten baust und in welchem Format du die Daten hast.

So könnte es z.B aussehen:

PHP Quellcode

<? php foreach($foo as $bar) : ?>
<ul class="menu">
	<li style="background:url('<= $bar['picture']  ?>') no-repeat right"><a href="#">hover 1</a></li>
</ul>
<? endforeach(); ?>

Bolshoi Booze

Trainee

Posts: 23

14

Monday, August 31st 2009, 3:33pm

Quoted from "vince"
Quoted from "Bolshoi Booze"

Quoted from "vince"

Hi,

Quoted

In der php mit der Schleife oder wie ?

richtig !
Dann poste dochmal deine Ausschnitt.

Der code oben steht bir mir so in der html und in der php habe ich noch nichts stehen ...

Es gibt x belieb Wege dies zu integrieren, wobei es auch darauf ankommt, wie du deine Seiten baust und in welchem Format du die Daten hast.

So könnte es z.B aussehen:
PHP Quellcode
1
2
3
4
5
<? php foreach($foo as $bar) : ?>
<ul class="menu">
	<li style="background:url('<= $bar['picture']  ?>') no-repeat right"><a href="#">hover 1</a></li>
</ul>
<? endforeach(); ?>

Eine hoffentlich vorerst letzte Frage hätte ich

Muss das in eine extra php Datei oder in eine existierende (in diesem Fall wäre es wohl die index.php)

Torben Brodt

Administrator

Posts: 8,454

15

Monday, August 31st 2009, 7:18pm

Wenn du die Features des Woltlab Frameworks nutzen magst gehört in deine Klassendatei eine Zuweisung

	PHP Quellcode
1	WCF::getTPL()->assign('menu', $menu);

und der Rest gehört in Smarty Syntax in dein Smarty Template.

Aber das hat nichts mit deiner konkreten Frage zu tun. Hast du denn schon eine sichtbare Navigation (ohne bunte Logos)

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Bolshoi Booze

Trainee

Posts: 23

16

Tuesday, September 1st 2009, 12:20am

ja die sichtbare Navigation existiert schon

Nur ist das ganze nicht für das wcf gedacht sondern für ein anderes Programm auf meinem Server

Bolshoi Booze

Trainee

Posts: 23

17

Monday, September 7th 2009, 4:31pm

Leider weiterhin ungelöst das Problem. Habe zwar oben versucht den Code in die index.php einzubauen aber danach kamm ein syntax Fehler...

MMMhhhh :pinch:

Torben Brodt

Administrator

Posts: 8,454

18

Monday, September 7th 2009, 5:56pm

wo ist denn das Problem?

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Bolshoi Booze

Trainee

Posts: 23

19

Tuesday, September 8th 2009, 2:38pm

Quoted from "d0nut"

wo ist denn das Problem?

Das Programm ist einfach was komplexer ich denke da ist das so ohne weiteres nicht möglich. Habe zwar oben den Code eingefügt und angepasst aber leider ohne Erfolg

Torben Brodt

Administrator

Posts: 8,454

20

Tuesday, September 8th 2009, 5:45pm

schade.
Aber nichts bei dem wir helfen können?

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Coder Forum

Mouseover Problem - verschiedene Hover Grafiken für Navigation

Mouseover Problem - verschiedene Hover Grafiken für Navigation

Quoted

Quoted

HTML Code

Quoted from "vince"

Quoted

Quoted

HTML Code

Quoted

Quoted from "vince"

Quoted

Quoted from "Bolshoi Booze"

Quoted from "vince"

Quoted

PHP Quellcode

Quoted from "vince"

Quoted from "Bolshoi Booze"

Quoted from "vince"

Quoted

PHP Quellcode

PHP Quellcode

Quoted from "d0nut"

Similar threads

Tagging

Social bookmarks