Bildermouseover

Erstelle eine "neue Webseite". speichere die Webseite mit einem Namen deiner Wahl ab.
Kopiere dir dieses Script und füge es in deiner neuen Webseite im Quellcode in den Metas ein.

Erstelle 1 Tabelle, zwei Spalten.

in der zweiten Spalte klickt du mit der Maus rein, rechte Maustaste "Zellen teilen" bei "Expression Web" findest u es unter "Ändern" und fügst so viele Spalten ein wie du brauchst ich habe 5 Spalten hinzu gefügt.

zellen einfuegen Expression Web Frontpageschule

zellen einfuegen Expression Web Frontpageschule

Kopiere nun das Script und füge es in den Metas ein.
Das ganze mit der Maus markieren, mit STRG C kopieren und bei dir mit STRG V einfügen.

<!--

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.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];}

}

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;

}

//-->

</script>

Nun wechsel wieder in deinem Entwurf.

Suche dir 5 Bilder die du gerne einfügen möchtest, davon brauchst du auch 5kleine Bilder ca; 80*80 für die Vorschau.

Ein grösseres Bild für in die Mitte.

Das ganze ist ein Mouseover Effekt.

Ich hinterlege die hier eine Vorlage, die musst du dir nur kopieren mit STRG C und bei in der Codeansicht im Bodybereich einfügen.

In den Tabellen wo die kleinen Vorschaubilder kommt auch das, auch hier muss du deinen Bildernamen ändern.

Ich stelle Euch hier das komplett Script, das muss du dann imBodybereich einfügen und nur deinen Bildernamen ändern.

Oben das Script im in den Meta´s einfügen.

<div align="center">
				 <br />
	<font size="5">Der goldene Oktober :-)</font><p><font size="5"><br />
	</font>
				<br />
<p><p></p>
					<table border="0" width="490">
					<tr>
						<td width="400" rowspan="5">					
							<a><img name="pic" src="images/pic.jpg" width="600" height="400" alt="Bild" align="right" /></a></td>
<td width="80">
						<img src="images/2.JPG" name="G7" onmouseover="MM_swapImage('pic','','images/pic.jpg',0)" width="80" height="80" align="right" /></td>
					</tr>
					<tr>
						<td width="80"><img src="images/3-klein.jpg" name="G7" onmouseover="MM_swapImage('pic','','images/3.jpg',0)" width="80" height="80" align="right" /></td>
					</tr>
					<tr>
						<td width="80"><img src="images/4-klein.jpg" name="G7" onmouseover="MM_swapImage('pic','','images/4.jpg',0)" width="80" height="80" align="right" /></td>
					</tr>
					<tr>
						<td width="80"><img src="images/5-klein.jpg" name="G7" onmouseover="MM_swapImage('pic','','images/5.jpg',0)" width="80" height="80" align="right" /></td>
					</tr>
					<tr>
						<td width="80"><img src="images/7-klein.jpg" name="G7" onmouseover="MM_swapImage('pic','','images/7.jpg',0)" width="80" height="80" align="right" /></td>
					</tr>
				</table>

Viel Spaß mit diesem Tutorials :-)

So schaut mein Bild - Mouseover aus :-)

Bildermouseover

Liebe Grüsse Anita
Beachte bitte meine Nutzerbedingungen!