Thomas: Probleme mit Rollover-Buttons

Guten Morgen :)

Ich möchte eine Website mit RolloverButtons machen. Wenn ich einen an der gewünschten Stelle habe und den nächsten verschiebe, verschiebt sich der andere auch wieder. Zwar nur minimal, aber da ich mit einer Hintergrundgrafik arbeite, sieht es sehr unschön aus.

Hier mal der Quelltext:

<html>
<head>
<title>test</title>
</script>
<script language="JavaScript" 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 bgcolor="#000000" marginwidth='0' marginheight='0' onLoad="MM_preloadImages('buttons/evil2.jpg','buttons/mp2.jpg','buttons/pub2.jpg','buttons/voice2.jpg')">
<table width="809" border="0" cellspacing="0" cellpadding="0" background="main.jpg" style="background-repeat:no-repeat;">
  <!--DWLayoutTable-->
  <tr>
    <td width="44" height="175"></td>
    <td width="2"></td>
    <td width="3"></td>
    <td width="121"></td>
    <td width="20"></td>
    <td width="10"></td>
    <td width="12"></td>
    <td width="597"></td>
  <tr>
    <td height="42"></td>
    <td></td>
    <td colspan="3" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','buttons/evil2.jpg',1)"><img src="buttons/evil1.jpg" name="Image1" width="144" height="42" border="0"></a></td>
    <td></td>
    <td></td>
    <td></td>
  <tr>
    <td height="6"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  <tr>
    <td height="35"></td>
    <td></td>
    <td></td>
    <td align="center" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','buttons/mp2.jpg',1)"><img src="buttons/mp.jpg" name="Image2" width="121" height="35" border="0"></a></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  <tr>
    <td height="10"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  <tr>
    <td height="41"></td>
    <td></td>
    <td></td>
    <td colspan="4" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','buttons/pub2.jpg',1)"><img src="buttons/pub.jpg" name="Image3" width="163" height="41" border="0"></a></td>
    <td></td>
  <tr>
    <td height="8"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  <tr>
    <td height="36"></td>
    <td colspan="5" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','buttons/voice2.jpg',1)"><img src="buttons/voice.jpg" name="Image4" width="156" height="36" border="0"></a></td>
    <td></td>
    <td></td>
  <tr>
    <td height="276"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</table>
</body>
</html>

Gruß und danke

Thomas

  1. hi,

    Ich möchte eine Website mit RolloverButtons machen. Wenn ich einen an der gewünschten Stelle habe und den nächsten verschiebe, verschiebt sich der andere auch wieder. Zwar nur minimal, aber da ich mit einer Hintergrundgrafik arbeite, sieht es sehr unschön aus.

    Hier mal der Quelltext:

    bitte als online-beispiel zum anschauen, und unter berücksichtigung von </faq/#Q-19>

    auf C&P hat wohl kaum jemand lust, zumal er sich dann auch noch "passende" bilder dazu suchen müsste.

    function MM_preloadImages()

    dass die vorgefertigten funktionen von macromedia ziemlicher murks sind, wurde hier schon oftmals erwähnt - selber schreiben ist da die bessere alternative.

    das anwedungsbeispiel Dynamische grafische Buttons liefert dir einen ansatz.
    außerdem wäre zu überdenken, ob javascript hier überhaupt von nöten ist - oftmals lässt sich sowas auch über CSS realisieren.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. danke für die info. ich würde als nächste die css-variante versuchen. aber da ich nicht wusste, ob es am js oder vielleicht doch an was anderem liegt, wollte ich erst mal nachfragen bevor ich mir die arbeit für was neues mache (ich bin kein profi in html & co ;)) denn wenn es nicht am js liegt, habe ich bei css ja das gleiche problem.