Steffi3477
Threadersteller
Dabei seit: 30.04.2012
Ort: -
Alter: 29
Geschlecht:
|
Verfasst Di 28.01.2014 16:36
Titel Hover langsam einblenden lassen |
|
|
Hallo
ich habe ein kleines Problem, habe auch schon fast überall im Internet gesucht, komme aber einfach nicht auf die Lösung.
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.
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;
} |
|
|