mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Fr 19.04.2024 10:44 Benutzername: Passwort: Auto-Login

Thema: Headerbild bei Mouseover tauschen vom 29.04.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Tipps & Tricks für Nonprint -> Headerbild bei Mouseover tauschen
Seite: 1, 2, 3  Weiter
Autor Nachricht
worshipper
Threadersteller

Dabei seit: 01.10.2004
Ort: worshipper fear satan
Alter: -
Geschlecht: Männlich
Verfasst Fr 29.04.2005 12:11
Titel

Headerbild bei Mouseover tauschen

 Antworten mit Zitat Zum Seitenanfang
hallo,

mein problem:

ich hab ein menü. nun möchte ich gerne, dass wenn der user über einen menüpunkt fährt, dass an einer bestimmten header stelle ein bild erscheint. aber zu jedem menüpunkt ein eigenes bild.

gibt es so ein script. ich kann mich erinnern, dass schon mal gesehen zu haben. ist mir leider wieder entfallen.
oder täusche ich mich da?


// Bitte in Zukunft aussagekräftigere
// Titel verwenden
// Danke Shakadi

Zuletzt bearbeitet von shakadi am Fr 29.04.2005 13:01, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Glas

Dabei seit: 24.05.2003
Ort: Bremen
Alter: 41
Geschlecht: Männlich
Verfasst Fr 29.04.2005 12:20
Titel

Antworten mit Zitat Zum Seitenanfang
Das geht.

Kannst du entweder rein mit CSS realisieren, oder aber mit JavaScript.

Da gibts massig scripts; einfach mal Googlen ... sieht jedenfalls so in der Art aus:

Code:
   function show(layerid) {
        document.getElementById(layerid).style.visibility = 'visible';
     }

      function hide(layerid) {
       
        document.getElementById(layerid).style.visibility = 'hidden';
       
      }


Dementsprechend noch DIV's anlegen, und es läuft Lächel
  View user's profile Private Nachricht senden
Anzeige
Anzeige
worshipper
Threadersteller

Dabei seit: 01.10.2004
Ort: worshipper fear satan
Alter: -
Geschlecht: Männlich
Verfasst Fr 29.04.2005 12:34
Titel

Antworten mit Zitat Zum Seitenanfang
danke.

nach welchen überbegriff sollte ich suchen?

anstatt des bildes kann ich sicherlich eine flash animation starten.
  View user's profile Private Nachricht senden
Glas

Dabei seit: 24.05.2003
Ort: Bremen
Alter: 41
Geschlecht: Männlich
Verfasst Fr 29.04.2005 12:44
Titel

Antworten mit Zitat Zum Seitenanfang
worshipper hat geschrieben:
danke.

nach welchen überbegriff sollte ich suchen?

anstatt des bildes kann ich sicherlich eine flash animation starten.


"JavaScript hide Layer"
"JavaScript onMouseOver"
... sowas halt.

Wenn du nicht weiterkommst, frag halt *zwinker*

FlashAnimation starten - hmmm ... das sollte sich dann etwas anders darstellen.
Ich hab das so in der Art noch nicht gemacht.

Problem ist ja, das bei der Version, die ich vorgeschlagen haben, die Bilder/Layer einfach ausgeblendet werden. (bzw. kannste statt visible auch block verwenden ...).
Sprich: Da wird nix gestartet, sondern einfach angezeigt - deine Flash ani würde (sofern man die überhaupt ausblenden kann; keine Ahnung obs geht - ich meine, das Flash dort rumzickt) also schon laufen ...

Mit ner Flash-only lösung würds natürlich gehen.
Ich weiß ja allerdings nicht genau, was du exakt machen willst bzw. für welches Projekt das sein soll etc. pp. * Keine Ahnung... *
  View user's profile Private Nachricht senden
worshipper
Threadersteller

Dabei seit: 01.10.2004
Ort: worshipper fear satan
Alter: -
Geschlecht: Männlich
Verfasst Fr 29.04.2005 13:27
Titel

Antworten mit Zitat Zum Seitenanfang
irgendwie bin ich zu blöd den richtigen codeschnipsel zu finden.

kannst du mir vielleicht kurz helfen?
  View user's profile Private Nachricht senden
Glas

Dabei seit: 24.05.2003
Ort: Bremen
Alter: 41
Geschlecht: Männlich
Verfasst Fr 29.04.2005 13:35
Titel

Antworten mit Zitat Zum Seitenanfang
1.)

Dein JavaScript:

Code:

   function show(layerid) {

        document.getElementById(layerid).style.visibility = 'visible';
     }


      function hide(layerid) {
       
        document.getElementById(layerid).style.visibility = 'hidden';
   
      }


2.) Dein CSS:

Code:
 
#test {
          position:absolute;
          width:100px;
          height:15px;
         visibility:hidden;
}


3.) Dein HTML:

Code:
<div id="test">Text</div>


4.) Dein Link:
Code:
<a href="#" onmouseover="show('test');" onmouseout="hide('test');" >Link</a>


Kannst natürlich noch die Position es Layers etc. bestimmen.
Habs jetzt nur schnell runtergetippt; können also noch Schreibfehler vorhanden sein.
  View user's profile Private Nachricht senden
worshipper
Threadersteller

Dabei seit: 01.10.2004
Ort: worshipper fear satan
Alter: -
Geschlecht: Männlich
Verfasst Fr 29.04.2005 13:57
Titel

Antworten mit Zitat Zum Seitenanfang
hallo,

danke für den code. funktioniert soweit. :klatsch:

jetzt möchte ich aber ja, pro menüpunkt jeweils eine eigene grafik setzen.

so wie ich das script verstehe, habe ich dann eine "zweite" css klasse geschrieben.
positionen übernommen, wie die erste. dann den befehl:

Code:
<a href="#" onmouseover="show('zweite');" onmouseout="hide('zweite');">zweites Bild</a>


und natürlich das entsprechende bild gesetzt.

ergebnis: das bild erscheint nicht auf der selben position, sondern etwas rechts gesetzt.

gibt es da noch eine lösung.

Zuletzt bearbeitet von shakadi am Fr 29.04.2005 13:59, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Glas

Dabei seit: 24.05.2003
Ort: Bremen
Alter: 41
Geschlecht: Männlich
Verfasst Fr 29.04.2005 14:06
Titel

Antworten mit Zitat Zum Seitenanfang
Ja, im Moment benutz du "visibility:hidden".
Dabei werden die Layer lediglich nicht angezeigt - sie sind vorhanden; aber werden einfach ausgeblendet (also wenn du im PS alpha auf 0% setzt).

Mach halt statt "visibility:hidden" => "visibilty:block".

Sowohl im CSS, als auch im JavaScript.

Da werden die Layer "wirklich" entfernt, ums mal so auszudrücken ...
  View user's profile Private Nachricht senden
 
Ähnliche Themen Bildergalerie Mouseover andere Position & Mouseover Scroll
Seite tauschen
PS CC Bild in Ebene tauschen
Bilder tauschen / Div Background verschieben
Bild tauschen bei aktivem Link
spezielles bild per id tag und javascript tauschen
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  Weiter
MGi Foren-Übersicht -> Tipps & Tricks für Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB