Fixer Text über MouseOver
lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess
all
bild
boxen
code
container
definiert kopfbereich
forum
gut helfen
header
http
index
kopf
kopfbereich
liegender schrift
position
schrift
sichtbar danke
test
text
url
-
Hallo
Ich würde gerne in meinem Header einen Bildwechsel mit MouseOver und darüber liegender Schrift machen.
Der MouseOver funktioniert problemlos die Schrift auch aber ich bekomme die Schrift nicht über den MouseOver.
Gibt es dafür eine Möglichkeit?
Danke -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Was hast du denn als Code?
-
Der MouseOver Code
<img name="g150816"
onMouseOver="g150816.src=' (Bildadresse over) '"
onMouseOut="g150816.src=' (Bildadresse out) '"
src=" (Bildadresse out) " border="0" alt="">
<img style="width:0px; height:0px; display:none;" src=" (Bildadresse over) " >
Jetzt soll noch mittig und zentriert eine Schrift sein.
Falls es wichtig ist. der Code ist so in Kopf.php gespeichert und wird damit aufgerufen:
<div id="kopfbereich">
<?php include 'Kopf.php';?>
</div>
Im css ist kopfbereich so definiert:
#kopfbereich {
height: 300px;
}
Beitrag zuletzt geändert: 17.8.2015 20:10:35 von atp -
Im Prinzip müsste dir folgendes ganz gut helfen: http://www.computerbase.de/forum/showthread.php?t=1119290
Du müsstest also zwei div-Container erstellen mit deinem Text und deinem Bild darin. Der erste ist erstmal hidden und wird dann nur bei mouseover oder per CSS hover sichtbar. -
Danke hat geklappt
html
<!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> <title>Test</title> <link rel="stylesheet" type="text/css" href="1.css" /> </head> <body> <div class="box"> <p class="hover"><Header><br>Test</Header></p> <div class="mask"><Header><br>Test</Header></div> </div> </body> </html>
css
.hover { height: 300px; width: 964px; background-color: red; background-repeat:no-repeat; z-index: 1; } .mask { position: absolute; height: 300px; width: 964px; top:0; background-color: blue; -moz-transition: all 0s ease 0s; -webkit-transition: all 0s ease 0s; transition: all 0s ease 0s; opacity: 0; z-index: 2; } .box { position: relative; width: 964px; } .box:hover .mask { opacity: 1; } Header { position: absolute; text-align: center; width: 964px; top:0; color: green; font-size:43pt; }
background-color: ???; muss man nur durch background-image: url(???); ersetzen sowie height: und width: anpassen. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
