html - JavaScript menu - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #5097 @ 01.01.05 16:29

Jeg er igang med at lave min menu sådan at når man køre over den skifter billedet (som er linken) sig om til et andet...

Ligesom www.samsung.com har gjord med deres menu.

Til dette har jeg brugt noget javascrip - skønt jeg ikke har nogen kendskab til sproget

Men det går nu meget godt...

Har brugt dette script:

Kode



<script language="JavaScript" type="text/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.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>

Og min <body> ser sådan ud:

Kode


<body onLoad="MM_preloadImages('Forside2.JPG','Nyheder2.JPG','Download2.JPG','Links2.JPG','Feedback2.JPG','Om2.JPG')">

Og til sidst ser mine links sådan ud:

Kode


<a href="http://www.shafh.dk/index.php" id="menupunkt1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('forsideknap','','Forside2.JPG',1)"> <IMG height=16 src="Forside.JPG" width=100 border="0"></a><br>

Det bør sådan set være det - ikke sandt. Men der sker intet når jeg så prøve det....

Får heller ikke nogen fejl, så der er intet hjælp at hente der.

Jeg har lagt mine koder + billeder osv. ud på nettet hvis det hjælper:

www.shafh.dk/1.zip

__________________________________

Må også sige at jeg som sagt ikke er så god til Javascript så har snuppet mange af koderne fra www.itsiden.dk's kildekode

...

Der kan i måske se hvad jeg har gjord forkert, når i samligner

Shafh
Shafh@stofanet.dk
Theis F. Hinz

Behandl nørder godt.
Du ender sandsynligvis
med at arbejde for en

Motto af Bill Gates

10 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #6791 @ 01.01.05 17:49

283

Hmm, jeg har ikke kigget rigtigt på din kode, men jeg har en anden kode som gerne skulle virke:

Kode

<script language="JavaScript">
function skiftbil(name, rpath, nsdoc) 
{ 
  str = (navigator.appName == 'Netscape') ? nsdoc+'.'+name : 'document.all.'+name;
  img = eval(str);
  if (img) {
    if (img.altsrc == null) {
      img.altsrc = img.src;
      img.src    = rpath;
    } else {
      var temp   = img.src;
      img.src    = img.altsrc;
      img.altsrc = temp;
    }
  } 
}
</script>

<a href="#" onmouseout="skiftbil('im1', 'billede1.gif', 'document')" onmouseover="skiftbil('im1', 'billede0.gif"><img src="billede0.gif" name="im1"></a>
<a href="#" onmouseout="skiftbil('im2', 'andet1.gif', 'document')" onmouseover="skiftbil('im2', 'andet0.gif"><img src="andet0.gif" name="im2"></a>

Og den er heller ikke så lang

ps, jeg kender heller ikke så meget til js, men det overstående script burde gerne du...

Hilsen
Jan S.

[Redigeret d. 01/01-05 17:53:11 af Jan S]

Bruger #5620 @ 01.01.05 18:52

1.500

Lavede det her for en der også skulle lave image swaps.

put det her nederst i din fil(hvis du bruger det altså)

Kode

<script language="JavaScript1.2">
/*DO NOT REMOVE THIS 
Scripter:Garadon(Jens P. Svensson)
Script: Img Tag v1.0
Term of usage:free for all non profit purposses.
Homepage:www.the-hive.dk/~donp/
*/
var Ims=new Array();
for(var i=0;i<document.images.length;i++){
  ll=Ims.length;
  Ims[ll]=new Array();
	var p=0;
  if(document.images[i].getAttribute('srcMOV'))
	{
 	  Ims[ll][p]=new Image();
  	Ims[ll][p].src=document.images[i].getAttribute('srcMOV');		
  	document.images[i].setAttribute('srcMOV',p);		
    document.images[i].onmouseover=new Function("swapIMG('srcMOV',this);");		
		p++;
	}	
  if(document.images[i].getAttribute('srcMD'))
	{
 	  Ims[ll][p]=new Image();
  	Ims[ll][p].src=document.images[i].getAttribute('srcMD');		
  	document.images[i].setAttribute('srcMD',p);	
    document.images[i].onmousedown=new Function("swapIMG('srcMD',this);");					
		p++;
	}	
  if(document.images[i].getAttribute('srcMU'))
	{
 	  Ims[ll][p]=new Image();
  	Ims[ll][p].src=document.images[i].getAttribute('srcMU');		
  	document.images[i].setAttribute('srcMU',p);		
    document.images[i].onmouseup=new Function("swapIMG('srcMU',this);");				
		p++;
	}		
	if(p>0){
 	  Ims[ll][p]=new Image();
  	Ims[ll][p].src=document.images[i].getAttribute('src');			
	  document.images[i].setAttribute('srcMOU',p);		
    document.images[i].onmouseout=new Function("swapIMG('srcMOU',this);");				
		document.images[i].setAttribute('srcID',ll);		
	}
	
}
function swapIMG(aSrc,aObj){
	var I=aObj.getAttribute('srcID');
	var P=aObj.getAttribute(aSrc);
	aObj.src=Ims[I][P].src;
}
</script>

så kan du give de forskellige img tags attributterne
src,srcMOV,srcMD,srcMU.
Du skal bruge src og srcMOV

eksempel:

Kode

<img src="graphic/1.gif" 
     srcMOV="graphic/2.gif" 
width="150" height="112" alt="" border="0">

og hvis du fjerner comentaren i toppen får du bank

.
-----------------------------------------------------------------------------

Min side ->www.the-hive.dk/~donp/

Bruger #5097 @ 01.01.05 17:58

818

Nu får jeg en besked

Linje: 31
Tegn: 1
Fejl: Et opjekt var ventet
Kode: 0
URL: file://C:\\Documents and Settings\\Shafh Developer\\Dokumenter\\HJP\\New Site\\temp_index.php

Linje: 31 er

<body onLoad="MM_preloadImages('Forside2.JPG','Nyheder2.JPG','Download2.JPG','Links2.JPG','Feedback2.JPG','Om2.JPG')">

Der bør da ikke være noget galt?

Shafh
Shafh@stofanet.dk
Theis F. Hinz

Behandl nørder godt.
Du ender sandsynligvis
med at arbejde for en

Motto af Bill Gates

Bruger #6791 @ 01.01.05 18:15

283

Nu får jeg en besked

Linje: 31
Tegn: 1
Fejl: Et opjekt var ventet
Kode: 0
URL: file://C:\\Documents and Settings\\Shafh Developer\\Dokumenter\\HJP\\New Site\\temp_index.php

Linje: 31 er

<body onLoad="MM_preloadImages('Forside2.JPG','Nyheder2.JPG','Download2.JPG','Links2.JPG','Feedback2.JPG','Om2.JPG')">

Der bør da ikke være noget galt?

Shafh
Shafh@stofanet.dk
Theis F. Hinz

Behandl nørder godt.
Du ender sandsynligvis
med at arbejde for en

Motto af Bill Gates

Var det med mit script eller dit/itsiden.dks?

Hilsen
Jan S.

Bruger #5097 @ 01.01.05 18:34

818

Med dit... Men det her skal vel stadig være der?

Ellers går det sku får langsomt.

Shafh
Shafh@stofanet.dk
Theis F. Hinz

Behandl nørder godt.
Du ender sandsynligvis
med at arbejde for en

Motto af Bill Gates

Bruger #5426 @ 01.01.05 18:39

430

Jan S.

Jeg har hjulpet ham over MSN, og foreslog at han kiggede på itsiden.dk's fordi den indeholder et element der preloader billederne, så det går hurtigere... Det er derfor han vil beholde den kode...

//Emilbp

Bruger #5097 @ 01.01.05 18:39

818

Dette:

<a href="#" onmouseout="skiftbil('im1', 'billede1.gif', 'document')" onmouseover="skiftbil('im1', 'billede0.gif"><img src="billede0.gif" name="im1"></a>
<a href="#" onmouseout="skiftbil('im2', 'andet1.gif', 'document')" onmouseover="skiftbil('im2', 'andet0.gif"><img src="andet0.gif" name="im2"></a>

Har jeg ændret til:

<a href="http://www.shafh.dk/index.php" id="menupunkt1" onmouseout="skiftbil('im1', 'Forside2.JPG', 'document')" onmouseover="skiftbil('im1', 'Forside2.JPG')"> <IMG height=16 src="Forside.JPG" width=100 border="0"></a><br>

Du har glemt at slutte noget af det du har startet: bl.a. " "og ()

Shafh
Shafh@stofanet.dk
Theis F. Hinz

Behandl nørder godt.
Du ender sandsynligvis
med at arbejde for en

Motto af Bill Gates

Bruger #5097 @ 01.01.05 19:03

818

Når du mener nederst, er det så under </html>???

Det har jeg gjord og får følgene fejl:

Linje: 138
Tegn: 3
Fejl: Opjekt understøtter ikke denne egenskab og metode
Kode: 0
URL: file://C:\\Documents and Settings\\Shafh Developer\\Dokumenter\\HJP\\New Site\\temp_index.php

Linje 138 er:
if(document.images.getAttribute('srcMOV'))

Et godt stykke nede i din script.

_____________

Vil det enlig ikke være en god ide at bruge koden med

<body .... >

Så bør det jo gerne køre lidt hurtigere!

_______________

I kan jo også prøve at gøre det med hjemmesiden på overstående link, og så sende det til mig. Eller evt. uploade

Shafh
Shafh@stofanet.dk
Theis F. Hinz

Behandl nørder godt.
Du ender sandsynligvis
med at arbejde for en

Motto af Bill Gates

[Redigeret d. 01/01-05 20:12:52 af Shafh]

Bruger #5620 @ 01.01.05 20:08

1.500

Scripts der står frit i filen bliver kørt mens filen loader altså før onload for body,antog det var det du spurgte om, mit script er lavet til folk der.
1. ikke gider rette scripts 117 steder i fil.
2. ikke har nogen som helst forstand på javascript, så dette her er bare at cp en blok ind i bunden af en fil også tilbage til at skrive tags med attributer.
3. fordi jeg havde lavet det før nævnte slags og kedet mig temmelig meget en mandag morgen i september<--kunne være sandt.

fejlen der opstod er fordi at Udvikleren der har lavet denne side ikke slår html generering fra tekst fre i kode blokke.

så uploaded den her fil for dig.
http://www.the-hive.dk/~donp/temp_index.html

-----------------------------------------------------------------------------

Min side ->www.the-hive.dk/~donp/

Bruger #5097 @ 01.01.05 20:15

818

Cool nok.. Så der party

Shafh
Shafh@stofanet.dk
Theis F. Hinz

Behandl nørder godt.
Du ender sandsynligvis
med at arbejde for en

Motto af Bill Gates

JavaScript menu

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler