Mousover!

M

markushain

Grünschnabel
Ein Bekannter von mir hat mir mal einen Mouseover script programmiert, leider ist dieser vor kurzem weggezogen und ich habe keinen Kantakt mehr zu ihm.
Da ich selbst kein JS kann, und nicht mehr weiß wie ich den dcript einsetze, dachte ich einer hier könnte mir helfen

Hier der Script

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_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_findObj(n, d) { //v3.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); return x;
	}
	// -->
</script>
 
:-) Arbeitete dein Bekannter bei Macromedia

Das sind meines Erachtens Skripte, welche der Dreamweaver benutzt.... also besorg dir den DW...der weiss, wie die Skripte einzusetzen sind.
 
Die Macromedia Scriptesind dafür bekannt sehr aufwendig zu sein. Einen "normalen" Mouseover Effekt kann man schneller neu schreiben als sich in den MM Code einzulesen. Also: Welchen Effekt möchtest du genau erreichen?
 
Hi,

eine sehr einfache Methode wäre z.B.
PHP: 
<script language="JavaScript" type="text/javascript">
function show_over(obj, pname) {
    obj.src=pname;
}
</script>
<body>
<img name="meinbild" src="out.gif" width="32" height="32" alt="" onMouseOver="show_over(this, 'over.gif')" onMouseOut="show_ower(this, 'out.gif')"> 
</body>
Du kannst Die Bilder natürlich auch vorausladen und in ein Array packen. Dann musst Du der Funktion beispielsweise nur eine Bildnummer übergeben.

Gruß
 
Hast nen kleinen bug dadrin

so ist richtig

Code: 
<script language="JavaScript" type="text/javascript"> 
function show_over(obj, pname) { 
    obj.src=pname; 
} 
function show_ower(obj, pname) { 
    obj.src=pname; 
} 
</script> 
<body> 
<img name="meinbild" src="out.gif" width="32" height="32" alt="" onMouseOver="show_over(this, 'over.gif')" onMouseOut="show_ower(this, 'out.gif')"> 
</body>

Danke, geht das irgendwi, das das bild vorgeladen wird und nicht erst beim überfahren :-) mit der Maus gelanden wird
 
Hi,

nene, der Bug bestand nur darin, dass ich beim zweiten Aufruf versehentlich "ower" statt "over" geschrieben habe... Du brauchst keine 2 Funktionen.;)

Das Vorausladen ist auch kein Problem (ich gehe mal von 3 Bildern aus):
PHP: 
<script language="JavaScript" type="text/javascript">
var pic_o=new Array(3);
var pic_u=new Array(3);
for (i=1; i<=3; i++) {
  pic_o[i]=new Image();
  pic_u[i]=new Image();
  pic_o[i].src="over"+i+".gif";
  pic_u[i].src="out"+i+".gif";
}

function rollOverAndOut(obj, state, nr) {
  if (state==1) {
    obj.src=pic_o[nr].src;
  } else {
    obj.src=pic_u[nr].src;
  }
}
</script>
<body> 
<img name="meinbild1" src="out1.gif" width="32" height="32" alt="" onMouseOver="rollOverAndOut(this, 1, 1)" onMouseOut="rollOverAndOut(this, 0, 1)"> 
<img name="meinbild2" src="out2.gif" width="32" height="32" alt="" onMouseOver="rollOverAndOut(this, 1, 2)" onMouseOut="rollOverAndOut(this, 0, 2)"> 
</body>

Gruß
 
OnMouseOver -> Menü

Servus Leute.
Da hier gerade "MouseOver" das Thema ist, habe ich mir gedacht direkt daran anzuknüpfen und kein neues Thema zu starten.

Mein Problem / meine Frage:

Ich möchte mit JavaScript ein kleines MouseOver-Menü realisieren.
Das ganze sollte so werden wie das auf ulf-theis.de .
Ich bin ein Anfänger in Sachen JavaScript, deshalb wäre eine gut erklärte Lösung von nöten.

Schon mal "Danke!" im Voraus...

BUG
 
Hi,

eines kann ich Dir verraten: die angegebene Seite wurde mit Dreamweaver erstellt (MM_showHideLayers, Autolayer-Pugin usw.).

Mit den Tutorials im JavaScript-Bereich solltest Du eigentlich schon weiterkommen, z.B. hier oder hier.

Nimm DIVs mit absoluter Position (Ein/Ausblenden mit visibility: z.B. layer.style.visibility="visible";) und setze die Bilder mit MouseOver-Effekten hinein.

mit ein wenig Probieren sollte man damit schon nette Ergebnisse erzielen.

Gruß
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück