|
 |
  |
| Autor |
Nachricht |
Ceron
Neuer [User]
Anmeldung: 17.10.06
Beiträge: 5
|
 Verfasst am: 17.10.2006, 15:41 Titel: Rollover-Probleme |
 |
|
Hallo allerseits, ich habe folgendes Problem:
Ich habe einen ganzseitiges Hintergrundimage, über den Rolloverbuttons gebastelt werden sollen. Ich habe gehört, dass das mit div-tags gehen soll. Nun hab ich mich daran versucht, erstmal das Image als Div über den Background zu legen und bin schon daran gescheitert.
Kann mir da jemand Hilfestellung geben?`Wäre klasse!
Gruß,
Ceron
|
|
| Nach oben |
|
 |
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1626
|
| Verfasst am: 17.10.2006, 16:51 Titel: |
|
|
sorry,
das ist so etwas ungenau. Wäre es problematisch, das ganze einmal zu zeigen und anhand der Bilder zu erklären?
Wäre dann einfacher nachzuvollziehen,
MfG,
chris
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
Ceron
Neuer [User]
Anmeldung: 17.10.06
Beiträge: 5
|
| Verfasst am: 17.10.2006, 22:20 Titel: |
|
|
Danke erstmal für die schnelle Antwort.
Zeigen kann ichs dir leider noch nicht, da ich noch kein Webspace habe.
ich probiers mal hierrein zu skizzieren:
-------------------------------------
|............................................| <-- Background image (ganzseitig)
|( )1......................................|
|............................................|
|............................................| 1:
|............................................| Beim Mouseover über die Buttongrenzen soll
|............................................| ein Rollovereffekt das Backgroundimage mit
|............................................| dem Rolloverbutton überlegen.
-------------------------------------
Meines Wissens geht das mit div- tags, bin aber für andere Vorschläge offen.
Der BG wurde vorher mit Photoshop gemacht, und beinhaltet quasi alle rolloff-buttons.
Hoffe jemand kann damit was anfangen.
Gruß, Ceron
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1626
|
| Verfasst am: 18.10.2006, 16:46 Titel: |
|
|
willst du bei mouseover nur den Button ändern, oder das gesamte Hintergrundbild?
Für ersteres solltest du dir mal das style-attribut "position" näher angucken. Damit solltest du deine Buttons entsprechend positionieren können. Um dann den Rollover-Effekt hinzubekommen, musst du den Button als Link benutzen: Dabei dem Link (a) den normalen Button als Hintergrund geben (Höhe und Breite des Links entsprechend anpassen), das Rolloverbild dann als Hintergrund, wenn der Link mit der Maus überfahren wird (a:hover)
MfG,
chris
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
Ceron
Neuer [User]
Anmeldung: 17.10.06
Beiträge: 5
|
| Verfasst am: 19.10.2006, 15:40 Titel: |
|
|
ich habe quasi ein statisches Hintergrundbild, was in meinem Fall eine Laute beinhaltet. Jetzt will ich ,wenn jemand über einen Teil der Laute mouseovert, dass dieser Teil aufleuchtet (Rollover) und angeklickt werden kann.
Ich habe in einem Gespräch mit einem Bekannten geraten bekommne, ich solle das doch mit div-tags machen (wie auch immer). Ich habe das mal versucht, überhaupt mal ein Bild mittels Div über das statische Hintergrundbild zu legen, er zeigt mir zwar den Rahmen, aber das Bild erscheint nicht.
Das mit dem Position werde ich gleich mal ausprobieren, mal sehen wieviel Erfolg ich damit hab, aber danke schonmal!
Gruß,
Ceron
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1626
|
| Verfasst am: 19.10.2006, 15:54 Titel: |
|
|
Aaaalso 
Angenommen, du hast ein Bild, das sich verändern soll, das beim überfahren an der entsprechenden Stelle angezeigt werden soll.
Dann machst du das am besten so:
// stylesheet
| Code: |
#bild01 {
position: absolute;
top: (ober Abstand zur Position);
left: (linker Abstand zur Position);
display: block;
width: (Breite des Bildes);
height: (Höhe des Bildes);
font-size: 0px;
}
#bild01:hover {
background-image: url(Pfad_zum_aufleuchtenden_Bild.jpg) no-repeat;
}
|
// HTML:
| Code: |
<a href="ziel.html" id="bild01">Beschreibungstext für Textbrowser und Suchmaschinen</a>
|
So wird jetzt normalerweise einfach nur das Hintergrundbild der Seite angezeigt. Fährt man jetzt aber mit der Maus über den Bereich des Links, springt dort der Link-Hintergrund auf das aufleuchtende Bild - fertig.
Um jetzt die genauen Abstände rauszufinden, kannst du vorerst ja schon dem normalen Link das Hintergrund geben - wenn du die passende Position dann gefunden hast, nimmst du's einfach wieder raus 
Bei Bildern, die mehrere Kilobyte groß sind und Ladezeiten haben, ist es villeicht auch sinnvoll, das aufleuchtende Bild schon dem normalen Link als Hintergrund zuzuweisen, es mit background-position aber außerhalb des sichtbaren zu schieben - dass hat den Vorteil, dass das Bild schon beim normalen Betreten der Seite geladen wird, und daher beim überfahren des Links nicht erst geladen werden muss
Ist wahrscheinlich etwas kompliziert, wenn du Probleme kriegst, frag einfach
Praktisch wäre es außerdem, wenn du dir mal irgendwo Freewebspace (oder so) besorgen würdest, damit man das ganze mal richtig sehen kann - Es lässt sich einfach besser helfen
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
Ceron
Neuer [User]
Anmeldung: 17.10.06
Beiträge: 5
|
| Verfasst am: 19.10.2006, 16:22 Titel: |
|
|
du bist ja echt fix  Klasse!
Kann ich dir die Bilder als Email schicken? Du wirst so direkt sehen worauf ich hinaus will..
Gruß,
Ceron
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1626
|
| Verfasst am: 19.10.2006, 16:42 Titel: |
|
|
pack sie doch in 'ne Zip-Datei und lad sie z.B. auf  www.rapidshare.de hoch.
oder wenn's nicht allzuviele sind auf www.imageshack.us
Dann können mehr helfen, weiß nicht wieviel Zeit ich finde
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
Ceron
Neuer [User]
Anmeldung: 17.10.06
Beiträge: 5
|
|
| Nach oben |
|
|
|
|
  |
|
Alle Zeiten sind GMT + 1 Stunde
|
| Seite 1 von 1 |
|  |
