leo27011992 Gast |
Hey,
ich suche eine HTML CODE für folgendes:
es steht eine NAME auf der website, und wen man jetzt mit der maus drüber fährt, soll ein bild neben der maus erscheinen, mit dem geischt der person
die bilder habe, die namen auch, aber wie mache ich das so zusammen, ohne neues fenster etc
bitte um hilfe!!
Hat dir diese Antwort geholfen?
Das ist z.B. mit einem CSS-Pup-Up-Fenster möglich.Was ist ein Pup-UP? Etwas unanständiges? Davon abgesehen möchte der TO kein neues Fesnter öffnen.
Hat dir diese Antwort geholfen?
Sorry, es sollte Pop-Up-Fenster oder zu deutsch "Aufgeh-Fenster" heißen. Es öffnet sich dadurch keine neue Seite, sondern es wird ein größenmäßig definierter Bereich beim Hovern eingeblendet. Ist nichts unanständiges.
Vorteil der CSS-Lösung: Sie funktioniert auch, wenn Javascript deaktiviert ist.
Nachteil: Etwas sehr aufwändig zu coden.
Hat dir diese Antwort geholfen?
... wir sollten überhaupt mehr deutsche Begriffe verwenden:
http://www.reinhard-pfaffenberg.de.vu/ 
Schön das ihr mir so vielseitige vorschläge gebt, aber ich habe keine ahung wie ich das umsetzen soll.
Ich habe 2 mal ein css geöffnet. 1mal ausversehen und das 2temal habe ich damit irgendwie die ganze seite ruiniert.
Ich glaube das mit den css pop up fenster ist dsa was ich suche, ich lese es gerade. Ähhmm, okay. Mein free layout hat eine css datei und in den html daiten kein "style"
Dh ich kopiere den css code von der webiste in meine css datei und dan den html code an meinen NAMEN, benenne mein bild und schick ist?!
Das ist mir doch echt zu hoch?!
Hat dir diese Antwort geholfen?
Gibt es einen Link?
Wenn eine CSS-Datei vorhanden ist, wird auf den entsprechenden HTML-Seiten normalerweise darauf verwiesen.
Kommt jetzt drauf an, wo du das haben willst.
Zum Test lade dir am besten deine Online-Dateien auf den PC. Erstelle vorsichteshalber eine sicherungskopie.
In die CSS-Datei fügst du den CSS-Code ein und in die HTML-Datei den HTML-Code. Dann ausprobieren und wieder hochladen.
also:
http://www.friedels-home.com/index.htm?/Board/viewtopic.php?t=400
hier von ausgegangen: habe ich jetzt folgende codes in meiner css:
a.info span{display: none;
background-image: url(../images/test.jpg);
}
a.info:hover span{
display:block;
position:absolute;
top:2em; left:2em; width:200px;height:200px;
border:1px solid #0cf;
color:#000;
text-align: center}
DARAUF HIN:
habe ich dann in meine html datei [bzw txt, zum bearbeiten] einfach mal das kopiert:
<a class=info href="#">Hier soll beim Drüberfahren ein Info-Fenster erscheinen <span>Hallo, ich bin das Info-Fenster, hier kannst du Infos reinschreiben</span></a>
Es passiert foglendes, wen man die html datei mit den fircefow brwoser öffnet:
man sieht den gesamten text als link [gelb unterstrichen] sowhl "hier soll beim .." als auch "hallo, ich bin" fährt man über "hier soll beim" erscheint ganz links oben in der site ein blauer nicht ausgefüllter kasten [200x200] ohne das mein weißes 200x200 test-jpg zu sehen ist. Es verschwindet solagne der katen zu sehen ist und die maus über dem "hier soll beim." der andere teil mit den "hallo .."
Fährt man mit der Maus über das "hallo, ich bin" erscheint der blaue katen wieder unausgefüllt und beides fängt an zu blinken [schnell, eher eine art zitteren] weiß nciht wie ich es besser beschreiben soll
Was habe ich nun wieder falsch gemacht??
ps. toll wäre es wen das bild in der mitte der website oder neben der maus auftauchen könnte. Und auch ohne text, im bild.
Ich hoffe auf hilfe und danke im voraus
sry wegen dem doppelpost aber der satz oben mit den "es verschwindet ..." sol heißen.
Solange man mit der maus über dem "hier soll beim.." hält, und damit der blaue unausgefüllt kasten ja ist, ist das "hallo, ich...." verschwunden.
Lg
HILFE!
DANKE!
Hat dir diese Antwort geholfen?
Ja, das funktioniert nur so lange, wie du mit der Maus über den Link fährst.
Probiers mals so:
CSS
a.info span{display: none;
background-image: url(../images/test.jpg);
}
a.info:hover{z-index:2; background-color:#ff0}
a.info:hover span{
display:block;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
width:200px;height:200px;
border:1px solid #0cf;
color:#000;
text-align: center}<a class=info href="#">Hier soll beim Drüberfahren ein Info-Fenster erscheinen <span></span></a>Hat dir diese Antwort geholfen?
margin-top:-100px;Diesen Pixelwert musst du verändern.margin-top:100px;, hier dann also +100pxSUPER thx
was mache ich eig wen ich jetzt noch eins davon möchte??
also ein andere Name mit einem anderen Bild??
wie ändere ich das dann um?? und wo??
in der css etwa "b.info" und dann irgendwas im html code reinschreiben??
[es werden ca. 5-7 solcher sachen benötigt]
ps. das erste funktioniert bereits wunderbar. sieht genial aus, einfach spitze, hätte ich nie ohne dich(prm)/euch geschafft
Hat dir diese Antwort geholfen?
Bei mehreren Bildern darfst du leider nich alphabetisch fortfahren, denn "a" ist reserviert für den Link und darf deshalb nicht verändert werden.
Am besten koperst du alles. Dann überall wo "info" steht ersetzen durch eine andere Bezeichnung, z.B. "info1"
Sowohl im CSS als auch im HTML-Teil. Dann jeweils noch ein anderes Bild hinterlegen.
Wenn das z.B. Personen sind, könntest du genauso gut auch deren Namen nehmen und damit "info" ersetzen.
| « protokollieren von aktiven Server-Verbindungen mittels htaccess => PHP | Software zur Homepage-Erstellung » | ||