Webstatt.org - Community seit 2006 - 2012 (2024?)

Hover mal anders

Avatar user-250
25.03.2006 22: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;
}

Es gibt Menschen die Signaturen benutzen? >>Homepage<< >>Homepage2<<
Avatar user-166
26.03.2006 07:15

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

[ » HesaSys - ein freies, schnelles und flexibles WCMS ]
Avatar user-250
26.03.2006 10: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...

Es gibt Menschen die Signaturen benutzen? >>Homepage<< >>Homepage2<<
Avatar user-181
26.03.2006 10: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... .

...dank Prophet-Design hab ich hergefunden...
Avatar user-181
26.03.2006 10: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"zwinkern.style.visibility = "visible";
}

function show2 () {
if (document.getElementById)
document.getElementById("Ueberschrift"zwinkern.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>

...dank Prophet-Design hab ich hergefunden...
Avatar user-250
26.03.2006 11: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?

Es gibt Menschen die Signaturen benutzen? >>Homepage<< >>Homepage2<<
Avatar user-181
26.03.2006 11:21

Original von user-250
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... .

...dank Prophet-Design hab ich hergefunden...
user-203
26.03.2006 11:40

Die Lösung (EDIT: Die Lösung user-181 = Das von user-181 vorgeschlagene Skript) von user-181 hat bei mir für Flackern (EDIT: auf dem Bildschirm ) gesorgt. Mir würde jetzt noch die Möglichkeit einfallen, die Y-Position der Maus zu überwachen. user-158n 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'zwinkern.style.visibility == 'hidden'zwinkern
{
document.getElementById('b'zwinkern.style.visibility = 'visible';
}
else if (ykoord > '100'zwinkern
{
document.getElementById('b'zwinkern.style.visibility = 'hidden';
}
}
document.onmousemove = showhide;
document.onload = document.getElementById('b'zwinkern.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>

Denkt dran, Kinder auf dem Rücksitz verursachen Unfälle, Unfälle auf dem Rücksitz verursachen Kinder.
Avatar user-181
26.03.2006 11:43

Original von user-203
Die Lösung von user-181 hat bei mir für Flackern gesorgt.


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

...dank Prophet-Design hab ich hergefunden...
user-203
26.03.2006 11:46

Das Script natürlich. Ich sollte meine Antworten auf Zweideutigkeiten untersuchen lächeln

Denkt dran, Kinder auf dem Rücksitz verursachen Unfälle, Unfälle auf dem Rücksitz verursachen Kinder.
Avatar user-255
26.03.2006 12: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. Fettes Grinsen

Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm
Avatar user-250
26.03.2006 18: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...

Es gibt Menschen die Signaturen benutzen? >>Homepage<< >>Homepage2<<
Avatar user-255
26.03.2006 19:59

Schau dir mein Beispiel nochmal genauer an.

Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm
Avatar user-250
26.03.2006 20:52

haben die sternchen was zu sagen (noch nie gesehen)

Es gibt Menschen die Signaturen benutzen? >>Homepage<< >>Homepage2<<
user-228
26.03.2006 22:20

damit sprichst du alle kinderelemente an. also ein universalselektor.

gruß, user-228

Avatar user-250
27.03.2006 13:22

geht trotzdem net

Es gibt Menschen die Signaturen benutzen? >>Homepage<< >>Homepage2<<
Avatar user-255
27.03.2006 13:46

Was geht wo nicht?

Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm