Ansicht:   

#407393

Mike_R zur Homepage von Mike_R

Rosenheim,
14.01.2017, 19:36:53

Mit CSS bei hover ein neues Bild laden (web.design)

Hi,

vielleicht kann mir jemand einen kleinen Tipp geben, wie ich beim Überfahren eines link, in Form eines Bildes, also "hover" per CSS einen Bildwechsel realisieren kann.

<div id ="box01">
<a href="test.htm">
<img src="Bilder/beispiel1.jpg"> </a>
</div>

In der CSS-Datei schaffe ich es zwar, z.B. einen Rahmen um das Bild zu legen, aber nicht, es durch ein anderes zu ersetzen. Hab schon etliches getestet, bin mir aber nicht sicher, an welcher Stelle evtl. "img", "src", "" etc. eingefügt werden muss.

a:hover {url(Bilder/beispiel2.jpg); }

Viele Grüße

Mike_R

#407394

Johann

14.01.2017, 19:55:51
(editiert von Johann, 14.01.2017, 20:00:53)

@ Mike_R

Mit CSS bei hover ein neues Bild laden (ed)

Dafür nutzt man Pseudo-Klassen wie hover oder focus.
Man kann z.B. eine Klasse definieren, die man dann meinetwegen an einen a-tag klebt. width: und height: sind die Größe der Grafik.

CSS:

.image_link {
  display: inline-block;
  width: 120px;
  height: 60px; 
  background: url('irgend/was.png') 0 0 no-repeat transparent;
}
.image_link:hover,focus {
  background: url('irgend/was.anderes.png') 0 0 no-repeat transparent;
}


HTML:

<a href="#" class="image_link"></a>


Die src eines img-tags kannst Du nur per Javascript ändern.

#407400

Mike_R zur Homepage von Mike_R

Rosenheim,
15.01.2017, 10:27:20

@ Johann

Mit CSS bei hover ein neues Bild laden

Hallo, Johann,

vielen Dank für die rasche Antwort.

> Dafür nutzt man Pseudo-Klassen wie hover oder focus.
> Man kann z.B. eine Klasse definieren, die man dann meinetwegen an einen
> a-tag klebt. width: und height: sind die Größe der Grafik.

Das war mir schon alles klar. Hab auch nach Deiner Vorlage die class-Angabe
> <a href="#" class="image_link"></a>
entspr. in html und CSS eingefügt; trotzdem tut sich, wenn man dann das "hover" ausprobiert, nach wie vor gar nichts.

Irgendwie muss da am Code scheinbar doch was anderes eingefügt werden; sonst müsste sich doch, nachdem wie schon gesagt z.B. auch eine "border"-Änderung bei "hover" sichtbar wird, bereits in der Editor-Vorschau was tun.

Viele Grüße

Mike_R

#407405

Johann

15.01.2017, 13:33:47

@ Mike_R

Mit CSS bei hover ein neues Bild laden

> trotzdem tut sich, wenn man dann das
> "hover" ausprobiert, nach wie vor gar nichts.

Dann hast Du was falsch gemacht. Was genau lässt sich ohne Exempel nicht sagen.

#407410

Mike_R zur Homepage von Mike_R

Rosenheim,
15.01.2017, 19:19:47

@ Johann

Mit CSS bei hover ein neues Bild laden

Hallo Johann,

nochmals danke für die weitere Antwort. Ich hoffe, ich strapaziere Deine Geduld nicht zu sehr, wenn ich nun auf Deinen Vorschlag eingehe. Anbei somit ein Beispiel (das sich auf das Wesentliche beschränkt) mit einer der Einfachheit halber in die html-Datei eingebundenen CSS. Aus demselben Grund einfach als img Dein sowie 'Hackertromm's' logo.
Die Klasse 'art' ist nur zu Testzwecken eingefügt, um zu demonstrieren, dass hier 'hover' funktioniert. Man kann auch erkennen, dass bei 'hover' über Deinem logo sich beim 'logo-link' etwas tut. Das einzuwechselnde logo von H. erscheint ein bisschen mit dem unteren Rand. Vielleicht stimmt ja nun mit dem Code etwas nicht, andernfalls fehlt somit eigentlich nur noch der Trick, wie man das 1. logo durch das 2. gänzlich austauschen kann.

<html>
<head>
<title>Hover-Test</title>
<meta charset="UTF-8">
<style>
.art {
font-size: 30pt;
color: purple;
}
.art:hover {
color: orange;
}
img {
/* An H.'s logo angepasst */
width: 125px;
height: 62px;
}
.image_link:hover, focus {
background: url('http://www.th-hermann.de/Bilder/signatur.jpg') 0 0 no-repeat transparent;
}
</style>
</head>
<body>
<a href=" http://www.netz-treff.de/forum" class="image_link" >
<img src="http://astro.sixbytes.de/sixbytes_logo.png"> </a>
<p class="art">
Text
</p>
</body>
</html>

#407413

Johann

15.01.2017, 19:41:04
(editiert von Johann, 15.01.2017, 19:53:37)

@ Mike_R

Mit CSS bei hover ein neues Bild laden (ed)

Es fehlt die .image_link Klasse im CSS und im HTML hatte ich im a-Tag kein img. Da darf kein Bild rein, sonst liegt das über dem per CSS gestylten a-tag. Willst Du zwingend erforderlich mit img-tags arbeiten, dann schrieb ich: Geht nur mit Javascript oder ganz anders, indem Du dem img-tag in der hover-Klasse ein display:none; setzt. Den a-tag in der richtigen Größe musst Du trotzdem anlegen.

Du brauchst bei meinem Beispiel keinen image-tag, sondern designst diese .image_link Klasse sowie deren :hover,focus Pseudoklassen, setzt die auf einen a-tag und fertig. Deswegen gibt man, wie im Beispiel ersichtlich, die Adressen der Beiden Bilder im CSS an.
Eventuell gibt man den Klassen .image_link und dem hover-Bereich noch zusätzlich: text-decoration:none; das hatte ich vergessen. ist bei a-tag sinnvoll.

#407439

Mike_R zur Homepage von Mike_R

Rosenheim,
16.01.2017, 13:41:19

@ Johann

Mit CSS bei hover ein neues Bild laden

Danke für die nunmehr 3. Unterstützung. Du schreibst
> Es fehlt die .image_link Klasse im CSS...,
aber wenn Du Dir meinen letzten Beitrag noch mal anschaust, dann ist doch im letzten Teil des <style>-Bereichs diese Zeile
.image_link:hover, focus {....} enthalten!

Auch mit den vorgeschlagenen Änderungen (img-Tag, text-decoration usw.) klappt es leider nach wie vor nicht.
Die andere Lösung des Problems mit javascript hab ich ja eigentlich und da gibt's auch keine Schwierigkeiten. Meine Vorstellung war aber nun - nachdem bei manchen Benutzern ja javascript blockiert wird - das nur mit html und CSS zu realisieren.

Um Deine kostbare Zeit aber nicht moch mehr zu beanspruchen, (ich hatte - vielleicht naiverweise - geglaubt, Du könntest bei dem mitgeschickten Code der html-Datei ein paar Änderungen so einbauen, dass es dann funktioniert) geb ich mich halt mit dem Ist-Zustand zufrieden.

Viele Grüße
Mike_R

#407440

Johann

16.01.2017, 14:25:02

@ Mike_R

Mit CSS bei hover ein neues Bild laden

> Danke für die nunmehr 3. Unterstützung. Du schreibst
> > Es fehlt die .image_link Klasse im CSS...,
> aber wenn Du Dir meinen letzten Beitrag noch mal anschaust, dann ist doch
> im letzten Teil des <style>-Bereichs diese Zeile
> .image_link:hover, focus {....} enthalten!

Du hast nur die Pseudoklassen definiert und nicht die eigentliche Grundklasse für den a-tag.

> (ich hatte - vielleicht naiverweise - geglaubt, Du könntest bei dem mitgeschickten Code
> der html-Datei ein paar Änderungen so einbauen, dass es dann funktioniert)

Das tat ich in meinem ersten Post. Wenn Du das so machst wie ich schrieb und in den url('...') die entsprechenden Bildpfade angibst, klappt das. Das brauchst Du doch nur 1:1 übernehmen.

<html>
<head>
<title>Hover-Test</title>
<meta charset="UTF-8">
<style>
.art {
font-size: 30pt;
color: purple;
}
.art:hover {
color: orange;
}
.image_link {
/* An H.'s logo angepasst */
width: 125px;
height: 62px;
display:inline-block;
background: url('http://astro.sixbytes.de/sixbytes_logo.png') 0 0 no-repeat transparent;
}
.image_link:hover, focus {
background: url('http://www.th-hermann.de/Bilder/signatur.jpg') 0 0 no-repeat transparent;
}
</style>
</head>
<body>
<a href=" http://www.netz-treff.de/forum" class="image_link" >&nbsp;</a>
<p class="art">
Text
</p>
</body>
</html> 

#407446

Johann

16.01.2017, 16:44:00
(editiert von Johann, 16.01.2017, 16:48:11)

@ Johann

Mit CSS bei hover ein neues Bild laden (ed)

...und wie gesagt, schon wieder vergessen, mach in die Klasse .image_link, mindestens jedoch in der Pseudoklasse .image_link:hover,focus noch folgendes:

.image_link {
...
text-decoration:none;
}
.image_link:hover,focus {
...
text-decoration:none;
}

Das stellt sicher, das die a-tags dieser Klasse weder im default- noch im hover-state unschöne Unterstriche haben.

Und sollte Dich das erste Flackern nach neu laden der Seite beim überstreichen solcher Links stören, musst Du ein sog. "Sprite" aus den Bildern machen und das verwenden. Solltest du das wollen sag Bescheid, dann erkläre ich wie das geht.

#407452

MudGuard zur Homepage von MudGuard

München,
16.01.2017, 17:05:37

@ Johann

Mit CSS bei hover ein neues Bild laden

> .image_link:hover,focus {

.image_link:hover, .image_link:focus {

> ...
> text-decoration:none;
> }
>

#407454

Johann

16.01.2017, 17:36:07

@ MudGuard

Mit CSS bei hover ein neues Bild laden

Ja, stimmt oder focus ganz weg lassen.

#407485

MudGuard zur Homepage von MudGuard

München,
16.01.2017, 20:45:08

@ Johann

Mit CSS bei hover ein neues Bild laden

> Ja, stimmt oder focus ganz weg lassen.

Nein. Dann ist's nicht mehr per Tastatur navigierbar.

--
[image]
MudGuard
O-o-ostern

#407546

Mike_R zur Homepage von Mike_R

Rosenheim,
18.01.2017, 21:03:07

@ MudGuard

Mit CSS bei hover ein neues Bild laden

Hallo,

leider bin ich jetzt gestern und auch am Abend vorher nicht dazu gekommen, mich an den den PC zu setzen, so dass es - fürchte ich - so aussah, als wollte ich nicht mehr darauf reagieren. Auf alle Fälle fuktioniert es nun so, wie ich mir das vorgestellt hatte; für mich selber muss ich feststellen, dass, wenn es zu zu langen Pausen im Umgang mit html und CSS kommt, schnell Unsicherheiten entstehen, bzw. Wissenslücken sich vergrößern, vor allem, wenn man das nicht zur "Hauptdisziplin" zählen kann. Aber mit jedem Problem, das sich lösen lässt, lernt man ja jede Menge dazu, was für mich ein Grund ist, noch mal extra Danke zu sagen. Aus diesem Grund möchte ich auch gern den netten Vorschlag von Johann

> Und sollte Dich das erste Flackern nach neu laden der Seite beim überstreichen solcher Links stören, musst Du ein sog. "Sprite" aus >den Bildern machen und das verwenden. Solltest du das wollen sag Bescheid, dann erkläre ich wie das geht.

aufgreifen und mir das erklären lassen, auch wenn ich mit dem Flackern durchaus leben könnte.

Mike_R

#407583

Johann

19.01.2017, 18:00:59
(editiert von Johann, 19.01.2017, 18:02:13)

@ Mike_R

Mit CSS bei hover ein neues Bild laden (ed)

Du musst dafür die Einzelbilder in ein einziges bild packen und mit dem x/y Offset (die beiden 0 0 nach der url im CSS) im background bei CSS arbeiten.
Beispiel:

der Button ist 100px Breits und 50px hoch. Dann baust Du nicht zwei Bilder a 100x50 sondern eins mit 100x100, wo beide Darstellungen z.B. übereinander sind:

[image]

Im CSS sind für beide Klassen nun die gleiche Grafik angegeben, aber in der hover-Klasse steht nach dem Background ein y-Offset von -50px, welcher dafür sorgt, dass man anstatt der oberen Hälfte des Sprite die untere sieht. Da die gesamte Grafik bereits geladen ist flackert da dann auch nichts mehr.

<html>
<head>
<title>Hover-Test</title>
<meta charset="UTF-8">
<style>
.image_link {
width: 100px;
height: 50px;
display:inline-block;
background: url('http://devel.sixbytes.de/testsprite.png') 0 0 no-repeat transparent;
text-decoration:none;
}
.image_link:hover {
background: url('http://devel.sixbytes.de/testsprite.png') 0 -50px no-repeat transparent;
}
</style>
</head>
<body>
<a href=" http://www.netz-treff.de/forum" class="image_link" >&nbsp;</a>
</body>
</html>


Man kann so ein Sprite auch sehr groß und mit vielen verschiedenen Grafiken für ein Projekt bauen, z.B. alle Image-Butons mit all ihren hover-Grafiken in einem großen Sprite und dann entsprechend dem x/y Offset und entsprechender Pixelgröße einblenden. Wichtig: Immer an das "px" denken.

#407615

Mike_R zur Homepage von Mike_R

Rosenheim,
20.01.2017, 12:51:31

@ Johann

Mit CSS bei hover ein neues Bild laden

Hallo Johann,

super! Vielen Dank für die zuzsätzliche. Anleitung zur "Ent-Flackerung".

Mike_R

Ansicht:   
Auf unserer Web-Seite werden Cookies eingesetzt, um diverse Funktionalitäten zu gewährleisten. Hier erfährst du alles zum Datenschutz