zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Ein Bild per CSS auf andere Grafik

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.10.2011, 10:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2011
Beiträge: 6
FrankWest befindet sich auf einem aufstrebenden Ast
Standard Ein Bild per CSS auf andere Grafik

Guten Morgen zusammen,

ich bin hier im Forum neu und könnte eure Hilfe gebrauchen. Ich bin noch ein relativer Neuling was CSS angeht.

Meine Umsetzungsidee:

Ich habe eine Grafik, die als Startbild dient. Auf diesen Bild sieht man verschiedene "Räume", die man anklicken kann. (umgesetzt mit Imagemaps)

Jetzt möchte ich noch eine weitere Grafik in den Raum stellen. Diese soll sich mit einem MousOver dann auch bewegen. Sprich ein Männchen, das in dem Raum steht und wenn man drüber fährt, dann soll es sich animieren.

Den Mousover habe ich auch hinbekommen. Mein Problem ist jetzt nur noch, die Grafik in den Raum zu stellen. Also so, dass die Grafik auf meiner Hauptgrafik drübergestellt wird.

Ich habe keine Ahnung, wie ich das am besten umsetzen soll. Könnt ihr mir da Tipps geben?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.10.2011, 12:03
Benutzerbild von Chris2011
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.01.2011
Beiträge: 301
Chris2011 befindet sich auf einem aufstrebenden Ast
Standard

SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

damit vielleicht
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.11.2011, 12:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2011
Beiträge: 6
FrankWest befindet sich auf einem aufstrebenden Ast
Standard

Ich habe das ganze jetzt eingefügt. Sprich ein Hintergrund und mit dem Stylesheets auf die Grafik. Klappt wunderbar.

Nur das Problem ist, das sich je nach Auflösung des Bildschirms bzw größe des Browser die Grafik an eine andere Person befindet. Wie kann ich die Figur fest machen, damit sie egal wie groß das Browserfenster ist, immer an der gleichen Stelle bleibt?

Wenn ich die Position auf relative stelle, dann ist die Grafik leider nicht mehr auf das Bild, sondern unter das Bild..

Geändert von FrankWest (02.11.2011 um 12:48 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 02.11.2011, 12:54
$("#mettbröttchen");
XHTMLforum-Mitglied
 
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard

Zitat:
Zitat von FrankWest Beitrag anzeigen
Wenn ich die Position auf relative stelle, dann ist die Grafik leider nicht mehr auf das Bild, sondern unter das Bild..
Dir scheint der Unterschied zwischen relativer und absoluter Positionierung noch nicht klar zu sein, oder? Lies dich bitte erstmal in das Thema ein, jeder weitere Lösungsansatz führt sonst zu nichts...
Mit Zitat antworten
  #5 (permalink)  
Alt 02.11.2011, 15:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2011
Beiträge: 6
FrankWest befindet sich auf einem aufstrebenden Ast
Standard

Okay.. hab auch gemerkt, das es gar nicht daran lag, sondern an die Hintergrundgrafik. Diese bewegt sich, die Figur bleibt ja stehen.

Jetzt muss ich nur noch eine gute Lösung finden, damit die Grafik in der Mitte ist und die Grafik dennoch nicht beim verändern des Browsers sich verschiebt.
Mit Zitat antworten
  #6 (permalink)  
Alt 02.11.2011, 17:41
Benutzerbild von Cocoon
position: relative;
XHTMLforum-Mitglied
 
Registriert seit: 12.06.2009
Ort: Berlin
Beiträge: 156
Cocoon wird schon bald berühmt werden
Standard

HTML-Code:
<div class="background">

    <img src="deinbildvorn.jpg" />

</div>

.background {
    position: relative;
    background: url(deinbildhinten.jpg);
}

.background img {
    position: absolute;
}
Der DIV benötigt position: relative; damit sich das mit position: absolute; positionierte IMG-Element am DIV orientiert, nicht am Browserrand.

Damit dir das schlüssig erscheint, empfehle ich dir dringend dich mit der hier vorgeschlagenen Lektüre auseinander zu setzen.
Mit Zitat antworten
  #7 (permalink)  
Alt 02.11.2011, 17:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2011
Beiträge: 6
FrankWest befindet sich auf einem aufstrebenden Ast
Standard

Soweit verstehe ich das!

Mein Problem ist, das wenn ich das Bild ganz einfach als Hintergrund definieren würde, dass dann das Imagemap nicht mehr funktioniert. Damit tue ich mir schwer.

Und soweit ich das mitbekommen habe, kann ich keine Imagemaps auf Backgrounds positionieren.

Wisst ihr was ich meine?
Mit Zitat antworten
  #8 (permalink)  
Alt 02.11.2011, 18:38
Benutzerbild von Cocoon
position: relative;
XHTMLforum-Mitglied
 
Registriert seit: 12.06.2009
Ort: Berlin
Beiträge: 156
Cocoon wird schon bald berühmt werden
Standard

Lade mal ein Beispiel hoch...
Mit Zitat antworten
  #9 (permalink)  
Alt 03.11.2011, 11:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2011
Beiträge: 6
FrankWest befindet sich auf einem aufstrebenden Ast
Standard

Ich hab hier mal das Beispiel hochgeladen..

http://testuser.speedit.org/bb/

Die Grafiken habe ich ersetzt. Die Habbo-Comic-Grafik soll den Raum darstellen. Die Imagemaps sind natürlich jetzt nicht angepasst, aber normalerweise sind die dann auf verschiedene Gegenstände gesetzt. (Türen, Fenster etc)

Und die GIF von Garfield soll die Person darstellen. Wenn man nicht mit der Maus drüber fährt, bewegt sie sich nicht. Und sobald man drüber fährt, bewegt sie sich.

So und nachdem ihr die Datei in eurem Browser geöffnet habt, dann verschiebt mal die größe und schaut, was passiert..

PS.: Der Code ähnelt einer Schlammschlacht, da ich sehr viel ausprobiert habe. Wenn ich die Lösung habe, werde ich das natürlich nochmal sauberer machen.

Geändert von FrankWest (03.11.2011 um 12:13 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.11.2011, 12:06
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Zitat:
Zitat von FrankWest Beitrag anzeigen
So und nachdem ihr die Datei in eurem Browser geöffnet habt, dann verschiebt mal die größe und schaut, was passiert
Das wird wahrscheinlich kaum jemand bis keiner machen. Wir basteln nicht gerne.
Mit der Aussage war gemeint: besorg dir einen Webserver und lade die Seite da hoch. Dazu folgendes Suchwort: "Freehoster".
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Dynamisches CSS per Server? Oder client? Oder wie? andir CSS 4 25.11.2010 13:20
Grafik in externer CSS Cu Chullain CSS 11 27.03.2008 23:13
Bilder einblenden per CSS uha CSS 5 21.01.2008 16:27
css und grafik ??? cd CSS 5 20.02.2004 17:34


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:52 Uhr.