mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 14:50 Benutzername: Passwort: Auto-Login

Thema: Das Hovern von einer Grafik Faden bzw. Zeitverzögert hervorb vom 18.11.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Das Hovern von einer Grafik Faden bzw. Zeitverzögert hervorb
Autor Nachricht
a3e
Threadersteller

Dabei seit: 13.11.2009
Ort: -
Alter: 46
Geschlecht: Männlich
Verfasst Do 18.11.2010 23:19
Titel

Das Hovern von einer Grafik Faden bzw. Zeitverzögert hervorb

Antworten mit Zitat Zum Seitenanfang

Hallo,

zu aller erst, ich bin neuling was das Webdesignen gilt und kann gerade mal HTML und CSS, aber noch keine Ahnung von JavaScript.

Ich habe eine Seite erstellt was auch einigermaßen gut funzt, jedoch äußerte mein Bruder eine Idee undzwar das ich bei vier grafische Buttons den Hover_Effekt Zeitverzögert (also entweder es hovert erst nach zwei sekunden oder es kommt langsam von transparenz auf 100%) und seit dem such ich wie ein verrückter, aber ständig finde ich Möglichkeiten Schriftfarbe oder Hintergründe zu Faden (wenn man das so bezeichnet), aber wenn ich versuche die Quelltexte auf meine Seite anzupassen bzw. zu integrieren, ruckelts oder auch das normale Bild wird verblast und beide werden immer gleichzeitig angezeigt usw.

Gibt es keine Möglichkeit zB:

ein 300px x 300px jpg Bild das mit einem 300px x 150px gehovert wird (und alles wunderbar funktioniert, so dass wenn das Hover_Bild kommt, das normale Bild nicht dahinter zu sehen ist), mit JavaScript zu Hovern so dass das normale Bild ganz normal verschwindet und das Hover_Bild und nur das Hover_Bild langsam von transparent auf ganz/voll da ist "fadet"?

Ich würde mich riesig freuen wenn jemand mir Tipps geben könnte und hier die4 Adresse von der letzten Seite, wo ich den Quelltext auf meine Seite anpassen wollte, aber nicht hinbekam
http://www.redips.net/javascript/fade-menu/
  View user's profile Private Nachricht senden
immerIch

Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht: Männlich
Verfasst Fr 19.11.2010 09:24
Titel

Antworten mit Zitat Zum Seitenanfang

was genau hat denn bei diesem Code aus dem Link nicht geklappt?

Die Einbindung des Javascript-Teils?
  View user's profile Private Nachricht senden
Anzeige
Anzeige
a3e
Threadersteller

Dabei seit: 13.11.2009
Ort: -
Alter: 46
Geschlecht: Männlich
Verfasst Fr 19.11.2010 13:20
Titel

Antworten mit Zitat Zum Seitenanfang

Hi,

ich kann es dir anhand eines Tests zeigen (am Original Qeulltext habe ich NUR im CSS-Teil die "td"s weggemacht, da ich das mit nur zwei Grafiken gemacht).

Ich muss vielleicht dazu sagen, dass in den Bildern die ich als Button und Button-Hover benutze nur eine Textzeile im Button-Hover noch zusätzlich ist ansonsten sind sie fast gleich und soll den normalen Button ganz normal zu 100% anzeigen und nur bei MouseOver den Hover bringen und das andere weg (wie es im normalen Hovern ist) und das Hover-Bild langsam anzeigen - aber ich krieg es nicht hin * Keine Ahnung... *
Code:

<html>
<head>

<style type="text/css">
#menu{
     width: 210px; 
     height: 43px; 
     opacity: 0.3;              
     filter: alpha(opacity=20); 

#menu a{
   background-image:url(angebote.jpg);
     display: block; 
     width: 210px; 
     height: 43px; 

#menu a:hover{
   background-image:url(angebote.png);
}
</style>

<script language="javascript" type="text/javascript">
var opHigh = 100; // highest opacity level 
var opLow  = 30;  // lowest opacity level (should be the same as initial opacity in the CSS) 
 
// register onLoad event with anonymous function 
window.onload = function (){ 
  //  collect menu items and attach onMouseOver and onMouseOut events 
  var mi = document.getElementById('menu').getElementsByTagName('a'); 
  for (var i=0; i<mi.length; i++){ 
    mi[i].onmouseover = function(e) {fade(this, opLow,  2)} // fade in  - positive step 
    mi[i].onmouseout  = function(e) {fade(this, opHigh,-2)} // fade out - negative step 
  } 

 
// fade in / fade out function (event handler) 
function fade(mi, opacity, step){ 
  mi.parentNode.style.opacity = opacity / 100;                // set opacity for FF 
  mi.parentNode.style.filter  = "alpha(opacity="+opacity+")"; // set opacity for IE 
  opacity += step;                                            // update opacity level 
  // recursive call if opacity is between 'low' and 'high' values (15ms pause between calls) 
  if (opLow <= opacity && opacity <= opHigh) setTimeout(function(){fade(mi,opacity,step)}, 20); 
}
</script>

</head>

<body>

<div id="menu"><a href="#"></a></div>

</body>
</html>


Zuletzt bearbeitet von a3e am Fr 19.11.2010 13:36, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
a3e
Threadersteller

Dabei seit: 13.11.2009
Ort: -
Alter: 46
Geschlecht: Männlich
Verfasst Fr 19.11.2010 13:50
Titel

Antworten mit Zitat Zum Seitenanfang

Und wie kann man beim JavaScript Code:
Code:

var mi = document.getElementById('menu').getElementsByTagName('a');

mehrere id´s angeben? Ich würd ja gern vier Buttons langsam hovern lassen
  View user's profile Private Nachricht senden
 
Ähnliche Themen link an anderer stelle hovern lassen?
CSS - IE blendet Objekt nach hovern nicht wieder aus
Bild als Linkhintergrund, Text beim Hovern erscheinen lassen
[Javascript] Text faden
Jquery backgrounds faden?
[Flex] Ein Ziel faden
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


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.