Willkommen in der Webstatt
User-1 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?
User-2 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.

User-1 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...

User-3 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... .

User-3 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>

User-1 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?

User-3 am 26.03.06 13:21

Quote
Original von xyz-140
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... .

User-4 am 26.03.06 13:40

Die Lösung [COLOR=red](EDIT: Die Lösung xyz-71 = Das von xyz-71 vorgeschlagene Skript)[/COLOR] von xyz-71 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. xyz-48n 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>

User-3 am 26.03.06 13:43

Quote
Original von xyz-93
Die Lösung von xyz-71 hat bei mir für Flackern gesorgt.


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

User-4 am 26.03.06 13:46

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

User-5 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

User-1 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...

User-5 am 26.03.06 21:59

Schau dir mein Beispiel nochmal genauer an.

User-1 am 26.03.06 22:52

haben die sternchen was zu sagen (noch nie gesehen)

User-6 am 27.03.06 00:20

damit sprichst du alle kinderelemente an. also ein universalselektor.

gruß, xyz-118

User-1 am 27.03.06 15:22

geht trotzdem net

User-5 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