  |
| Autor |
Nachricht |
MemphisBelle
User [User]
Anmeldung: 11.02.08
Beiträge: 15
|
 Verfasst am: 09.08.2008, 01:43 Titel: Spezielle Rollover Effekte (Bild in Bild rollover) |
 |
|
Hallo,
ich habe eine sehr spezielle Frage. Auf unserer Homepage habe ich bereits viele rollover effekte eingebaut und map codes eingefügt. Ich kann sagen, daß ich darin auch sehr konfom bin. Was mich aber interessiert, ist die Frage, ob ich mit der Verbindung von Rollover effekten und dem map Befehle (Anteile einer Grafik verlinken) auch z.B. einen Rollover effekt innerhalb einer Grafik erzeugen kann. Z.B. ein Bild, indem ein Grafikanteil speziell mit rollover effekt belegt werden kann und zudem auch als Link dient.
Um das ganze noch etwas genauer zu Beschreiben, hier ein kleines Beispiel. Da wir ein Kunstflugteam sind, liegt ein Cockpit Instrument sehr nahe. In diesem Fall ein MFD (Multi Funktions Display), mit verschiedenen Tasten. Ich würde gerne die Grafik so "coden", das beim überfahren der Knöpfe, diese einzeln Rollover effekte hervorbringen und dann auch noch verlinkt werden können, obwohl der ganze MFD eine einzige Grafik ist.
Ist sowas überhaubt möglich?
Wenn mir da jemand helfen könnte, währe ich sehr dankbar.
MFG
MemphisBelle
|
|
| Nach oben |
|
 |
umt
Beliebter [User]
Anmeldung: 29.11.07
Beiträge: 323
|
| Verfasst am: 09.08.2008, 06:19 Titel: |
|
|
Als schnelle spontane Idee:
Du könntest für jeden Knopf ein gesamtes Bild mit Knopfeffekt erstellen, das dann beim Hovern eben das gesamte Bild überdeckt.
(Ich hoffe, ich habe mich verständlich ausgedrückt.)
Leider hab ich gerade keine Zeit, länger darüber nachzudenken.
Vielleicht fällt mir später noch was besseres ein.
_________________
 www.jexlab.net - Webentwicklung zu fairen Konditionen
www.netzonaut.de - Blog zum Thema Webentwicklung, Internet, Linux und OpenSource-Software
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1642
|
| Verfasst am: 09.08.2008, 09:16 Titel: |
|
|
<a class="hover1">Linktext<div class="hover1_hiddentext">blubb!</div></a>
a.hover1 .hover1_hiddentext {
visibility: hidden;
position: absolute;
top: 300px;
left: 200px;
}
a.hover1:hover .hover1_hiddentext {
visibility: visible;
}
Das funktionierte prinzipiell, soweit ich mich erinnern kann.
Du müsstest da jetzt nur noch für jeden Knopf entsprechend ein hover-Bild statt dem Text ("blubb!") einsetzen und entsprechend ausrichten.
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
MemphisBelle
User [User]
Anmeldung: 11.02.08
Beiträge: 15
|
| Verfasst am: 09.08.2008, 09:50 Titel: |
|
|
An sowas habe ich natürlich auch gedacht. Ich nutze bisher das usemap verfahren, um einen Bereich in einer Grafik zu verlinken.
Hier mein Beispiel für eine usemap (Bildanteil verlinken) coords können am besten mit paint ermittelt werden
| Zitat: |
|
Hier mein Beispiel für den Rollover effekt
| Zitat: |
|
Jetzt will ich beides verbinden, indem ich die Knöpfe in dieser Grafik 1.) mit o.a usemapbeispiel verlinke und 2.) mit dem danach folgenden Beispiel einen Rollover effekt verpasse.
Das MFD von dem ich gesprochen habe mit den originalen Buttons
| Zitat: |
|
Hier sollen die Buttons ersetzt werden, diese sind hier bereits ausgeschnitten.
| Zitat: |
|
Die Frage ist jetzt, wie verbinde ich die beiden oberen Quelltexte miteinander, so das mein Plan Realität wird.
|
|
| Nach oben |
|
|
MemphisBelle
User [User]
Anmeldung: 11.02.08
Beiträge: 15
|
| Verfasst am: 09.08.2008, 10:03 Titel: |
|
|
| chris1988 hat folgendes geschrieben: | Linktext<div class="hover1_hiddentext">blubb!</div>
a.hover1 .hover1_hiddentext {
visibility: hidden;
position: absolute;
top: 300px;
left: 200px;
}
a.hover1:hover .hover1_hiddentext {
visibility: visible;
}
Das funktionierte prinzipiell, soweit ich mich erinnern kann.
Du müsstest da jetzt nur noch für jeden Knopf entsprechend ein hover-Bild statt dem Text ("blubb!") einsetzen und entsprechend ausrichten. |
Danke für Deine Antwort,
OK. Danke für Deine Antwort, aber kommt das ganze in den Kopf? Das sieht mir wie CSS aus...liege ich da richtig? Wie wird das ganze denn dann weiter ausgebaut, das ist mir jetzt nicht klar.
Zuletzt bearbeitet von MemphisBelle am 09.08.2008, 10:15, insgesamt einmal bearbeitet
|
|
| Nach oben |
|
|
MemphisBelle
User [User]
Anmeldung: 11.02.08
Beiträge: 15
|
| Verfasst am: 09.08.2008, 10:05 Titel: |
|
|
| umt hat folgendes geschrieben: | Als schnelle spontane Idee:
Du könntest für jeden Knopf ein gesamtes Bild mit Knopfeffekt erstellen, das dann beim Hovern eben das gesamte Bild überdeckt.
(Ich hoffe, ich habe mich verständlich ausgedrückt.)
Leider hab ich gerade keine Zeit, länger darüber nachzudenken.
Vielleicht fällt mir später noch was besseres ein. |
Ich verstehe schon wie Du das meinst, aber mit welchem Befehl genau, lege ich die eine Bilddatei über die andere? Mit dem Beispiel von Chris1988?
|
|
| Nach oben |
|
|
koellmania
Erfahrener [User]
Anmeldung: 09.04.08
Beiträge: 95
|
| Verfasst am: 09.08.2008, 10:24 Titel: |
|
|
also ich würde da einfach auf flash gehn.
hab zwar selber noch nie damit gearbeitet, aber damit hättest Du dein Problem auf dem einfachsten Wege vom Hals. 
|
|
| Nach oben |
|
|
placido
Helfer [User]
Anmeldung: 16.10.07
Beiträge: 194
|
| Verfasst am: 09.08.2008, 11:43 Titel: |
|
|
oder du schneidest die ganze grafik auseinander und setzt sie in html wieder zusammen. Da kannst du dann ganz bequem jeden Knopf der ja eine grafik ist (eine grafik = ein Knopf)) hovern.
So würde ich es der einfachheits halber machen. Die maps dinger sind auch nicht wirklich suchmaschinenfreundlich
_________________
Relativitätstheorie:
Wenn ich Dir einen Finger ins Auge stecke, haben wir beide einen Finger im Auge, aber ich bin relativ besser dran
Browserspiele
|
|
| Nach oben |
|
|
umt
Beliebter [User]
Anmeldung: 29.11.07
Beiträge: 323
|
| Verfasst am: 09.08.2008, 13:09 Titel: |
|
|
| MemphisBelle hat folgendes geschrieben: | | Ich verstehe schon wie Du das meinst, aber mit welchem Befehl genau, lege ich die eine Bilddatei über die andere? Mit dem Beispiel von Chris1988? |
Überdeckt war wohl nicht das richtige Wort.
Ich meinte das eigentlich so, wie du es ja auch schon geplant hast, mit onmouseover und onmouseout.
Den Vorschlag von placido finde ich allerdings noch besser. Ist irgendwie sauberer so.
Aber am allerbesten gefällt mir die Idee von chris1988.
Damit brauchst du kein Javascript mehr dafür, und CSS ist imho Javascript immer vorzuziehen, weil es barrierefrei ist.
_________________
www.jexlab.net - Webentwicklung zu fairen Konditionen
www.netzonaut.de - Blog zum Thema Webentwicklung, Internet, Linux und OpenSource-Software
Zuletzt bearbeitet von umt am 11.08.2008, 15:35, insgesamt 2-mal bearbeitet
|
|
| Nach oben |
|
|
placido
Helfer [User]
Anmeldung: 16.10.07
Beiträge: 194
|
| Verfasst am: 09.08.2008, 13:11 Titel: |
|
|
von der suchmaschinenfreundlichkeit ganz zu schweigen  .
JavaScript + Suchmaschinenfreundlichkeit = Verderben
_________________
Relativitätstheorie:
Wenn ich Dir einen Finger ins Auge stecke, haben wir beide einen Finger im Auge, aber ich bin relativ besser dran
Browserspiele
|
|
| Nach oben |
|
|
MemphisBelle
User [User]
Anmeldung: 11.02.08
Beiträge: 15
|
| Verfasst am: 09.08.2008, 14:31 Titel: |
|
|
| placido hat folgendes geschrieben: | von der suchmaschinenfreundlichkeit ganz zu schweigen .
JavaScript + Suchmaschinenfreundlichkeit = Verderben |
Da kommts mir auch nicht drauf an. Die Seite wird schon von den Leuten gefunden, von den sie auch gefunden werden soll...das ist nicht das Problem. Denn was will ein Koch mit einer Seite für virtuellen Kunstflug? Ausserdem funktioniert die Suche bei Google mit den entsprechenden von mir definierten Stichwörtern ganz gut... 
|
|
| Nach oben |
|
|
placido
Helfer [User]
Anmeldung: 16.10.07
Beiträge: 194
|
| Verfasst am: 09.08.2008, 14:34 Titel: |
|
|
ein koch würde auch nie deine seite suchen ^^.
Abgesehen davon hat auch nicht jeder Java Script aktiviert, wodurch die Lösung mit CSS besser ist als mein Vorschlag mit dem Javascript mouse over
_________________
Relativitätstheorie:
Wenn ich Dir einen Finger ins Auge stecke, haben wir beide einen Finger im Auge, aber ich bin relativ besser dran
Browserspiele
|
|
| Nach oben |
|
|
MemphisBelle
User [User]
Anmeldung: 11.02.08
Beiträge: 15
|
| Verfasst am: 09.08.2008, 16:21 Titel: |
|
|
Wie genu funktioniert das mit dem hover eigentlich. Ich kenne jetzt diese befehle, wo ich im Schriftzug beim drübergehen von z.B. Schwarz auf Rot wechseln kann. Wenn ich jetzt eine Grafik über eine andere Grafik "hovern" will, muss ich doch auch die coordinaten mit angeben, oder nicht. Ich bastele die ganze Zeit schon hier rum, aber kommr nicht wirklich weiter....
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1642
|
| Verfasst am: 09.08.2008, 18:02 Titel: |
|
|
Ich komm grad nicht mehr ganz mit.
Soll nur der Button einen Hover-Effekt bekommen, oder noch mehr über diesen Button hinaus?
Für den CSS-Ansatz ist das arbeiten mit Imagemaps unvorteilhaft, da der IE<7 die Pseudoklasse hover soweit ich weiß nur für das Standard-Linktag (<a>) kennt.
Aber bei dir sind ja alle Buttons eigentlich schön quadratisch - wofür also die Imagemap?
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
MemphisBelle
User [User]
Anmeldung: 11.02.08
Beiträge: 15
|
| Verfasst am: 09.08.2008, 22:54 Titel: |
|
|
Die imagemap brauche ich nur zum verlinken der einzelnen Buttons. Daher suche ich ja eine Möglichkeit, beidesn miteinander zu verknüpfen.
Das ist mein Bisheriges Ergebnis für das Projekt. Das ist jetzt erst mal nur die Imagemap.
MFD mit imagemap
|
|
| Nach oben |
|
|
|
|
