• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bildhover bei fremden Objekten

K

kamui92

Neues Mitglied
Hallo,

ich habe folgendes problem bei dem mir auch google nicht helfen konnte ^^
und zwar möchte ich das wenn ich über einen text gehe mit der Maus der text zwar gleich bleibt
aber sich woanders auf der Homepage eine grafik ändert.

also ich möchte das wenn ich mit der Maus über diesen text gehe

Code: 
<td width="149" height="22" colspan="4" bgcolor="#E5E5E5"><span class="Stil16">Was uns wichtig ist ...</span></td>



sich das bild ändert


Code: 
<img id="profil_web_29" src="images/profil_web_29.jpg" width="22" height="22" alt="" />
Ist es überhaupt machbar ?
und wenn ja wie ? bin für jeden nützlichen tipp dankbar =)

bitte möglichst in leihensprache da ich mit Java und sonstigen bisher nie was zu tun hatte
danke =)

mfg Kamui
 
Mit Javascript ist das ganz einfach:
HTML: 
<span class="Stil16" onmouseover='document.getElementById("profil_web_29").src="http://www.html.de/images/anderes_bild.jpg";' onmouseout='document.getElementById("profil_web_29").src="http://www.html.de/images/profil_web_29.jpg";' >
Mit CSS und hover geht es wahrscheinlich auch, aber damit kenne ich mich leider nicht so gut aus. Sicher kann es dir jemand anders erklären.
Viel Erfolg und viele Grüße - Ulrich
Edit: Die Forensoftware macht mir immer ein "http://www.html.de/" vor den relativen Bildpfad. Wie kann man das verhindern?
 
sowas geht eigentlich auch mit css. z.B das:
div:hover a {
...
}
weiß nicht, ob du da auch sprünge machen kannst, probiers aus.
 
Na, Kamui hat wohl das Interesse verloren. Weil ähnliche Fragen häufig kommen und mich die Sache interessiert, habe ich mal, mit Hilfe von SelfHTML, versucht die CSS-Lösung zu implementieren. Dies ist das Ergebnis:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
          <style type="text/css">
          a:hover div {background-image:url(heart1.gif);}
          a div {background-image:url(logo.jpg);}
          a {border: 1px solid black}
</style>
  </head>
  <body>
  <a class="Stil16">Was uns wichtig ist ...<div id="profil_web_29" style="height: 100px; width: 100px; border: 1px solid black; display: inline;"></div></a>
  </body>
</html>
Zwei Fragen haben sich dazu ergeben:
  1. Das Hovern funktioniert nicht mit allen HTML-Elementen. a, div, h: ja, z. B. span: nein. Ich habe mit Google nichts gefunden, wo die HTML-Elemente aufgelistet sind, mit denen es geht. Kennt jemand so etwas?
  2. Ohne display:inline erstreckt sich das div bzgl. Hovern über die ganze Fensterbreite, obwohl ich Höhe und Breite explizit begrenzt habe. Mit display:inline dagegen ist die Angabe von Höhe und Breite unwirksam; das div wird erst breiter, wenn es mit Kontent gefüllt wird. Wie kann ich das HTML-Element so formatieren, dass es genau die Abmessungen der Bilder einnimmt?
Viele Grüße - Ulrich
 
Die Pseudoklasse hover kann auf fast jedes Element angewendet werden. Ausnahmen sind höchstens frameset, object und iframe würde ich sagen. Bei span wirkt es auf jeden Fall. Wenn es bei dir nicht klappt, dann hast Du irgendwas falsch geschrieben oder verwendest einen veralteten Browser.

Sowas
Code: 
a div {..}
gibt es nicht. Innerhalb eines <a> darf kein Blockelement vorkommen, wozu <div> ja zählt. Da zählt auch nicht, was Du per CSS draus machst - es ist in HTML schlicht nicht zulässig.
 
So, hab's jetzt mit zwei div-Containern gemacht:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="Ultra Edit">
  <title></title>
          <style type="text/css">
          div:hover div#profil_web_29 {background-image:url(heart1.gif);}
          div#profil_web_29 {background-image:url(logo.jpg);}
          div {border: 1px solid black}
</style>
  </head>
  <body>
  <div id="Stil16" style="float:left">Was uns wichtig ist ...<div id="profil_web_29" style="float_left; height: 100px; width: 100px;"></div></div>
  </body>
</html>
Allerdings scheint die Einsetzbarkeit der CSS-Lösung doch eingeschränkt zu sein, weil das Element mit dem Bild innerhalb des hovernden Elementes liegen muss. Wenn das Bild irgendwo ganz anders auf der Seite liegen soll, geht es wohl nicht.
 
CSS bietet einige Möglichkeiten Elemente zu selektieren. Das nennt sich Selektoren und ist z.B. hier umfangreich beschrieben. Selektoren die ein parallel liegendes Element oder irgendein anderes Element auf der Webseite, welches nicht direkt mit dem bezugnehmenden Element zusammenhängt, gibt es nicht.

Wenn Du etwas beeinflussen willst was an einer völlig anderen Stelle liegt, dann musst Du JavaScript verwenden.
 
CSS-Selektoren kennen nur die Richtung „nach unten“ (hinsichtlich der Schachtelung).

Es gibt keine Möglichkeit, etwa alle Elemente zu selektieren, die ein p-Element enthalten. Selektiert werden dabei immer nur die p-Elemente.

* < p {} o. ä. existiert derzeit nicht. (Nagelt mich nicht auf der Syntax fest. :))
 
Danke für die Antworten. Dann ist es klar, dass es für ganz fremde Objekte nicht geht.
 
verloren hatte ich das Intresse nicht =P nur hat schon die erste Antwort zu der Lösung meines Problems geführt deswegen hatte ich hier nicht mehr reingesehen.
ich denke aber das ich die anderen Möglichkeiten hier auch einmal testen werde http://www.html.de/members/sempervivum/da die wesentlich weniger Arbeit machen =P

und Danke nachmals für die Antworten hat mir sehr weitergeholfen ^^

gruß Kamui
 
es bestände die möglichkeit, das div in dem div mithilfe von position:fixed oder position:absolute an andere stelle zu rücken.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben