Mobilfähiges Mousover

02.04.2019 15:04
#1
Th

Hallo miteinander,
mein erster Beitrag. Ich würde gerne ein Mousover einbauen, dabei spielt das Design ja keine Rolle. Ein einfaches mousover mittels:

<a href="Link"><img src="Standardbild" alt="" onmouseover=
"src='Mouseoverbild'" onmouseout="src='Standardbild'" /></a>

Funktioniert auch alles ABER:
Die beiden Bilder, die ich im Hintergrund ( nicht sichtbare Seite ) "herhole" haben ja eine bestimmte Größe. Auf der Dsktopversion problemlos, aber sobald ich die IPAD-Version mir ansschaue, hat das erste und wohl auch das zweite Bild die Originalgröße des hinterlegten Bildes. Wende ich width und height an, egal ob Angabe per Größe oder %, passt es nicht. Ist die Darstellung auf der Desktop-version passend, ist das Bild in der IPAD Version vieeeellll zu groß. Was kann ich da machen ?


 Antworten

 Beitrag melden
02.04.2019 18:31 (zuletzt bearbeitet: 02.04.2019 18:33)
avatar  az_
#2
avatar
az_

...gib dem Bild per CSS eine Breite für mobil und eine andere für Desktop. Dazu kannst Du @media-queries benutzen. Mobil: @media (max-width:767px) {...}

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
03.04.2019 09:04
#3
Th

Hallo az_

zuerst mal vielen Dank, dass sich überhaupt jemand meldet. Kannst du mir bitte mal den kompletten Befehl schreiben. Ich kenne mich mit css und scriptsachen überhaupt nicht aus . Wäre super nett


 Antworten

 Beitrag melden
04.04.2019 21:18
avatar  az_
#4
avatar
az_

Hallo Thomas,
Leider hatte ich in der letzten Zeit sehr viel zu tun und offenbar ging es den anderen Forum Benutzern ähnlich.
Es gibt verschiedene Ansätze eine Maus over zu gestalten. Für die mobile Ansicht ist es immer schwierig, die meisten Geräte mögen das sowieso nicht wirklich. Ich hatte aber gerade eine geschrieben, dass das kommt. Bloß habe ich blöderweise einen Fehler in der Schriftgröße gemacht. Das muss ich noch beheben, dann kann ich dir ein Beispiel zeigen.
Wenn du in CSS nicht fit bist, wird dir das allerdings nicht viel helfen. Ich müsste es dir für deine Webseite einrichten.Das ist aber auch kein besonders großer Aufwand.
LG, AZ


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
04.04.2019 23:04
avatar  az_
#5
avatar
az_



https://www.jane-weber.com/

...wir haben hierfür ein PlugIn benutzt, welches den Alt -tag des Bildes als Overlay benutzt. Die Breite ist 100% - das müsste auch für ein img gelten, wenn es on mouseover geladen wird.

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
05.04.2019 08:38
#6
Th

Hallo,

naja, was heisst nicht fit. Den fertige Code in das Widget oder Head einfügen kann ich und ggf. die Größen anpassen. Ist halt eine sture herumprobiererei


 Antworten

 Beitrag melden
05.04.2019 10:39 (zuletzt bearbeitet: 05.04.2019 10:39)
avatar  az_
#7
avatar
az_

...vielleicht ist es nur eine Kleinigkeit, die bei Dir fehlt, aber sorry, ohne URL ist es immer schwer, sich ein Bild zu machen.

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!