Willkommen in der Webstatt Zum Webstatt Blog und Stories
MendaX MendaX am 25.03.06 23:21

ich dachte mir, ich bau in meine Homepage über dem Header mal eine Art Hover rein...
soll heißen:



Wenn man mit der Maus über den Bereich fährt, wird die Ebene/ das Zeugs angezeigt, indem die Grafik, die vorher "absolute" über der Ebene/dem Zeug darunter liegt, unsichtbar wird.

(komisches Deutsch!!!!)

Okay, das ist ja eigentlich kein Prob... müsste bei #header1:hover ja nur "background: none;" schreiben... allerdings kann ich dann nicht mehr auf die Ebene/auf das Zeugs darunter zugreifen (zum Beispiel Formulardaten ausfüllen)

und bei "visibility:hidden" flimmert es und gibt die Ebene/das Zeugs darunter auch nur halb frei...


html,body{
height: 100%;
margin: 0px;
padding: 0px;
background: #222222 url(../img/hover.jpg) repeat-x;
color: #5F5F5F;
font-weight: normal;
font-size : 12px;
font-family : Trebuchet MS,Verdana,Arial,sans-serif;
}

#header1 {
background: #222222 url(../img/bg.jpg) repeat-x;
position: absolute;
width: 100%;
height:100px;
left: 0px;
top: 0px;
visibility:visible;
}


#header1:hover {
background: none;
position: static;
width: 100%;
height:100px;
left: 0px;
top: 0px;
visibility:hidden;
}

netcup.de Warum gibt es hier Werbung?
dookie dookie am 26.03.06 09:15

Vielleicht wäre es sinnvoll, wenn du mal eine komplette HTML Seite online stellts, damit wir uns das besser vorstellen können.

MendaX MendaX am 26.03.06 12:10

hier mal ein Test...:

Link

Ach ja, was könnte man sonst noch drunter machen? einen Newsticker der lustigsten Links von der und der Seite...

ähm... ja... beim Blog der Login und ansonsten... hm... naja muss ich mir was überlegen...

Flom Flom am 26.03.06 12:19

Müsste man (ich geh jetzt mal von Delphi aus die Logik ist ja fast immer die selbe) jetzt sagen, wenn drüber gefrahren mit der maus dann visible und die uhrsprüngliche dann hidden... und wieder andersherrum... hmmm wär aber wieder glaub ich eine php programmierung... .

Flom Flom am 26.03.06 12:33

Hallo noch mal,
ich hab mal bei Selfhtml geschaut.... und habe dort folgendes gefunden allerdings mit JS & mit click müsste man aber umprogrammieren so das es mit moushover funzt:
http://de.selfhtml.org.....htm#visibility

<html><head><title>visibility</title>
<script type="text/javascript">
function show () {
if (document.getElementById)
document.getElementById("Ueberschrift").style.visibility = "visible";
}

function show2 () {
if (document.getElementById)
document.getElementById("Ueberschrift").style.visibility = "hidden";
}
</script>
</head><body>

<h1 id="Ueberschrift" style="visibility:hidden">Die &Uuml;berschrift zum Text</h1>
<p>Hier der Text. Aber fehlt da nicht was?</p>
<p><a href="javascript:show()">Anzeigen!</a></p>
<p><a href="javascript:show2()">Weg!</a></p>

</body></html>

MendaX MendaX am 26.03.06 13:20

ja müsste ich mich irgendwann mal mit befassen...

kann java script nur sehr geringfügig... aber ich denke, das ist zu schaffen...

nur wenn jemand javascript ausgeschaltet hat, ists auch wieder dumm oder?

Flom Flom am 26.03.06 13:21

Quote
Original von MendaX
nur wenn jemand javascript ausgeschaltet hat, ists auch wieder dumm oder?


Sicherlich, aber ich persönlich kenne keinen der JavaScript ausgeschaltet hat und für soetwas gibt es im Zweifelsfall immer kleine Hinweise... .

Johannes am 26.03.06 13:40

Die Lösung [COLOR=red](EDIT: Die Lösung Flom = Das von Flom vorgeschlagene Skript)[/COLOR] von Flom hat bei mir für Flackern [COLOR=red](EDIT: auf dem Bildschirm )[/COLOR] gesorgt. Mir würde jetzt noch die Möglichkeit einfallen, die Y-Position der Maus zu überwachen. Dann könntest du das Feld ausblenden, wenn die Maus unter dem Balken ist.
Da hab ich auch gleich mal eine kleine Beispieldatei erstellt:

<?xml version='1.0' encoding='iso-8859-1'?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<style type='text/css'>
*
{
margin: 0px;
padding: 0px;
}
#a
{
position: absolute;
z-index: 4;
left: 0px;
top: 100px;
width: 100%;
height: 1px;
background-color: #FF0000;
}
#b
{
position: absolute;
z-index: 2;
left: 0px;
top: 0px;
width: 100%;
height: 100px;
background-color: red;
}
</style>
<script type='text/javascript'>
var ykoord = 0;
var IE = document.all?true:false;
function showhide (e)
{
if (IE)
{
ykoord = event.clientY + document.body.scrollTop;
}
else
{
ykoord = e.pageY;
}
if (ykoord <= '100' && document.getElementById('b').style.visibility == 'hidden')
{
document.getElementById('b').style.visibility = 'visible';
}
else if (ykoord > '100')
{
document.getElementById('b').style.visibility = 'hidden';
}
}
document.onmousemove = showhide;
document.onload = document.getElementById('b').style.visibility = 'hidden'; // hab das aus den style-sheets rausgenommen, damit Personen ohne Javascript das Feld trotzdem zu sehen bekommen.
</script>
</head>
<body>
<hr id='a' />
<div id='b'>asdasddfasfasfasd</div>
</body>
</html>

Flom Flom am 26.03.06 13:43

Quote
Original von Johannes
Die Lösung von Flom hat bei mir für Flackern gesorgt.


wie ist den das jetzt zu verstehen ? :D das Script oder meine Antworten als Lösung ^^

Johannes am 26.03.06 13:46

Das Script natürlich. Ich sollte meine Antworten auf Zweideutigkeiten untersuchen :)

milahu milahu am 26.03.06 14:11

Krank!

<div id="header">
<p>Trallalaa!</p>
<p>Noch'n Absatz</p>
</div>


#header{height:200px}
#header *{display:none}
header:hover *{display:block}


Sauber, umweltfreundlich, einfach. CSS eben. Und der IE ist auch gearscht. :D

MendaX MendaX am 26.03.06 20:03

html,body{
height: 100%;
margin: 0px;
padding: 0px;
background: #222222 url(../img/bg.jpg) repeat-x;
color: #5F5F5F;
font-weight: normal;
font-size : 12px;
font-family : Trebuchet MS,Verdana,Arial,sans-serif;
}

#header1 {
display:none;
}


#header1:hover {
background: #222222 url(../img/hover.jpg) repeat-x;
position: absolute;
width: 100%;
height:100px;
left: 0px;
top: 0px;
display:block;
}


<div id="header1">blablabla</div>

so?

hm.. da pssiert aber nichts...

milahu milahu am 26.03.06 21:59

Schau dir mein Beispiel nochmal genauer an.

MendaX MendaX am 26.03.06 22:52

haben die sternchen was zu sagen (noch nie gesehen)

leo am 27.03.06 00:20

damit sprichst du alle kinderelemente an. also ein universalselektor.

gruß, leo

MendaX MendaX am 27.03.06 15:22

geht trotzdem net

milahu milahu am 27.03.06 15:46

Was geht wo nicht?

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt