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

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 18.04.2024 03:52 Benutzername: Passwort: Auto-Login

Thema: Hover langsam einblenden lassen vom 28.01.2014


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Hover langsam einblenden lassen
Autor Nachricht
Steffi3477
Threadersteller

Dabei seit: 30.04.2012
Ort: -
Alter: 29
Geschlecht: Weiblich
Verfasst Di 28.01.2014 16:36
Titel

Hover langsam einblenden lassen

 Antworten mit Zitat Zum Seitenanfang
Hallo

ich habe ein kleines Problem, habe auch schon fast überall im Internet gesucht, komme aber einfach nicht auf die Lösung. Menno!

Hier meine Beispiels-Seite:
http://www.snv.de/download/test/hover.html

Funktioniert bis hierhin auch ganz gut. Ich möchte nun aber, dass das Hover-Bild langsam eingeblendet wird. (das gleiche gilt auch wieder für das Ausblenden)

Habe das Ganze auch schon mit jquery versucht umzusetzen (mit "fadein" und "fadeout") hat aber auch nicht so geklappt. (in Chrome überhaupt nicht)

Hier mein Code, vielleicht kann mir ja jemand helfen. Danke schon mal. Lächel

HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="styles_hover.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

</script>
</head>

<body onload="MM_preloadImages('bilder/box_hover.png','bilder/box_hover2.png','bilder/box_hover3.png')">


<table>
<tr>
<td width="190px" style="border:1px #666666 solid; margin:0px; padding:0px">
<img class="logo" src="bilder/logo1.png" />
<img src="bilder/box_normal1.png" name="box1" class="box" id="box1" onmouseover="MM_swapImage('box1','','bilder/box_hover1.png',1)" onmouseout="MM_swapImgRestore()" />
</td>
<td width="190px" style="border:1px #666666 solid; margin:0px; padding:0px">
<img class="logo" src="bilder/logo2.png" />
<img src="bilder/box_normal2.png" name="box2" class="box" id="box2" onmouseover="MM_swapImage('box2','','bilder/box_hover2.png',1)" onmouseout="MM_swapImgRestore()" />
</td>
<td width="190px" style="border:1px #666666 solid; margin:0px; padding:0px">
<img class="logo" src="bilder/logo3.png" />
<img src="bilder/box_normal3.png" name="box3" class="box" id="box3" onmouseover="MM_swapImage('box3','','bilder/box_hover3.png',1)" onmouseout="MM_swapImgRestore()" />
</td>
</tr>
</table>

</body>
</html>


CSS:
Code:
@charset "utf-8";
/* CSS Document */

.logo{
   padding:10px 20px 10px 20px;
   margin:0px;
   background-color:#CCC;
}

.box{
   padding:0px;
   margin:0px;
   background-color:#CCC;
}
  View user's profile Private Nachricht senden
xBe

Dabei seit: 04.06.2006
Ort: Mönchengladbach
Alter: 34
Geschlecht: Männlich
Verfasst Di 28.01.2014 17:18
Titel

Antworten mit Zitat Zum Seitenanfang
Hi Steffi,

probier es nochmal mit Jquery.
Die von dir gezeigte Lösung weißt das typische Dreamweaver MarkUp auf, kann das?

// edit:

Hier wird es an einem einfachen Beispiel gezeigt. Lächel

http://jsfiddle.net/Xm2Be/13/


LG
Patrick

Zuletzt bearbeitet von xBe am Di 28.01.2014 17:19, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Morgo

Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht: Männlich
Verfasst Di 28.01.2014 18:06
Titel

Antworten mit Zitat Zum Seitenanfang
Oder ohne Javascript: http://jsfiddle.net/x2ysY/

Aber wenn ich den Tabellen-Markup oben so seh, hoffe ich du hattest einen angenehmen Flug in deiner Zeitmaschine. Willkommen in der Gegenwart! *zwinker*
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Di 28.01.2014 18:12
Titel

Antworten mit Zitat Zum Seitenanfang
Morgo hat geschrieben:
Oder ohne Javascript

Verdammt ich hatte genau die selbe Lösung parat *ha ha*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Steffi3477
Threadersteller

Dabei seit: 30.04.2012
Ort: -
Alter: 29
Geschlecht: Weiblich
Verfasst Mi 29.01.2014 16:06
Titel

Antworten mit Zitat Zum Seitenanfang
Hab die Lösung ohne Javascript genommen.
Hat super funktioniert. Dankeschön!! Lächel Lächel Lächel

LG Steffi
  View user's profile Private Nachricht senden
 
Ähnliche Themen hover-Button/hover-Bild wird darunter eingefügt
Wechselbild und Text einblenden
div layer bei klick aus/einblenden?!
bilder in div containern per js einblenden
Javascript:Frame aktualisieren u. Div einblenden
Einen Infotext am Link einblenden
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.

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