onMouseover Image mit sensitiver Grafik

PHP, Ajax, CSS, HTML, Javascript
Eben für die wirklich Harten, die alles selber machen.
modbo
Beiträge: 1344
Registriert: Mo 13.Dez, 2004 11:18
Kontaktdaten:

onMouseover Image mit sensitiver Grafik

Beitrag von modbo »

Mit nachfolgendem Code lassen sich auf einer Grafik rechteckige Bereiche definieren, welche sich beim Überfahren mit der Maus in weiterleitende Bereiche (Hotspots, Hyperlinks) verwandelt.

Code: Alles auswählen

<BODY>

<CENTER> 

<map name="Startseite">
<area shape="rect" coords="220,175,344,206" href="Link1.html" TARGET="Main" alt="Seite1">
<area shape="rect" coords="220,255,344,286" href="Link2.html" TARGET="Main" alt="Seite2">
<area shape="rect" coords="670,411,745,480" href="Link3.html" TARGET="Main" alt="Seite3">
</map>
<img src="images\Startseite.jpg" Target="Main" border=0 alt="Startseite" usemap="#Startseite"></p>

</CENTER>

</BODY>
Ist es möglich in den jeweils rechteckig definierten Bereich zusätzlich einen Hover-Button zu legen?
Qausi soll über der Grafik Startseite.jpg eine Ebene mit Buttons liegen, welche beim Überfahren einen Hover-Effekt aufweisen.
Geht das?

Bei Selfhtml oder Google bin ich leider nicht nicht fündig geworden.

Alternativ wäre es auch ausreichend, würden sich "leere" Buttons bereits im Image (Startseite.jpg) befinden, und nur der drübergelegte Text würde hovern.

Als Beispiel mal folgendes Attachment.
Entweder sollten jetzt beim Überfahren der Grafik die Buttons hovern, oder alternativ eben nur der Text von grau nach z.B. orange wechseln.
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Zum Hovern müsste hier ein Bild über das bestehende gelegt werden, da ja ansonsten das gesamte Bild gehoovert würde.
Ich wäre da überfragt, wie nur ein Bereich gehoovert werden könnte...

Oder vielleicht klappt es, in jeder "area" mit onmouseover="style..." zu arbeiten.
So könnte man den gesamten Hintergrund heller einstellen (mit style bei der map-definition oder des Bildes) und beim Hoover über eine Area würde (theoretisch) nur das "Rechteck", das mit der Maus überfahren wird, dunkler...
Die Javascript-Vorlage zum Hoovern liefert hier dann, sollte es so überhaupt möglich sein, der Mod "Hyper Buttons".
Im schlimmsten Fall wäre das Bild einzeln zusammenzusetzen und dann das jeweilige Bild zu hoovern. Die vielleicht einzigste Alternative.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
AmigaLink
Beiträge: 5843
Registriert: Mi 03.Mär, 2004 09:05
Wohnort: NRW
Kontaktdaten:

Beitrag von AmigaLink »

Im schlimmsten Fall wäre das Bild einzeln zusammenzusetzen und dann das jeweilige Bild zu hoovern. Die vielleicht einzigste Alternative.
Ich wage zu behaupten das dies der einzige weg ist.

// EDIT
Oder aber, das Bild als Tabellenhintergrund einsetzen und die Tabellenzellen, bzw. deren inhalt, als Link benutzen. :)
Zuletzt geändert von AmigaLink am Di 29.Mär, 2005 12:07, insgesamt 1-mal geändert.
[center].: Web Relax .::. Essen mit Freude .::. AmigaLink.de :.
______________________________________

Kein Support per PM, ICQ oder eMail!!!
[/center]
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Oder aber, das Bild als Tabellenhintergrund einsetzen und die Tabellenzellen, bzw. deren inhalt, als Link benutzen.
Das wäre das gleiche wie ohne Tabelle: Hoover nur mit neuem "übergeblendetem" Bild möglich...
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
modbo
Beiträge: 1344
Registriert: Mo 13.Dez, 2004 11:18
Kontaktdaten:

Beitrag von modbo »

>Zum Hovern müsste hier ein Bild über das bestehende gelegt werden, da ja ansonsten das gesamte Bild gehoovert würde.
Genauso meine ich das. Ginge das und wenn wie? Wie gesagt, ich find da nichts.

>Tabellenhintergrund
Könnte man probieren, mit festen Größen, sonst funktioniert es ja nicht.

Die Problematik hat übrings nichts mit phpbb zu tun. Einen Mod benötige ich daher nicht. Die Seite ist rein html und steht in keinem Zusammenhang mit einem Forum.
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Schau mal diese Seite an: http://www.restaurantkaiserwilhelm.de/
Ist dieser Hoover-Effekt in etwa in Deinem Sinne?
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
modbo
Beiträge: 1344
Registriert: Mo 13.Dez, 2004 11:18
Kontaktdaten:

Beitrag von modbo »

Der Hover-Effekt ja. Allerdings ist auf der Seite ein Seitenhintergrundbild eingefügt, was sich je nach Seitengröße vervielfacht.
Das funktioniert in meinem Fall nicht, da das Bild nur einmal exitieren darf: http://www.svbomber.de/beispiel/
Die gesamte Darstellung basiert auf einem Image.
Zuletzt geändert von modbo am Di 29.Mär, 2005 13:54, insgesamt 2-mal geändert.
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Der Hoover Effekt sollte es auch nur sein, nicht das Hintergrundbild.
Diesen Hoover-Effekt meinte ich, als ich schrieb: Mit einem Bild ersetzen.
Das wird hier gemacht.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
Susan
Beiträge: 530
Registriert: Mo 03.Jan, 2005 22:55
Wohnort: Hamburg

Beitrag von Susan »

Hi,

soll das alles nur 1 Bild sein/werden? Mächtig Groß das ganze Teil (auch Aufbaumäßig). Ich würde das ganze "zerschnippseln und in Tabellen packen. Dann ist es kein Problem 2 Buttons zu erstellen. 1 Button der angezeigt wird wenn man auf die Seite kommt, 1 Button der sich ändert beim überfahren der Maus (Hoovereffekt)

Die Teilbereiche die Du meinst nennt man "Imagemap". In GoLive sehr einfach zu erstellen. Hoovereffekte sind auch da möglich. Jedoch muß man da schon sehr genau arbeiten, damit die "Buttons" dann richtig funktionieren (und keinen unschönen Touch erhalten).

Ich würde die Tabelle vorziehen. Grafik "zerschnippseln" und den Seitenaufbau somit optimieren.

gruß
Susan
modbo
Beiträge: 1344
Registriert: Mo 13.Dez, 2004 11:18
Kontaktdaten:

Beitrag von modbo »

@oxpus: Ja, ok. Der Hover-befehl ist ja nicht das Problem. Der wird bei selfhtml auch erklärt.
http://de.selfhtml.org/javascript/beispiele/buttons.htm
Allerdings basiert das Beispiel auf einem eingefärbten Hintergrund. In meinem Fall liegt über dem Hintergrund (mal in Ebenen betrachtet) das Hintergrundbild und darüber müssten dann die Hover-Buttons liegen.
Und da strecke ich Code technisch alle Viere von mir :)

@Susan: Naja, das Bild hat 150KB und ich hab die Seite nicht gestaltet. Ich wollte meiner Schwester lediglich einen Gefallen tun, indem die Buttons optisch etwas auffälliger werden (animiert halt).
Die Imagemap kann selbst Frontpage erstellen (dort heisst es Hotspots). Das ist nicht weiter schwer. Rechteck aufziehen und fertig.

Letztendlich wäre die Lösung mit dem Zerschnippseln schon die optimale Lösung, dachte halt nur, es geht vielleicht auch anders und mit vorerst geringerem Aufwand :)

Quasi den Hover-befehl mit in diese Codezeile basteln ...

Code: Alles auswählen

<area shape="rect" coords="220,175,344,206" href="Link1.html" TARGET="Main" alt="Seite1"> 
Zuletzt geändert von modbo am Di 29.Mär, 2005 15:26, insgesamt 1-mal geändert.
Benutzeravatar
Susan
Beiträge: 530
Registriert: Mo 03.Jan, 2005 22:55
Wohnort: Hamburg

Beitrag von Susan »

naja, wenn das Bild im ganzen bleibt kann man es auch mit den Hotspots versuchen. Man muß halt gucken wie man das am Besten mit der onMouse-Grafik löst. Ich könnte ja versuchen Dir mal ne Grafik zu basteln wenn Du mir sagst was Du Dir vorstellst .... Was ist das für eine Schriftart?

gruß
Susan
Zuletzt geändert von Susan am Di 29.Mär, 2005 20:12, insgesamt 1-mal geändert.
modbo
Beiträge: 1344
Registriert: Mo 13.Dez, 2004 11:18
Kontaktdaten:

Beitrag von modbo »

>Schriftart
Keine Ahnung, wäre aber auch egal. Es geht ja nur erstmal um das Prinzip, wie es codeseitig umzusetzen wäre.
Wäre lieb, wenn du mir da mal ein Beispiel zeigen könntest. Kann ruhig einfachster Bauart sein.
Es müsste am Schluss halt nur ein Bild herauskommen, auf dem ein Button liegt, der sich beim Mouseover verändert ;)

Ich teste grad das auseinanderschnippeln und zusammenfügen mit einer Tabelle :)
Benutzeravatar
Susan
Beiträge: 530
Registriert: Mo 03.Jan, 2005 22:55
Wohnort: Hamburg

Beitrag von Susan »

Hi,

ich war faul *g*, deshalb hab ich ImagReady verwendet. Hier mal ein Beispiel wie es mit der Imagemap funktioniert.
Im Prinzip sehr simpel. Das einzige was ich daran nicht gut finde ist das die Grafik so groß ist .....

gruß
Susan
Benutzeravatar
Rondom
Beiträge: 17
Registriert: Sa 01.Mai, 2004 23:05
Wohnort: Germany
Kontaktdaten:

Beitrag von Rondom »

Ich würde es zuerst mit der hover-Pseudoklasse versuchen. Wenn diese von nicht standardkonformen Browsern wie Internet Explorer nicht beachtet wird, würde ich transparente Layer (oder Anker) auf der Grafik, die Hintergrund eines Elternlayers, absolut positionieren und diese auch mit :hover wechseln lassen.
modbo
Beiträge: 1344
Registriert: Mo 13.Dez, 2004 11:18
Kontaktdaten:

Beitrag von modbo »

@Susan: Ok. Aber so hovert halt das ganze Bild, was ich ja nicht wollte.
Mittlerweile bin ich auch mit dem schnippeln fertig. Ist wohl die einzige? in jedem Fall aber beste Lösung imho.
Hier mal das Beispiel. Ist nur schnell zusammengefriemelt. Jedenfalls lassen sich die Buttons so schnell austauschen und individuell umgestalten.

Besten Dank an alle ^q
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Na ist doch gut geworden.
Und den Hover Effekt kann man ja noch ändern, bei Bedarf.
Auch Fading wäre hier ja noch denkbar, Scripts hierzu gibts ja zu Tausenden im Inet.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
Susan
Beiträge: 530
Registriert: Mo 03.Jan, 2005 22:55
Wohnort: Hamburg

Beitrag von Susan »

Ja ist doch gut :). Also bei mir verändert sich nur die Schrift wenn ich mir mein Teil angucken. Der Hintergrund bleibt fest *grübel*.

Aber Du wirst sehen. Die Tabellenvariante ist besser und auch einfacher, und schont auch die Leitung ins Inet ;)

gruß
Susan
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Die Tabellenvariante ist besser und auch einfacher, und schont auch die Leitung ins Inet
Möööööhp. Falsch: Die ganzen Tabellendefinitionen werden mit vom Client geladen und belasten daher mehr die Leitung, als sie hier wirklich nützen!
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
Susan
Beiträge: 530
Registriert: Mo 03.Jan, 2005 22:55
Wohnort: Hamburg

Beitrag von Susan »

*tuuuuuuut* ^9

wenn man die ganzen Tabelleninfos zb in einer Zeile schreibt oder die Zeilen sehr gering hält dann ist das nicht viel und wird relativ schnell geladen ..... Auf jeden Fall besser als wenn man so nen riesen Bild lädt <--- das hab ich damit gemeint. Mir kanns egal sein, hab hier ne 5 Mbit Leitung. Aber es gibt auch noch Leute die langsamer unterwegs sind. ;)

[OffTopic] Mir fehlen die Spiele ¦4 - Hoffe es kommt wieder was :anbet [OffTopic Ende]
Zuletzt geändert von Susan am Di 29.Mär, 2005 23:40, insgesamt 1-mal geändert.
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Öh, das Bild wird doch eh geladen, die Tabellendefinition wäre hier extra...
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
Susan
Beiträge: 530
Registriert: Mo 03.Jan, 2005 22:55
Wohnort: Hamburg

Beitrag von Susan »

Aber in ner Tabelle wird das Bild gestückelt geladen und ist daher nicht sooo lastig ...
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Susan,
die Definitionen einer Tabelle helfen zwar, Daten strukturierter darzustellen, müssen aber extra mit geladen werden und das kostet nunmal Traffic und Bandbreite.
Wenn die Bilder auch ohne Tabellen schlanker dargestellt und dennoch gehoovert werden können, ist der Seitenaufbau schneller. Wenn auch nicht unbedingt soooo spürbar. Modembenutzer würden es aber danken ;)
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
modbo
Beiträge: 1344
Registriert: Mo 13.Dez, 2004 11:18
Kontaktdaten:

Beitrag von modbo »

[quote="oxpus - Di 29.März, 2005 23:16";p="27262"]Na ist doch gut geworden.
Und den Hover Effekt kann man ja noch ändern, bei Bedarf.
Auch Fading wäre hier ja noch denkbar, Scripts hierzu gibts ja zu Tausenden im Inet.[/quote]
Ja, klar. Ich hatte nur nicht ide original Photoshop Vorlage, sondern nur das Bild. Daher hab ich halt nur mal schnell den inneren Schatten dort eingefügt.

Zu eurem Thema: Sicher muss die Tabellenstruktur mit geladen werden. Das beansprucht aber wesentlich weniger Ressourcen, als die Variante von Susan, wo das gesamte Bild für jeden gehoverten Button neu geladen wird. Die Tabelleninformationen nehmen vielleich 1KB ein, die zusätzlichen Bilder von Susan 150KB :)

Ohne Tabellensruktur scheint es halt nicht zu gehen. Dennoch bleicht die Seitengestaltung relativ pflegeleicht. Das Auseinanderschnippeln ist denkbar einfach.

Als Demo hat es jedenfalls völlig ausgereicht. Ist gut angekommen.
Benutzeravatar
Susan
Beiträge: 530
Registriert: Mo 03.Jan, 2005 22:55
Wohnort: Hamburg

Beitrag von Susan »

jo, große Bilder sind immer schlechter als kleine zerschnippselte. Um die Tabellenstruktur von der Datenmenge klein zu halten sollte man in der html-Datei die Zeilen gering halten. Je weniger Zeilen man hat desto geringer ist die Datengröße (wobei hier die Bilderdatengröße keine Rolle spielt)........

Meine Datei war nur ein Beispiel, auch von den Bildern her (ging ja vorangig um das hovern). Naja, ist ja jetzt gegessen ;) - Du machst das schon.
Benutzeravatar
oxpus
Administrator
Beiträge: 28737
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

@Susan
Also mal zum Grundsätzlichen:
Alles was man auf einer Webseite angezeigt bekommt, wird direkt vom Client über die Leitung aus dem Internet geladen. Also alle Bilder, Definitionen, Texte, etc.
Und wenn man mehr Bilder laden muss, die dann von der Dateigrösse auch noch grösser sind, dauert der Aufbau der Seite entsprechend länger.
Wenn allerdings die Bilder schon 150 KB belegen (die armen Modem-User), machen die Tabellendefinitionen sicher nichts mehr aus.
Und weniger Zeilen ist nicht gleich weniger Code, bzw. weniger Datengrösse!
Ich kann die viewtopic.php auch in weniger als ein Drittel der ursprünglichen Grösse, bzw. Zeilenanzahl schreiben; sie bleibt dennoch gleich groß und gleich schnell ;)

@modbo
Du müsstest mal prüfen, wie gross das zerteilte Bild denn nun ist. Du kannst auch eine Tabelle erstellen, als Tabellenhintergrund das komplette Bild (möglichst als JPG oder GIF klein halten) einstellen und als Hoover-Effekt in den einzelnen Zellen eben die neuen Bilder anzeigen lassen. Ist die bequemste und einfachte Art, Deine Anfrage umzusetzen.
Bedenke aber immer, daß alle Bilder, also das Hintergrundbild und die Bilder für die Hoover-Effekte komplett vom Benutzer geladen werden. Das kostet also Ladezeit! Daher möglichst dafür sorgen, daß jedes Image bei gewünschter Qualität eine möglichst kleine Datei hervorbringt.
Tipp (sofern nicht so bekannt): Eine Reduzierung der Qualität von JPG-Images auf 70-80% bringt z.B. kaum sichtbare Verschlechterungen, aber die Dateien selber werden auf ca. 1/3 geschrumpft.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Antworten