1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Rollover?

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Max Dittmann, 28.09.06.

  1. 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
     
  2. stk

    stk Grünapfel

    Dabei seit:
    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
     
  3. atomfried

    atomfried Leipziger Reinette

    Dabei seit:
    02.04.05
    Beiträge:
    1.781
    Danileinchen gefällt das.
  4. stk

    stk Grünapfel

    Dabei seit:
    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
     
  5. atomfried

    atomfried Leipziger Reinette

    Dabei seit:
    02.04.05
    Beiträge:
    1.781
    das klang vorhin noch etwas anders.
     
  6. Herr Sin

    Herr Sin Millets Schlotterapfel

    Dabei seit:
    05.01.04
    Beiträge:
    4.752
    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>
     
  7. danke, aber

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

    Wäre echt praktischer ;)
     
  8. Herr Sin

    Herr Sin Millets Schlotterapfel

    Dabei seit:
    05.01.04
    Beiträge:
    4.752
    Nein. Eben mit JavaScript. Aber was findest du an dem CSS-Beispiel so schwierig?
     

Diese Seite empfehlen