✔ Banner-Problem

Status
Nicht offen für weitere Antworten.
P

piti66

Erfahrenes Mitglied
Hey,

und zwar möchte ich einen banner bauen. Es soll erst ein normaler Banner 468*60 sein und wenn ich drauf gehe soll er größer werden und mehr Inhalt angezeigt werden. Will aber kein javascript benutzen! Weiß jemand wie man dass machen könnte!

mfg

Sebastian
 
Mit CSS....
da ein Banner idR. verlinkt ist...kannst du die Abmaße dieses Links beim Überfahren über die Pseudoklasse a:hover vergrössern.

Bsp:
Code: 
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
a.banner{
  display:block;
  width:468px;
  height:60px;
  overflow:hidden;
}
a.banner:hover{
  overflow:visible;
}
-->
</style>
</head>
<body>
<a class="banner" href="#"><img width="1000" height="120" src="banner.gif"></a>
</body>
</html>
....das Banner ist eigentlich 1000x120 gross, sein Anzeigebereich wird aber auf 468x60 eingegrenzt....beim überfahren wird es dann über overflow:visible in seiner vollen Grösse angezeigt.
 
Hey sven,

funtioniert richtig gut! Nur ist noich ein Problem! Die Schrift die drunter ist soll überdeckt werden und nicht mehr sichtbar sein bzw. nicht verschoben werden.

mfg

Sebastian
 
Sieht jetzt bei mir so aus:

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Test</title>
    <style type="text/css">
    a.banner{
           border:0;
      display:block;
      width:468px;
      height:60px;
      overflow:hidden;
    }
    a.banner:hover{
      overflow:visible;
           z-index: 99;
    }
    </style>
<body>

<a class="banner" href="#"><img width="468" height="180" src="banner.jpg"></a>
dsasf
</body>
</html>


geht aber nicht der text wird immer noch verschoben!

mfg

Sebastian
 
Packe unter das Banner ein Platzhalter Element in der Ausgangsgrösse des Banners, und positioniere das Banner absolut darüber...
Code: 
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
body{
  margin:0;
}
a.banner,div.dummie{
  display:block;
  width:468px;
  height:60px;
  overflow:hidden;
}
a.banner{
  position:absolute;
  top:0;
  left:0;
}
a.banner:hover{
  overflow:visible;
}
-->
</style>
</head>
<body>
<div class="dummie">&nbsp;</div>
<a class="banner" href="#"><img width="1000" height="120" src="banner.gif"></a>
text text text
</body>
</html>

....in der Ausgangsgrösse wird der Text angezeigt, beim Überfahren wird er verdeckt, ohne den Seiteninhalt zu verschieben.
 
Nö...keine Angst, das dummie hat nichts mit dumm zu tun :)

ist halt nur so ein Name...wenn einem nichts besseres einfällt :-)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück