mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 04.12.2016 07:21 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 11: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 12:01, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Glas

Dabei seit: 24.05.2003
Ort: Bremen
Alter: 34
Geschlecht: Männlich
Verfasst Fr 29.04.2005 11: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 11: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: 34
Geschlecht: Männlich
Verfasst Fr 29.04.2005 11: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 12: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: 34
Geschlecht: Männlich
Verfasst Fr 29.04.2005 12: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 12: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 12:59, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Glas

Dabei seit: 24.05.2003
Ort: Bremen
Alter: 34
Geschlecht: Männlich
Verfasst Fr 29.04.2005 13: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
Bild tauschen bei aktivem Link
Ebenenmaske Photoshop: Bild tauschen?
[Flash] bei rollover bild 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.