Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

CSS meta bei Mausberührung verändern?

Empfohlene Antworten

Veröffentlicht

Moin!

Ich habe auf meiner Homepage einige Links, die wie folgt aufgebaut sind

im head: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

und dann weiter unten...

<map name="Map">

<area shape="rect" coords="5,6,146,36" href="gallerie.htm">

</map>

ich möchte diese Links genauso wie normale Links (ahref...), bei Mouseover verändern (Farbe)

bei normalen, wie sicher bekannt mit css:

a:link { font-weight:bold; color:white; text-decoration:none; }

a:visited { font-weight:bold; color:white; text-decoration:none; }

a:focus { font-weight:bold; color:white; text-decoration:underline; }

a:hover { font-weight:bold; color:red; text-decoration:none; }

a:active { font-weight:bold; color:white; text-decoration:none; }

wie bekomme ich das bei meinen "meta" Links hin, denn der CSS-Teil von oben gilt anscheinend nicht für sie??

Wäre mir echt eine Hilfe, wenn mir das jemand sagen kann, sry wenn auch dieses Thema hier nicht hergehört...

danke!!

Hä? Was willst Du? Ein Meta-Tag ist doch kein Hyperlink! Was willst Du denn genau erreichen? Wie willst Du über einen Meta-Tag hovern? Was sollte dann passieren und warum? :confused:

hab mich wohl bischen unverständlich ausgedrückt..

ich möchte <map name="Map">

<area shape="rect" coords="5,6,146,36" href="gallerie.htm">

</map> diesen Link dazu bringen, dass er sich bei :hover ändert, bei meinen normalen a:href...</a> funktioniert es nur halt nicht bei dem Link, weil das CSS am Anfang meiner Seite sich wohl nicht auf diesen Link bezieht, jetzt estwas klarer??

das mit dem meta war wohl schwachsinn, hab das Tagbloß erst vorhin kennenglernt und wohl falsch benutzt..

Im Bereich coords="5,6,146,36" soll sich die Farbe ändern...

Die Farbe von was soll sich ändern?

hm, ich habe gerade gemerkt, dass das so garnicht geht, es handelt sich um einen Button, was ich eigentlich muss ist anstelle des alten Buttons, wenn er mit der Maus berührt wird einen neuen mit einer anderen Farbe lade, was wohl viel komplizierter ist,als ich mir das vorstelle. Ich möchte den Button also bei Berührung durch einen anderen (mit anderer Farbe) ersetzen...

vorher dachte ich, dass das mit css und hover geht, aber das ist wohl nicht der Fall...

wenn dazu jemandem was einfällt, bitte posten.

vielen dank!

also mit Javascript ist das austauschen kein Problem, da hab ich noch irgendwo den Code rumliegen.

Wieso Button? Ich dachte Imagemap? Was soll sich ändern der Button oder die Map? Hier ist mal Beispielcode für den Austausch eines "Buttons":


<a href="#"><img src="foo.jpg" alt="Ich bin ein Button" onmouseover="this.src = 'bar.jpg';" onmouseout="this.src = 'foo.jpg';" /></a>

Ansonsten: Drück Dich einfach deutlicher aus! Ein bißchen Beispielcode erleichtert das Helfen logischerweise enorm.

Gruß, Tobias

Die Farbe eines hotspots zu ändern funktioniert nach dem gleichen Prinzip. Du brauchst für jeden hervorgehobenen hotspot eine neue Grafik. Die wird mittels Javascript geladen wenn du mit der Maus über die entsprechende Area kommst.

Erstmal danke für die Tips!!

Das Problem ist, dass ich überhaupt keine Ahnung von JS habe und die Vorschläge leider nicht umgesetzt bekomme, hier ist mal ein Beispiel:

<html>

<table>

<tr>

<td width="151" height="29" bgcolor="#0066CC"><div align="center"></div></td>

</tr>

</table>

</html>

ich möchte die Hintergrundfarbe, bzw, den Inhalt dieser Zelle beim überfahren mit der Maus ändern

<a href="#"><img src="foo.jpg" alt="Ich bin ein Button" onmouseover="this.src = 'bar.jpg';" onmouseout="this.src = 'foo.jpg';" /></a>

wie kann ich sowas in mein HTML/CSS Dokument einbinden??

Hallo!

Zunächst mal möchte ich Dir den Tipp geben, Dich einfach mal von Grund auf mit HTML zu beschäftigen, da Du wie es mir scheint soviel Ahnung davon hast wie ne Kuh von Strahlenforschung. Ein guter Startpunkt ist http://de.selfhtml.org/

Außerdem: Wenn Du hier Code postest, dann nutz doch einfach die entsprechendne BBCodes.

ich möchte die Hintergrundfarbe, bzw, den Inhalt dieser Zelle beim überfahren mit der Maus ändern

Das wird Dich nicht viel weiterbringen, da Du es nicht verstehen, bzw. in Zukunft selbstständig anwenden können wirst wenn Du Dich nciht vorher mit den Grundlagen befasst, aber so würde das gehen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

  <head>

    <title>hover-test</title>

  </head>

  <body>

    <table>

      <tr>

        <td width="151" height="29" bgcolor="#0066CC" onmouseover="this.style.backgroundColor = 'red';"></td>

      </tr>

    </table>

  </body>

</html>
wie kann ich sowas in mein HTML/CSS Dokument einbinden??
Eine CSS-Datei ist kein Dokument und so kannst Du die Anweisungen in ein (X)HTML Dokument einfügen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

  <head>

    <title>rtfm</title>

  </head>

  <body>

    <a href="#"><img src="foo.jpg" alt="Ich bin ein Button" onmouseover="this.src = 'bar.jpg';" onmouseout="this.src = 'foo.jpg';" /></a>

  </body>

</html>

Grüße und helau!, Tobias

nochmal danke für die Tips, hab's jetzt hinbekommen!!

@ tobias digital: danke für den Link!! selfhtml ist echt sehr geil, weil dort viele Erklärungen usw. sind, besonders für Anfänger!!

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.