Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag15.06.2013 um 16:20 (UTC)    
Titel: Hover- und Mouseover Effekt via CSS

Im Bereich "Allgemeine Fragen" / "Probleme mit der Homepage" glaube bzw. hoffe ich, daß ich hier richtig bin.

Ich habe Probleme mit der Homepage, und bitte daher um Hilfe.

Frage 1, bezüglich einem "Hover Effekt":
Ich möchte ein Bild haben, daß wenn man drüber fährt das Bild wegverschwindet, und drunter ein anderes Bild vorkommt. Versteht ihr was ich meine? Wie macht man sowas ?
Gehtdas auch das man das drunterliegende Bild ein Tick größer hat, so daß es den Einduck macht, es "springt" etwas entgegen?
Oder z.B. daß die untenrum-Pics alle einheitlich grau sind, beim Drüberfahren jedoch Bunt raus kommen?

Frage Nr. 2, bzgl. einen "Mouseover Effekt":
Wie macht man das, daß eine Schrift beim Mouseover (Drübergehen mit der Maus) sich beispielsweise vergrößert und/oder die Schriftfarbe wechselt ?
Welchen Quelltext müsste man dafür verwenden ?

Für die Profis unter Euch habe ich noch "Herausforderungen". Diese finden sich hier und sind Fragen bzgl.
iframe, RSS, Widgets, Schripteinbindung, interne Weiterleitung auf eigene Page, sowie Dropdownmenü. Hier der Link:
http://www.homepage-baukasten.de/forum/viewtopic.php?p=783924&highlight=#783924

Ich freue mich über jede verständlich geschriebene Antwort, die mir hilft und mich dem Ergebnis näher bringt.

(Falls falscher Thread, bitte ggf. verschieben)

MFG Tiger

Edit by Matsk: Titel angepasst und in die Kategorie CSS verschoben.
______________
www.tiger-1980-ostrach.de.tl
www.revolting-bones.de


Zuletzt bearbeitet von tiger-1980-ostrach am 16.06.2013, 07:50, insgesamt einmal bearbeitet
Beitrag15.06.2013 um 18:58 (UTC)    
Titel:

Mit diesem code vergrößert sich das Bild, solange man sich mit der Maus darüber aufhällt:
Der code funktioniert auch ohne Javascript!
Code:
<style type="text/css">
.bild {width:50px; height:auto;  float: left;}
.bild:hover { width:54px; height:auto; }
</style>

<img class="bild" src="http://profile.webme.com/profile/t/tiger-1980-ostrach/small.png" />

<img class="bild" src="http://profile.webme.com/profile/t/tiger-1980-ostrach/small.png" />

<img class="bild" src="http://profile.webme.com/profile/t/tiger-1980-ostrach/small.png" />

<img class="bild" src="http://profile.webme.com/profile/t/tiger-1980-ostrach/small.png" />

<img class="bild" src="http://profile.webme.com/profile/t/tiger-1980-ostrach/small.png" />


Zuletzt bearbeitet von schreibmalwas am 15.06.2013, 20:01, insgesamt 2-mal bearbeitet
Beitrag16.06.2013 um 09:06 (UTC)    
Titel:

Vielen Dank, schreibmalwas. Das funktioniert hervorragend !

Somit also Frage 1 b beantwortet. Fehlt nur noch 1 a und 1 c (die sich ähnlich sind), bzw. meine Frage 2. Freiwillige vor. Jeder der was weiß, bitte reinschreiben. Freu mich auf Eure Antwort, danke...

Tiger
______________
www.tiger-1980-ostrach.de.tl
www.revolting-bones.de
Beitrag16.06.2013 um 20:05 (UTC)    
Titel: der mouseover-effekt

Hallo nochmal,
tiger-1980-ostrach hat Folgendes geschrieben:
Ich möchte ein Bild haben, daß wenn man drüber fährt das Bild wegverschwindet, und drunter ein anderes Bild vorkommt.

Mit diesem code verschwindet das Bild beim Überfahren mit der Maus und es erscheint ein anderes Bild darunter. und es geht danach wieder in den Ausgangszustand zurück. Funktioniert nur mit css und ohne Javascript:
Zitat:
<style type="text/css">
.block {width:50px; height:50px; overflow:hidden;}
.block img{width:100%; height:100%; }
.block:hover .bild{display:none; }
</style>

<div class="block">
<img class="bild" src="http://profile.webme.com/profile/t/tiger-1980-ostrach/small.png" />
<img src="http://profile.webme.com/profile/s/schreibmalwas/small.png" />
</div>

50px = Breite des Bildes
50px = Höhe des Bildes

mfg: schreibmalwas
______________
Alles über 3D-Druck | Heimsteuerung mit Rapberry PI | Kontakt - über mich
FAQ YOU!!! - Ich biete keinen Support über PN an!!! - bitte schreibt im Forum
Homepage-Tools: HTML-Grundkurs | Farbtabelle | Mi† Soиdεrzeichen schreiЬen
CSS-Tuturials: CSS-Grundkurs | Transparente Elemente | Farbverläufe | Boxschatten | CSS-Rahmen | Textschatten | Hintergrundbilder
Javascript-Tuturials


Zuletzt bearbeitet von schreibmalwas am 17.06.2013, 04:23, insgesamt einmal bearbeitet
Beitrag16.06.2013 um 20:17 (UTC)    
Titel:

und zu guter Letzt noch der Code für die Schriftefekte beim Überfahren mit der Maus:
Code:
<style type="text/css">
.text {
   background-color:red;
   color:green;
   font-family:arial;
   font-size:0.7em;
}
.text:hover{
   background-color:orange;
   color:blue;
   font-family:Times New Roman;
   font-size:1.2em;
}
</style>

<span class="text">Dies ist ein Beispieltext</span>


Zuletzt bearbeitet von schreibmalwas am 17.06.2013, 04:24, insgesamt einmal bearbeitet
Beitrag16.06.2013 um 20:34 (UTC)    
Titel:

Vielen Dank ! Smile Klappt !
______________
www.tiger-1980-ostrach.de.tl
www.revolting-bones.de
Beitrag27.06.2013 um 11:17 (UTC)    
Titel:

Hallo
ich noch einmal,

Für 90 % aller Anwendungen reicht dies auch, super beschrieben. Hab dazu nun nochmal 2 Fragen !

Erstens: Möchte, daß das Bild verlinkt ist. Also: Maus fährt drüber über Bild A (z.B 28x28 Pixel), es öffnet sich (hover Effekt) das Bild B (30x30 Pixel). (Die Bilder sind schon in der richtigen Größe auf dem Server hinterlegt). Nun sollte das Ganze anklickbar sein und auf eine andere (Unter)seite verlinken.

Frage 2, wenn ich den Text verlinke, dann wird bekommt dieser Link, weil im Text über dem Design mal so festgelegt,
eine andere Farbe. Wie kann ich dies umgehen? Mit z.B.
a) color = grey und mit
b) einfärben mit dem Schriftfarbe Button hab ich es bereits versucht (ohne Erfolg)
Kann ich diese "generelle Priorität" in Einzelfällen außer Kraftsetzen - wo gewünscht ?? Wenn ja, wie ?

Ich hoffe daß diese Fragen nicht zu kompliziert sind (für mich wären sie es).
Danke und Gruß,
Tiger
______________
www.tiger-1980-ostrach.de.tl
www.revolting-bones.de
Beitrag27.06.2013 um 15:36 (UTC)    
Titel:

hallo, mit diesem Code kann man einem bestimmten element beim Überfahren mit der Maus eine andere Farbe geben:
Zitat:
<style type="text/css">
#
link:hover {color:gray;}
</style>

<
a href="linkadresse.htm" id="link">Dies ist ein Beispiellink</a>


...und mit diesem Code vergrößert und verändert sich das verlinkte bild beim Überfahren mit der Maus:

Zitat:
<style type="text/css">
#bildlink {width:28px; height:28px; overflow:hidden;}
#bildlink:hover {width:30px; height:30px; }
#bildlink:hover .bild{display:none; }
#bildlink img{width:100%; height:100%; }
</style>

<div id="bildlink"><a href="zielseite.htm" title="infotext">
<img class="bild" src="http://profile.webme.com/profile/t/tiger-1980-ostrach/small.png" alt="Linktext"/>
<img src="http://profile.webme.com/profile/s/schreibmalwas/small.png" alt="linktext"/>
</a></div>
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de