Rollover?

Max Dittmann · 28.09.06

Hallo zusammen!

Kann mir einer von euch den simplen Rolloverbefehl geben? HTML oder un HTML eingebettet??

ist das i-wie im <img xxxx> TAG ?? Gibt es da ne Möglichkeit?

Mfg. Max

stk · 28.09.06

Moin,

rollovers baust Du entweder mit JavaScript oder eleganter mit CSS. Für CSS gibt's die Pseudoklasse :hover, welche Du idealerweise auf das Tag <a href> anwendest. Grundsätzlich geht's zwar mit allen Block-Elementen, aber der IE/Win ist da nicht standardkonform.

Also etwa so:

Code:

ul li a {
  background: url(bildchen-normal.jpg) no-repeat;
  ...
  }

ul li a:hover {
  background: url(bildchen-rollover.jpg) no-repeat;
  ...
  }
...
<ul>
 <li><a href="#">Menu 1</a></li>
 <li><a href="#">Menu 2</a></li>
 ...
</ul>

Gruß Stefan

atomfried · 28.09.06

http://de.selfhtml.org/javascript/beispiele/buttons.htm

dafür will ich aber karma. wenn ich mir schon die mühe mache für dich zu suchen! ;-)

stk · 28.09.06

Moin,

dafür gehört Dir kein Karma, weil die JS-Lösung von anno-dunnemals ist, als das Internet noch über Transmissionsriemen lief. Bitte nicht benutzen!

Gruß Stefan

atomfried · 28.09.06

stk schrieb:
Moin,

dafür gehört Dir kein Karma, weil die JS-Lösung von anno-dunnemals ist, als das Internet noch über Transmissionsriemen lief. Bitte nicht benutzen!Gruß Stefan

stk schrieb:
rollovers baust Du entweder mit JavaScript oder eleganter mit CSS.

das klang vorhin noch etwas anders.

Herr Sin · 28.09.06

Beispiel nur mit CSS (ohne JavaScript):

Code:

<html>
<head>
<style type="text/css">

a#home img { background: url(home.gif) top left no-repeat; }
a#links img { background: url(links.gif) top left no-repeat; }
a#about img { background: url(about.gif) top left no-repeat; }

a#home:hover img { background: url(home-over.gif) top left no-repeat; }
a#links:hover img { background: url(links-over.gif) top left no-repeat; }
a#about:hover img {background: url(about-over.gif) top left no-repeat;}

</STYLE>

</head>

<body>

<a id="home" href="home.html"><img src="blank.gif" alt="Home"></a>
<a id="links" href="links.html"><img src="blank.gif" alt="Links"></a>
<a id="about" href="about.html"><img src="blank.gif" alt="About"></a>

</body>
</html>

Max Dittmann · 28.09.06

danke, aber

gibts keinen einfachen HTML-Code wie beispielsweise

Code:

<img src="Bild.gif" onmouseover="Bild2.gif">

oder ähnlich??

Wäre echt praktischer

Herr Sin · 28.09.06

Max Dittmann schrieb:
danke, aber

gibts keinen einfachen HTML-Code wie beispielsweise

Code:

<img src="Bild.gif" onmouseover="Bild2.gif">

oder ähnlich??

Wäre echt praktischer

Nein. Eben mit JavaScript. Aber was findest du an dem CSS-Beispiel so schwierig?

Suche

Suche

Rollover?

Max Dittmann

Gast

stk

Grünapfel

atomfried

Leipziger Reinette

stk

Grünapfel

atomfried

Leipziger Reinette

Herr Sin

Ralls Genet

Max Dittmann

Gast

Herr Sin

Ralls Genet

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)