alligator: Bilderwechsel -- Dreamweaver-Editor

Hi zusammen,

ich hab da mal ne Frage.
Also ich hab mal bei meinem Editor Dreamweaver 4 mal so ein Roll-Over-Bild eingefügt und dann nachgeschaut, was der da für ein Quelltext reinhaut.

Siehe hier:

<html>
<head>
<title>Bilderwechsel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
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_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_findObj(n, d) { //v4.0
  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 && document.getElementById) x=document.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 bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('Katze.jpg')">
<a href="http://www.uni.de" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','Katze.jpg',1)"><img name="Image1" border="0" src="doberman.gif" width="200" height="264"></a>
</body>
</html>

Also voll des komplizierte Riesending.
Und ich hab das dann mal selber gemacht.
Siehe hier:

<html>
<head>
<title>
Bilderwechsel
</title>

<script language="JavaScript">
<!--

bild1=new Image (200,264);
bild1.src="doberman.gif";
bild2=new Image (200,264);
bild2.src="Katze.jpg";

function fenster1()
{
window.document.quelle.src=bild1.src;
}

function fenster2()
{
window.document.quelle.src=bild2.src;
}

//-->
</script>
<head>
<body bgcolor="#000000" text="#ffffff">
<h1> Bilderwechsel </h1>
<a href="http://www.uni.de" onmouseover="fenster2()" onmouseout="fenster1()">
<img src="doberman.gif" name="quelle" height="200" width="264"></a>
</body>
</html>

Was ist denn jetzt an meinem Quelltext anderst bzw. schlechter als an dem vom Dreamweaver ? Bzw. hab ich da irgendwas übersehen ?

Danke für Aufklärung und Sorry für den vielen Quelltext.
Gruß
alligator

  1. Moin!

    Was ist denn jetzt an meinem Quelltext anderst bzw. schlechter als an dem vom Dreamweaver ? Bzw. hab ich da irgendwas übersehen ?

    Nichts ist schlechter. Er ist sogar wesentlich besser, weil er ultimativ auf die einzelne zu lösende Aufgabe abgestimmt ist und deshalb besonders schnell ist - und eben entsprechend übersichtlich.

    Dreamweaver packt soviel Overkill rein, weil er Universalfunktionen integriert, die praktisch als eierlegende Wollmilchsau in allen Browserversionen und für sehr viele Anwendungsfälle geschrieben sind. Die sind nicht ganz so schnell, aber wenn man nur Dreamweaver benutzt, und hinterher nicht mehr per Hand rangeht, funktionieren sie.

    Ich persönlich ziehe handgeschriebene, entsprechend optimierte Funktionen einer allgemein gehaltenen Funktion immer vor. Vor allem, weil man auf diese Weise ziemlich intelligente Zusammenfassungen von Funktionen erledigen kann - beispielsweise durch mouseover gleichzeitig einen Layer einblenden und ein Bild tauschen, und dabei nur eine einzige ID an eine Funktion übergeben; durch geschickte Wahl von Bildname und Layer-ID und Addition von "passenden" festen Strings kann man viel optimieren.

    - Sven Rautenberg