Mouseover mit verändertem Bildschirmhintergrund

Kroetlein schrieb am 15.08.2018 um 00:44 Uhr

Hallo, liebe Community.

Seit Stunden tüftle ich mit dem Webdesigner Premium (15.1) herum und finde keine Lösung. Nichts von allem, was ich versucht habe, klappt. Da muss die Schwarmintelligenz der Community her! Gut, dass es Euch gibt.

Ziel: Ich möchte bei einem kleinen Element auf der "Mouseoff"-Ebene einen Mouseover-Effekt erzeugen: Der Hintergrund der Website soll komplett eine andere Grafik / jpg sein, also ein bildschirmfüllendes neues Bild B, vermutlich ja auch einer neuen Ebene. Wenn ich dann von diesem Element wieder runtergehe, soll der ursprüngliche Hintergrund A wieder erscheinen.

Dabei ist wichtig, dass nicht nur ein bildschirmfüllendes Bild B erscheint, sondern auch die Texte usw., die auf der Mouseoff-Ebene - also vor dem Hintergrund A - zu sehen sind - auch wenn diese klarerweise nicht funktional sein müssen. Aber es soll zumindest so aussehen, als hätte sich nur der Hintergrund geändert.

Problem: Das Problem ist ja, dass ein "bildschirmfüllendes" Bild dann auch den Trigger, also das auslösende Element, verdeckt, so dass das Signal, das bildschirmfüllende Bild B wieder verschwinden zu lassen, gar nicht gegeben werden kann.

Frage: Wie kann man einen Mouseover-Effekt erzeugen (und auch wieder beenden lassen), der auch das auslösende Trigger-Element überdeckt?

Ob Ihr mir helfen könnt? Ich wäre sehr dankbar, denn bisher habe ich auch bei der Suche hier und sonst im Netz keine Antwort gefunden.

Vielen lieben Dank

Kroetlein

Kommentare

Kroetlein schrieb am 15.08.2018 um 01:08 Uhr

Hm, seltsam. Sollte die Community geholfen haben ohne auch nur einen einzigen Buchstaben zu schreiben? That's magic. Oder Magix.

Also, im Moment funktioniert es plötzlich - auch wenn der Mouseover-Effekt ein wenig hakt und hängt, manches mal funktioniert er, manches Mal nicht.

Habe also neue Ebene angelegt, alles, was drauf muss, reinkopiert. Dann das jpg eingefügt und gross gezogen.

Was ich gegenüber allen früheren Versuchen nun anders gemacht habe, ist die Skalierung / Ausdehnung der Grafik B. Bei "Eigenschaften der Ausdehnung" habe ich nun bei der Grafik B, die eben erscheinen und wieder verschwinden soll, "Ganze Breite" oder "Ganze Höhe" angeklickt. Dann den Mouseover-Effekt definiert (Pop-Up dieser Ebene) und Häkchen bei "Popup automatisch schliessen" bei "Effekt".

Nun scheint es zu funktionieren.

Verstanden habe ich es zwar nicht, aber es funzt immerhin.

Ist das der richtige Weg? Sicher gibt es einen eleganteren, zuverlässigeren Weg, oder?

BeRo schrieb am 16.08.2018 um 15:02 Uhr

[...] Ist das der richtige Weg? Sicher gibt es einen eleganteren, zuverlässigeren Weg, oder? [...]

"Alle Wege führen nach Rom" 😎
Aber natürlich hast Du recht, wenn Du meinst, dass es auch eleganter geht...

Was Du brauchst, ist eine Methode mit der Du das Hintergrundbild austauschen kannst, wenn das "kleine Element" mit der Maus berührt wird.

Eine Website kann z. B. so aussehen, wie unten gezeigt. Da ist das "kleine Element" ein Bild, das beim Berühren mit der Maus eine JS Funktion aufruft, die ein CSS Script startet, das dafür sorgt, dass das obere von 2 Hintergrundbildern ausgeblendet wird, das Hintergrundbild wird also geändert.

Die online Demo kannst Du hier ansehen. Die dazu gehörende Projektdatei (inkl. Hilfsverzeichnis) findest Du hier, für eigene Experimente.

Wenn das die Lösung ist, die Du gesucht hast, erklär' ich Dir gerne wie Du das auf Deiner Site nachbauen kannst...

BTW
Hast Du bei Deinem Projekt berücksichtigt, dass die o. a. Lösung nur auf Desktop Rechnern funktioniert?
Alle Besucher Deiner Site, die mit mobilen Geräten unterwegs sind, sind von dem Effekt ausgeschlossen.
Weil es bei Smartphone, Tablet & Co nun mal keine Maus gibt, ist eine MouseOver Funktion hier immer zum Scheitern verurteilt 😫

Zuletzt geändert von BeRo am 16.08.2018, 15:02, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Kroetlein schrieb am 16.08.2018 um 22:54 Uhr

Grossen Dank für die Antwort.

Genau das hatte ich gesucht. Danke auch für die Projektdatei (das Hilfsverzeichnis habe ich nicht gefunden, aber das liegt gewiss an mir...)

Leider kann ich als absoluter Noob mit Javascript nicht umgehen, und bei CSS Scripts weiss ich nicht mal, was das ist. Ich fürchte, das überfordert mich. Aber schön, zu wissen, dass es prinzipiell geht. ;-)

Wegen der Inkompatibilität mit mobilen Geräten: Kann ich den Mouseover-Effekt in der mobilen Version nicht einfach rausnehmen, wenn ich die Projektdatei sowieso immer parallel auch für Smartphone / Tablet nachbearbeite? Auf meinem iPad funktioniert der Mouseover übrigens zumindest dann, wenn ich auf das Triggerobjekt klicke.

Ich schicke Dir mal eine PN mit weiteren Infos.

BeRo schrieb am 17.08.2018 um 15:10 Uhr

[...] das Hilfsverzeichnis habe ich nicht gefunden, [...]

Das findest Du im ZIP Archiv...

Aber wenn Du ohne Script Programme arbeiten willst, benötigst Du es eh nicht.

Die von Dir gefundene Lösung mag nicht ganz so elegant sein, dafür ist sie relativ einfach zu realisieren.

[...] im Moment funktioniert es plötzlich - auch wenn der Mouseover-Effekt ein wenig hakt und hängt, manches mal funktioniert er, manches Mal nicht. [...]

Wenn Du das noch störende Objekt im Bereich der Kreisgrafiken entfernst, klappt‘s auch zuverlässig mit der MouseOver Funktion. 😊

Also, gerne viel Erfolg

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Kroetlein schrieb am 17.08.2018 um 15:54 Uhr

... was Du alles siehst...! Danke vielmals, ich werde das mal machen.

Das Hilfeverzeichnis ist bei mir tatsächlich nicht drin, in diesem zip-Ordner liegt nur ein jpg namens "teacher.jpg". Es sind nach dem Entzippen nur zwei Dateien: "teacher.jpg" (im Unterordner) und "CSS-JS.web". Wahrscheinlich ist es ein besonders intelligentes zip, das von vornherein merkt, dass ich mit Script ohnehin überfordert wäre 😄

BeRo schrieb am 17.08.2018 um 16:00 Uhr

[...] Es sind nach dem Entzippen nur zwei Dateien: "teacher.jpg" (im Unterordner) und "CSS-JS.web". [...]

Der Unterordner ist das Hilfsverzeichnis (Verzeichnis = Ordner) 😉

Demnach ist alles i. O. 👍

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Kroetlein schrieb am 17.08.2018 um 16:10 Uhr

Aha, ich dachte, da wäre so etwas wie eine "Hilfe" drin 🙂

Drin ist aber nur ein jpg. Aber egal, die Hilfe kommt ja von Dir.

Was dieses Objekt im Bereich der beiden Kreise betrifft, so "call me an idiot", aber ich finde nix. Bin völlig confused. Ich werde weiter suchen, denn Du hast recht, erst wenn man auch aus diesem Objekt raus ist, ändert sich der Hintergrund wieder.

BeRo schrieb am 17.08.2018 um 16:53 Uhr

[...] ich dachte, da wäre so etwas wie eine "Hilfe" drin [...]

Das ist tatsächlich so. Die "Hilfe" ist aber keine Hilfe in Textform, wie Du ja schon bemerkt hast, sondern eine Funktion, die dafür sorgt, dass alle im Hilfsverzeichnis enthaltenen Dateien- und ggf. Unterverzeichnisse beim Export eines Projekts automatisch in das exportierte Verzeichnis "index_htm_files" kopiert werden. Damit erübrigt sich ein manuelles Nacharbeiten des exportierten Projekts, wenn bestimmte Dateien für den korrekten Ablauf nötig sind, die vom WD nicht selbst erzeugt wurden (s. komplette Infos am Ende des Kommentars)

[...] Was dieses Objekt im Bereich der beiden Kreise betrifft, so "call me an idiot", aber ich finde nix [...]

Stell' mal die Ansichtsqualität auf "Umriss", dann kannst Du sehr viel leichter alle Objekte erkennen, die Du auf der Site untergebracht hast...

Da liegen noch weiter Objekte herum, die vermutlich ebenfalls überflüssig sind, obwohl sie die MouseOver Funktion im Bereich der Kreisobjekte nicht stören.

Hier die komplette Info zum Thema "Hilfsverzeichnis":

----------------------------------------------
Ein Hilfsverzeichnis wird vom WD automatisch erstellt, wenn Du z. B. eine vorhandene Grafik (oder einen Platzhalter) durch eine extern gespeicherte Grafik ersetzt.
Alternativ kannst Du das Hilfsverzeichnis manuell anlegen. Dazu erstellst Du in dem Verzeichnis, in dem die Projektdatei (z. B. "sitename.web") liegt, ein neues Verzeichnis. Das Verzeichnis muss den Namen des Projekts haben (hier "sitename"), erweitert um "_web_files".
Für unser Beispiel hat das Hilfsverzeichnis also den Namen "sitename_web_files".
Alle Dateien, die Du in dieses Verzeichnis kopierst, werden vom WD bei einem Export/Upload automatisch gelesen und in das Datei Verzeichnis "index_htm_files" kopiert.
Dort eventuell schon vorhandene Originaldateien werden dabei mit den Dateien aus dem Hilfsverzeichnis überschrieben!
Wenn Du die "Hilfsverzeichnis" Methode benutzt, musst Du dich also um die korrekte Organisation Deiner Script- oder Multimediadateien nicht mehr kümmern, das macht dann der WD vollautomatisch.
Denk' aber daran, dass alle Links/Verweise/Referenzangaben, die sich auf eine der im Hilfsverzeichnis abgelegten Dateien beziehen, immer und ausschließlich auf das engültig genutzte Verzeichnis "index_htm_files" zeigen müssen. Andernfalls wirst Du mit Fehlermeldungen- oder Fehlfunktionen "belohnt"...

-----------------------------------------------

Viel Erfolg... 😋

 

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓