• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Was gibt es Schöneres als den Mai draußen in der Natur mit allen Sinnen zu genießen? Lasst uns teilhaben an Euren Erlebnissen und macht mit beim Thema des Monats Da blüht uns was! ---> Klick

Rollover?

  • Ersteller Max Dittmann
  • Erstellt am

Max Dittmann

Gast
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

stk

Grünapfel
Registriert
05.01.04
Beiträge
7.141
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
 
stk

stk

Grünapfel
Registriert
05.01.04
Beiträge
7.141
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
 
Herr Sin

Herr Sin

Sternapfel
Registriert
05.01.04
Beiträge
4.995
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

Gast
danke, aber

gibts keinen einfachen HTML-Code wie beispielsweise
Code: 
<img src="Bild.gif" onmouseover="Bild2.gif">
oder ähnlich??

Wäre echt praktischer ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2024 Apfeltalk | Made on a Mac
Oben Unten