Rollover-effekt

Den nemmeste måde at komme igang med den slags ting på, er at anskaffe en version af DreamVeawer. Du kan evt. downloade en trial fra www.macromedia.com. Der er muligheder for at lege med den slags uden at skrive noget javascript \"by hand\"....

den enkleste mouseover effekt er et billedskift på det billede der er et link:

<a href=\"um-forside.htm\" target=\"Ramme2_2\"    onclick=\"top.frames.Ramme2_3.location=\'forside.htm\';return true\"
onmouseover=\"document.images.forsidepic.src=\'images/forsideon.gif\';\"
onmouseout=\"document.images.forsidepic.src=\'images/forside.gif\';\">
<IMG SRC=\"images/forside.gif\" name=\'forsidepic\' BORDER=\"0\" WIDTH=\"150\" HEIGHT=\"30\" ALIGN=\"bottom\" ALT=\"\"><a/>

der er tilføjet 2 onmouse??? events i linket og en name=\'???\' parameter i <IMG kommandoen.

ved den slags billedskift er det en god ide at preloade billedet. Indsæt følgende imellem <head> og </head>

<script language=\'javascript\'> <!--

var preforside = new Image();
preforside.src = \'images/forsideon.gif\';

// --> </script>

så er billedet forhåbentlig klar når der bliver brug for det.

mvh JakobA

Bemærk at det navn du giver billedet med name=\'???\' parameteren bruges i begge de 2 onmouseover parametre. Ved næste link skal der bruges et andet navn alle 3 steder.

jakoba> Jeg har tilføjet en ny knap forsideon.gif,
og gjort som du beskrev. Men det virker ikke, knappen skifter ikke farve men linker godt nok:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0//EN\">
<HTML>
<HEAD>

    <TITLE>menu</TITLE>
<META NAME=\"Generator\" CONTENT=\"Stone\'s WebWriter 3.5\">
<BASE TARGET=\"Ramme1_2\">

<SCRIPT language=\'javascript\'> <!--

var preforside=new Image();
preforside.scr=\'images/forsideon.gif\';

//--> </script>

</HEAD>

<BODY BGCOLOR=\"#80FF80\" TEXT=\"#000000\" LINK=\"#0000FF\" VLINK=\"#660066\" ALINK=\"#FF0000\"><P>

<FONT SIZE=\"1\" COLOR=\"#000000\"><DIV STYLE=\"text-align:center\"><!-- WebWriter AutoDato -->Opdateret d. 23.2.2001<!-- WW --></DIV></FONT>
<HR>

<a href=\"um-forside.htm\" target=\"Ramme2_2\"    onclick=\"top.frames.Ramme2_3.location=\'forside.htm\';return true\"
onmouseover=\"document.images.forsidepic.scr=\'images/forsideon.gif\';\"
onmouseout=\"document.images.forsidepic.scr=\'images/forside.gif\';\">
<IMG SRC=\"images/forside.gif\" name=\'forsidepic\' BORDER=\"0\" WIDTH=\"150\" HEIGHT=\"30\" ALIGN=\"bottom\" ALT=\"\"><a/>

Hilsen Benny

uf. det er mig der har stavet galt, i begge onmouseover parametre: .scr istedet for .src

onmouseover=\"document.images.forsidepic.src=\'images/forsideon.gif\';\"
onmouseout=\"document.images.forsidepic.src=\'images/forside.gif\';\">

mvh JakobA

jakoba> Perfekt, så virker det.

Men jeg dummede mig. Jeg ville afsætte yderligere 30 point for et spørgsmål mere, derfor dine 90 point.

Mit spørgsmål er om den nye farve kan blive stationær ved klik, indtil man trykker på en anden knap. Eller kan man udvide til en 3. onmouse (onclick) event ved klik.

Hilsen Benny

Ja man kan godt lave det så on-billedet bliver fast ved klik indtil der klikkes på noget andet.
Det bliver lidt mere komplext så det er bedst at bruge nogen subroutiner (defineret i <head> sektionen).

<script language=\'javascript\'>

var preforside=new Image();          // for link til forside
preforside.src=\'images/forsideon.gif\';

var prekontakt=new Image();          // for links til kontakt side
prekontakt.src=\'images/kontakton.gif\';

//...  osv for hvert link


var klikket = \"\";            // variabel der husker sidst klikkede link
var urlOnOut = \"\";            // url for inaktivt billede i klikket link

function musOver( billedNavn, billedOver ) {  // bruges ved mouseover
  if ( billedNavn != klikket ) {
    document.images[billedNavn].src = billedOver;
  }
]; //end musOver( string, string )

function musOut( billedNavn, billedOut } {  // bruges ved mouseout
  if ( billednavn != klikket ) {
    document.images[billedNavn].src = billedOut;
  }
}; //end musOut( string, string )

function musKlik ( billedNavn, billedOut ) {  // bruges ved klik
  if ( billednavn != klikket ) {
    if ( urlOnOut != \"\" ) {
      document.images[klikket].src = urlOnOut;
    };
    urlOnOut = billedOut;
    klikket = billedNavn;
  };
  return true
}; //end musKlik ( string, string )

</script>

nede i teksten hvor dine link skal stå bliver hvert link til
 
<a href=\"um-forside.htm\" target=\"Ramme2_2\"    onclick=\"top.frames.Ramme2_3.location=\'forside.htm\';musKlik(\'forsidepic\',\'images/forside.gif\')\"
onmouseover=\"musOver( \'forsidepic\', \'images/forsideon.gif\');\"
onmouseout=\"musOut( \'forsidepic\', \'images/forside.gif\');\">
<IMG SRC=\"images/forside.gif\" name=\'forsidepic\' BORDER=\"0\" WIDTH=\"150\" HEIGHT=\"30\" ALIGN=\"bottom\" ALT=\"\"><a/>

<a href=\"um-kontakt.htm\" target=\"Ramme2_2\"    onclick=\"top.frames.Ramme2_3.location=\'kontakt.htm\';musKlik(\'kontaktpic\',\'images/kontakt.gif\')\"
onmouseover=\"musOver( \'kontaktpic\', \'images/kontakton.gif\');\"
onmouseout=\"musOut( \'kontaktpic\', \'images/kontakt.gif\');\">
<IMG SRC=\"images/kontakt.gif\" name=\'kontaktpic\' BORDER=\"0\" WIDTH=\"150\" HEIGHT=\"30\" ALIGN=\"bottom\" ALT=\"\"><a/>

... osv for de andre links

mvh JakobA

fejl i linien:
]; //end musOver( string, string )
linien skal ikke begynde med ] men med }
}; //end musOver( string, string )

Tak for svaret, jeg prøver at se om jeg kan få det til at virke.