HTML Bildwechsel beim Überfahren mit der Maus

Bauland · 12. November 2019 um 12:53

Hallo!

seit Stunden versuche ich nun mein Problem zu lösen, leider vergeblich:

Auf meiner Seite (www.bauland-photography.de) ist gleich oben links mein Logo zu sehen.
Ich möchte gerne, dass sich das Logo beim Überfahren mit der Maus „umgekehrt“, also zum Negativ wird. Weiß wird schwarz, schwarz wird weiß.

Ich habe eine Anleitung gefunden, die mir eigentlich simpel erscheint, leider kriege ich das aber bei mir nicht eingebaut…

JAVA versuche ich unbedingt zu vermeiden…!

Könnte mir BITTE jemand helfen? Ich poste gerne den Quelltext und Ähnliches, falls nötig…!

Bin am Ende meiner Ideen… HILFE!

Bauland · 12. November 2019 um 12:53

Hier noch das genannte Beispiel mit Anleitung…!

Anleitung mit Beispiel

.

Efchen · 12. November 2019 um 12:53

Moin,

Vorab zwei Klarstellungen:

Einen „HTML Bildwechsel“ gibt es nicht. HTML zeichnet den Inhalt mit einer logischen Struktur aus - zu allem anderem, wie auch einem Bildwechsel, ist HTML gar nicht fähig.

JAVA versuche ich unbedingt zu vermeiden…!

Java ist etwas ganz anderes. Java Applets sind eigenständige Programme, die sich einen Bereich des Viewports krallen und darin ablaufen. Eine Interaktion mit anderen Elementen der Seite findet für gewöhnlich nicht statt (ich würde sogar sagen, dass das nicht möglich ist, aber da kann ich mich auch irren).
Was Du meinst, ist vermutlich „JavaScript“, das ist etwas ganz, ganz anderes.

Ich habe eine Anleitung gefunden, die mir eigentlich simpel
erscheint, leider kriege ich das aber bei mir nicht
eingebaut…

Warum das? Woran hapert es? Leider kann man auf Deiner Seite Deine Versuche nicht sehen. Anders, als in dem von Dir verlinkten Tutorial würde Dir das kaum einer erklären, und hier im FOrum sogar eher weniger ausführlich.
Und wenn Du eine Antwort auf die Frage haben willst, warum das bei Dir nicht funktioniert, dann musst Du uns wissen lassen, was Du probierst/probiert hast. Vielleicht war es nur irgendwo ein kleiner Tippfehler.

Könnte mir BITTE jemand helfen? Ich poste gerne den Quelltext
und Ähnliches, falls nötig…!

Der Link zur Seite, wo Du das probiert hast und gescheitert bist, reicht schon.

Link zur Seite ist immer besser als Quelltext!

Liebe Grüße,
-Efchen

P.S.: An der Semantik Deines Inhalts solltest Du noch ein wenig feilen. Du benutzt HTML wohl (auch noch) als Mittel zur Darstellung, was? Gerne mehr dazu, aber nur wenn Du möchtest.

Ingo_Turski · 12. November 2019 um 12:53

Hi,

es geht auch einfacher… vielleicht hilft Dir dies: http://www.1ngo.de/web/bildwechsel.html

Gruß
Ingo

TechPech · 12. November 2019 um 12:53

warum überhaupt img benutzen .

mit div geht das ganz gut über background image

div {width:300px; height:300px; background:url(‚schlauunddumm.jpg‘);}
div:hover {width:300px; height:300px; background:url(‚PANORAMA.jpg‘);}

Efchen · 12. November 2019 um 12:54

Genau,

nur dass das nicht an das div gebunden ist, sondern mit jedem Blockelement so geht. Wenn es also um ein Logo in der Überschrift geht, beispielsweise ein .

SCNR,
-Efchen

KeinesHerrenKnecht · 12. November 2019 um 12:54

Hi.

warum überhaupt img benutzen .

Steht doch am Anfang des verlinkten Artikels:

_Bei der Standardmethode, […] eine Hintergrundgrafik zuzuweisen und diese über den Selektor :hover auszutauschen stellen sich jedoch zwei Probleme:

Die neuen Grafiken müssen beim ersten Überfahren mit der Maus erst geladen werden und der Effekt wird durch die Verzögerung vielleicht gar nicht sichtbar.
Es gibt keinen Alternativtext für den Fall, daß die Grafik nicht angezeigt wird, […]_

Gruß,
KHK

TechPech · 12. November 2019 um 12:54

Moin

Genau,

nur dass das nicht an das div gebunden ist, sondern mit jedem
Blockelement so geht. Wenn es also um ein Logo in der
Überschrift geht, beispielsweise ein .

Das hab ich mal weggelassen Danke für die Ergänzung

SCNR,
-Efchen

Bauland · 12. November 2019 um 12:54

Zuerst: Vielen Dank an eure Hilfe!!

Ich habe mir die komplette Seite mittels Pixelpost und eines Templates aufgebaut…

Was HTML, JavaScript und sonstiges betrifft, bin ich vollkommeneer Laie - meine Page habe ich mir mit viel mühe selbst zusammengestümpert, und bin mir auch im Klaren darüber, dass dda einiges nicht so optimal ist.
Leider habe ich bisher niemanden gefunden, der sich der Sache „für wenig Geld oder kostenlos“ annimmt und die Page optimiert…

Ich poste hier mal die „Pixelfy.css“ Datei (Pixelfy heisst das benutze Template)

html, body{
height:100%;
}

body {
font-family:„trebuchet ms“, verdana, sans-serif;
font-size:0.8em;
text-align:center;
background-color:#FFFFFF;
padding:0px;
margin:0px;
color:#000000;
}

img {
border:0px;
}

a {
color:#000000;
text-decoration:none;
}

#commentWrap textarea, #commentWrap input {
width:80%;
}

h1 {
font-family:„trebuchet ms“, verdana, sans-serif;
font-size:130%;
margin:0em 1em 0em 1em;
padding:0.1em;
letter-spacing:3px;
font-weight:bold;
}

h2 {
font-size:130%;
margin:0em;
margin-top:0.3em;
padding:0em;
letter-spacing:3px;
font-family:georgia, „trebuchet ms“, verdana, sans-serif;
font-weight:bold;
color:#cccccc;
}

.devider {
width:100%;
clear:both;
font-size:0em;
}

#container {
width:1100px;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF;
}

#menu {
letter-spacing:3px;
font-size:140%;
}
#menu a.item {
float:right;
padding:5px 7px 5px 5px;
margin: 50px 30px 0px 0px
}
#menu a.item:hover {
background-color:#000000;
color:white;
}

#menu a#logo {
float:left;
padding:0px 0px 0px 0px;
margin: 15px 0px 0px 80px
}

#menu a#logo:hover {
background-image: url("http://www.bauland-photography.de/templates/pixelfy2…);
color:white;
}

#submenu {
float:left;
border:0px solid #222222;
background-color:#FFFFFF;
padding:11em 0em 0em 5px;
}
#submenu a {

}
#exif {
width:40%;
font-size:90%;
float:left;
margin-left:1em;
}

#commentWrap {
width:40%;
font-size:90%;
float:right;
margin-right:1em;
text-align:left;
}

#display {
text-align:left;
clear:both;
border:0px solid #151515;
margin-left: 18px;
margin-right: 18px
}

#display p {
margin:0.4em;
}

img.thumbs {
float:left;
border:1px solid #333333;
padding:0.2em;
margin:0.3em 0.3em 0.3em 0.3em;
}

.thumbnails {
float:right;
border:0px solid #333333;
padding:0.4em;
margin:1.0em 0.6em 0.0em 0em;
}

#footer {
background-color:#FFFFFF;
padding:0.5em;
text-align:center;
}

#footer, #footer a {
color:#424242;
font-size:95%;
}

#imageWrap {
background-image:url(…/images/load.gif);
background-repeat: no-repeat;
background-position:center center;
}

#image {

}

#thumbnailwrap {
width:600px;
float:right;
margin-right: 20px;
margin-top: 5px;
}

#details {
width:750px;
float:center;
background-color:#FFFFFF;
padding:1em;
margin:12px 10px 5px 20px;
}

#text {
float:right;
}

.mark {
background-color:#FFFFFF;
color:orange;
}

.tags10 {
font-size:90%;
}

/* Contact */
.pfc_err {
border:1px solid red;
background-color:green;
}

Ich bin ziemlich ratlos, wie ich die bereits genannten Lösungen hier einbauen kann…
Habe große Probleme damit, überhaupt in dem HTML Chaos durchzublicken, geschweige denn alles zu optimieren, weil mir einfach das Wissen fehlt…

Efchen · 12. November 2019 um 12:54

Moin,

Es gibt keinen Alternativtext
für den Fall, daß die Grafik nicht angezeigt wird,

Das ist ja auch nicht in jedem Falle notwendig. Es kommt ja darauf an, ob das Image Content enthält oder nur zur Zierde ist, wobei es in diesem speziellen Fall ja wohl eher Content enthält, und dann der Alternativtext auch wichtig wird.

Gruß,
-Efchen

Efchen · 12. November 2019 um 12:54

Moin,

Was HTML, JavaScript und sonstiges betrifft, bin ich
vollkommeneer Laie

Womit wieder bewiesen ist, dass man dann entweder die Finger davon lassen, oder mehr Zeit investieren sollte, denn wie man hier sieht, rächt sich das jetzt.
Ist nicht bös gemeint und soll auch nicht Deine Bemühungen schmälern.

Leider habe ich bisher niemanden gefunden, der sich der Sache
„für wenig Geld oder kostenlos“ annimmt und die Page
optimiert…

Dann kommst nur noch Du selbst in Frage

Ich poste hier mal die „Pixelfy.css“ Datei (Pixelfy heisst das
benutze Template)

Das ist der Moment, an dem ich mich wieder ausklinke, weil mir das auch zu viel Arbeit für lau ist. Ich verweise dabei auf meine Bitte in meiner ersten Antwort: Der Link zur Seite, wo Du das probiert hast und gescheitert bist, reicht schon. Link zur Seite ist immer besser als Quelltext! Vermutlich wird sich auch jemand anders finden, der diese Arbeit machen kann und will.

Ich bin ziemlich ratlos, wie ich die bereits genannten
Lösungen hier einbauen kann…

Du könntest das Beispiel von Ingo hernehmen und es einfach mal ausprobieren.
Danach müsstest Du natürlich verstehen, was es macht.
Und dann kannst Du es in Deine Seite einbauen.

Habe große Probleme damit, überhaupt in dem HTML Chaos
durchzublicken

Dabei hilft die Einführung, die in FAQ:1161 verlinkt ist.

geschweige denn alles zu optimieren, weil mir
einfach das Wissen fehlt…

Ich weiß, dass das jetzt blöd klingt, aber ich verstehe nicht, wie jemand glaubt, er könne alle Ziele erreichen, wenn er den Weg dahin nicht kennt.

Ich helfe gerne - aber ich schreibe keine Lösungen. Und helfen kann ich nur, wenn ich weiß, wo und welches Wissen fehlt und ich sehe, dass die Eigeninitiative vorhanden ist.

Also würde ich an der Stelle empfehlen, das Beispiel in einer separaten Seite auszuprobieren und den Sinn des CSS-Code zu verstehen. Wenn dabei Fragen aufkommen, dann stelle sie.

Liebe Grüße,
-Efchen

godam_a8fc45 · 12. November 2019 um 12:54

Hallo,

schöne Fotos …

Du weißt aber schon, daß du auf deiner Seite Javascript einsetzt?

Grüße

godam

Efchen · 12. November 2019 um 12:55

Moin,

Du weißt aber schon, daß du auf deiner Seite Javascript
einsetzt?

Immerhin *hat* er geschrieben, dass er *JAVA* unbedingt vermeiden will.
Insofern ist das ja in Ordnung

Gruß,
-Efchen

anon43317210 · 12. November 2019 um 12:56

Hallo,

warum überhaupt img benutzen .

Steht doch am Anfang des verlinkten Artikels:

Bei der Standardmethode, […] eine Hintergrundgrafik
zuzuweisen und diese über den Selektor :hover auszutauschen
stellen sich jedoch zwei Probleme:

Die neuen Grafiken müssen beim ersten Überfahren mit der Maus

erst geladen werden und der Effekt wird durch die Verzögerung
vielleicht gar nicht sichtbar.

Es gibt keinen Alternativtext

für den Fall, daß die Grafik nicht angezeigt wird, […]

Man kann ja auch eine Grafik anlegen, in der neben- oder untereinander beide Bilder sind und dann bei :hover die background-position ändern.
Das löst beide Probleme.

Greets
Christian

Ingo_Turski · 12. November 2019 um 12:56

Hi,

Man kann ja auch eine Grafik anlegen, in der neben- oder
untereinander beide Bilder sind und dann bei :hover die
background-position ändern.

diese Methode wurde ja eingangs vorgestellt. Auch wenn sie funktioniert finde ich sie nicht gut wegen der umständlichen Bilderstellung und ggf. wieder Extrahierung. Außerdem müssen beide Bilder gleiche Größe haben.

Gruß
Ingo

anon43317210 · 12. November 2019 um 12:56

Hallo,

Man kann ja auch eine Grafik anlegen, in der neben- oder
untereinander beide Bilder sind und dann bei :hover die
background-position ändern.

diese Methode wurde ja eingangs vorgestellt. Auch wenn sie
funktioniert finde ich sie nicht gut wegen der umständlichen
Bilderstellung und ggf. wieder Extrahierung. Außerdem müssen
beide Bilder gleiche Größe haben.

Naja, bei einem Bildertausch haben die Bilder doch eh in den meisten Fällen die gleiche Größe, oder?
Außerdem müssen sie das auch nicht unbedingt - hast Du Dir zB mal die Sprites angeschaut, die Google benutzt? Da ist alles drin, von groß bis klein. (zB: http://kaithrun.de/wp-content/uploads/google-sprite.png )

Und der Nutzen eines guten Sprites (Bilder kommen gleichzeitig, kein Nachladen bei :hover ) überwiegt für mich ehrlich gesagt vor dem Nachteil der etwas umständlicheren Erstellung - soviel Bildbearbeitung sollte man als Webworker ja eh drauf haben.

My2cent
Grüße
Christian

TechPech · 12. November 2019 um 12:56

Das mag ja alles für feste Bilder gehen , aber ich nutz dynamischen inhalt, das heisst, die Bilder werden per zufall ausgewählt. Da wollt ich jetzrt nicht 200 kombinationen machen nur weill ich ein paar Bilder hab die mal wechseln sollen.

Webworker der Geld verdienen will der macht das so , aber ich will ja nicht das geld wegwerfen für einen ALTERNATIVE Text. Wer nimmt den den Alternative Text überhaupt war ? bestimmt keiner der auf Bildwechsel steht ))

Bauland · 12. November 2019 um 12:56

Vielen Dank erstmal für die rege Anteilnahme…!

Die Methode, das Logo bei Hover nach oben zu verschieben klingt für mich recht plausibel und ich bin jetz schon oft auf diese Methode gestossen…

Hier ist der entsprechende Auszu aus der css-Datei:

#menu a#logo {
float:left;
padding:0px 0px 0px 0px;
margin: 25px 0px 0px 90px
}

#menu a#logo:hover {
background-image: url("http://www.bauland-photography.de/templates/pixelfy2…);
color:white;
}

Wie baue ich das ein? Ich hab schon einige Möglichkeiten probiert, komme aber leider nicht weiter…
Kann doch nicht so schwer sein…?!

DANKE!

Efchen · 12. November 2019 um 12:57

Moin,

Wer nimmt den den Alternative Text überhaupt war ?

Alle, die keine Grafiken sehen.

bestimmt keiner der auf Bildwechsel steht ))

Nein, eher nicht.

Also ist der Alternativtext natürlich ungemein wichtig.
Allerdings natürlich auch nur für Grafiken, die aus Contentgründen im Inhalt sind und nicht solche zur Zierde, denn die bindet man ja per CSS ein.

alt ist in img nicht umsonst ein Pflichtattribut.

Grüße,
-Efchen

Ingo_Turski · 12. November 2019 um 13:13

Hi,

Und der Nutzen eines guten Sprites (Bilder kommen
gleichzeitig, kein Nachladen bei :hover ) überwiegt für mich
ehrlich gesagt vor dem Nachteil der etwas umständlicheren
Erstellung

wenn Du Dir meine Methode ansiehst wirst Du feststellen, dass sie wie gesagt kein Nachladen erfordert. Warum also sollte man sich unnötige Arbeit machen? Der einzige Vorteil der Doppelbildmethode ist, dass nur ein Request erfolgt und nicht zwei, aber das dürfte sich wohl kaum signifikant auf die Performance auswirken.

Gruß
Ingo