WinFuture-Forum.de: Welche Möglichkeiten gibt es für hover bei Bildern - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Welche Möglichkeiten gibt es für hover bei Bildern


#1 Mitglied ist offline   bluemoon14 

  • Gruppe: aktive Mitglieder
  • Beiträge: 81
  • Beigetreten: 06. Juli 14
  • Reputation: 0

geschrieben 13. Juli 2017 - 22:14

Hallo,
ich würde gerne eine Art hover-Effekt bei einem Bild einer Website machen, also irgendein Effekt beim Darüberfahren mit der Maus.
Welche Möglichkeiten gibt es?
0

Anzeige



#2 Mitglied ist offline   Gispelmob 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.591
  • Beigetreten: 14. August 15
  • Reputation: 392

geschrieben 14. Juli 2017 - 05:36

Alle.

- wenn du css benutzt, kannst du als Effekt alles ändern was in css machbar ist
- wenn du javascript benutzt (onmouseover), kannst du als Effekt alles machen was mit javascript machbar ist
AMD Ryzen 9 5950X, Asus ROG Strix X570-F Gaming, 32GB Corsair DDR4-3200, Asus Geforce GTX 3060 12GB, Creative Sound Blaster AE-7, 240GB SSD, 500GB SSD, 3x 1TB SSD, Win11 Home, 4x Acer G246HL Bbid, Logitech MX518 Gaming Mouse, Logitech G440 Mousepad, Logitech K120 Keyboard, Razer Tiamat 7.1 V2 Headset, Creative Inspire 5.1 5300 Soundsystem
0

#3 Mitglied ist offline   RalphS 

  • Gruppe: VIP Mitglieder
  • Beiträge: 8.895
  • Beigetreten: 20. Juli 07
  • Reputation: 1.126
  • Geschlecht:Männlich
  • Wohnort:Zuhause
  • Interessen:Ja

geschrieben 14. Juli 2017 - 06:38

Die Frage ist unvollständig. :)

Was ist denn das für eine Website? Und was ist die angedachte Zielgruppe? (Einschließlich ggf "Übungswebsite, um zu sehen, was geht".)

Ansonsten ist weniger eher mehr. Ja, man kann auch das Bild dreimal um den Monitor hopsen lassen, wenn man mit der Maus in die Nähe kommt. Die Frage ist nur: Will man das? Oder wollen die Benutzer das? Wenn man zB eine Schaltfläche hätte in einem Onlineshop "Jetzt kaufen" und die haut aber ab, wenn man draufklicken will, naja dann ist das kontraproduktiv.

Ansonsten wie schon angedeutet, limitieren hauptsächlich:

- Die Phantasie
- Die gewünschte (ggf vorgeschriebene) Methodik / Einsatz von CSS, aktivem Scripting, etc pp); sowie
- die eigenen Fertigkeiten.

Dieser Beitrag wurde von RalphS bearbeitet: 14. Juli 2017 - 06:40

"If you give a man a fish he is hungry again in an hour. If you teach him to catch a fish you do him a good turn."-- Anne Isabella Thackeray Ritchie

Eingefügtes Bild
Eingefügtes Bild
0

#4 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 14.289
  • Beigetreten: 08. April 06
  • Reputation: 885
  • Geschlecht:Männlich
  • Wohnort:Dortmund NRW
  • Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)

geschrieben 14. Juli 2017 - 13:10

Hab das auf meiner Website mit nen "Kunstgriff" geregelt...

CSS und dementsprtechend angepasste Grafiken.

CSS besteht bei mir entsprechend aus zwei Klassen

.socialIcons {
	width:				64px;
	height:				64px;
	background-repeat:	no-repeat;
	background-position:right;
	position:			relative;
	float:				left;
	left:				80px;
	}
.socialIcons:hover {
	background-position:left;
	}


Im HTML-Teil wird das dann so eingebunden
<div class="socialIcons" style="background-image: url(pfad/zum/bild.png);"></div>


Die Grafiken sind entsprechend 128*64pixel groß. "Normalerweise" wird der rechte Teil angezeigt, beim Maushover der linke
0

#5 Mitglied ist offline   Holger_N 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.111
  • Beigetreten: 11. September 10
  • Reputation: 458
  • Geschlecht:Männlich

geschrieben 14. Juli 2017 - 14:32

Ich glaube aber es geht nicht darum, dass einfach nur das Bild sich ändert oder den Code dafür bzw. ist das nur eine Möglichkeit. Für mich vermutet der TE offensichtlich, dass es eine feste Anzahl von Ereignissen gibt, die man auslösen kann, wenn man mit der Maus über ein Bild geht und die sollen wir jetzt aufzählen, damit er entscheiden kann, was er in seine Seite einbaut. Nach dem Muster:

Bild wechselt
Ton wird abgespielt
DVD-Laufwerk geht auf
Mutti bringt Orangesaft
Bildschirm wird grün
Fotoshow startet
Seite wechselt die Ansicht
Mauszeiger wechselt die Farbe
Hund bellt


und dann überlegt er sich, er möchte einbauen, dass ein Ton abgespielt wird. Weil er einfach nur eine Seite bauen will aber noch keine konkrete Idee hat, was drin sein soll und wie sie aussehen soll.
Bauernregel: Regnets mächtig im April, passiert irgendwas, was sich auf April reimt.
0

#6 Mitglied ist offline   Gispelmob 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.591
  • Beigetreten: 14. August 15
  • Reputation: 392

geschrieben 14. Juli 2017 - 15:07

Dann empfehle ich w3schools, selfhtml für die Grundlagen.
AMD Ryzen 9 5950X, Asus ROG Strix X570-F Gaming, 32GB Corsair DDR4-3200, Asus Geforce GTX 3060 12GB, Creative Sound Blaster AE-7, 240GB SSD, 500GB SSD, 3x 1TB SSD, Win11 Home, 4x Acer G246HL Bbid, Logitech MX518 Gaming Mouse, Logitech G440 Mousepad, Logitech K120 Keyboard, Razer Tiamat 7.1 V2 Headset, Creative Inspire 5.1 5300 Soundsystem
0

#7 Mitglied ist offline   bluemoon14 

  • Gruppe: aktive Mitglieder
  • Beiträge: 81
  • Beigetreten: 06. Juli 14
  • Reputation: 0

geschrieben 14. Juli 2017 - 16:34

Danke für Eure Vorschläge, ich habe jetzt das Bild unverändert gelassen, dafür daneben einem Text mit hover-effekt
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0