mousover --- Bild soll größer werden

bobbydigital

Mitglied
Ich möchte per mousover Effekt ein kleines Bild 130x90 zu einem Bild 150x110 machen, also wie ein Zoom. Leider bleibt das Bild 2 in der selben größe wie das erste obwohl es andere Maße hat und die Zelle auch groß genug ist. An was könnte das liegen?

Hier das Javascript:

Code:
<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>


Und hier mein Code in der Bildzelle:

HTML:
<td width="140px" height="100px">
            <div align="center"><a href="Rene_Bund1_gro%DF.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/gallerie/klein/Rene_Bund1_2.jpg',1)"><img name="Image7" border="0" src="images/gallerie/klein/Rene_Bund1.jpg" width="130" height="88"></a></div>
          </td>

Im Body-Tag lade ich das Bild 2 vor:

HTML:
<body onLoad="MM_preloadImages('images/gallerie/klein/Rene_Bund1_2.jpg')">

Würde mich freuen, wenn mir jemand erklären könnte, warum das Bild 2 genauso groß bleibt wie das Bild 1, obwohl es größer ist.

Gruss Robert
 
Hi!
Ich möchte per mousover Effekt ein kleines Bild 130x90 zu einem Bild 150x110 machen, also wie ein Zoom. Leider bleibt das Bild 2 in der selben größe wie das erste obwohl es andere Maße hat und die Zelle auch groß genug ist.
Tatsächlich?

Den width- u. height-Attributwerten im <td>-Tag zufolge, sind sie bei den genannten Dimensionen des mouseover-Bildes um zehn Pixel zu klein gewählt.

Übrigens wird in den HTML-Attributen (width,height) keine Einheit (px) angegeben - diese gilt nämlich automatisch, wenn es sich nicht um eine relative (prozentuale) Wertangabe handelt.

mfg Maik
 
Danke.
Ok, hab verstanden, aber das löst mein Problem jetzt grad nicht. Ich sehe wenn ich mit der Maus über das Bild fahre, dass das 2. erscheint, aber halt in der Größe des 1. Bildes.
 
Entferne im Grafikelement das width und height-Attribut, da sie ansonsten auch für das getauschte Bild Gültigkeit haben.

mfg Maik
 
Maik, noch eine letzte Frage...

wenn ich nun über das Bild fahre, dann verzieht es immer bissl die Tabelle, obwohl die Zellen jetzt eigentlich groß genug sind.
Weißt du an was das liegen kann?
Hab das erst bissl später gesehen, ist echt unschön und hab schon einiges probiert was die Tabelle betrifft.

Gruss Robert
 
Zuletzt bearbeitet:
Moin,

in diesem nachgestellten Tabellenkonstrukt:

Code:
<table cellpadding="0" cellspacing="0" border="0">
       <tr>
           <td width="150" height="110" valign="middle">
            <div align="center">
                 <a href="Rene_Bund1_gro%DF.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/gallerie/klein/Rene_Bund1_2.jpg',1)"><img name="Image7" border="0" src="images/gallerie/klein/Rene_Bund1.jpg"></a>
            </div>
          </td>
          <td>foobar</td>
       </tr>
       <tr>
           <td colspan="2">foobar</td>
       </tr>
</table>
in Verbindung mit diesem Stylesheet:

Code:
td div img { display:block; }
verzieht sich bei mir nichts, wenn ich über das Bild fahre.

mfg Maik
 

Neue Beiträge

Zurück