Mouse-over en Onclick

[justinos]

Hoihoi,

Via google heb ik al tientallen pagina's bekeken waarin over deze scripts geschreven wordt, echter (dat verbaast mij) kan ik niet vinden wat ik zoek.

Het menu op mijn website bestaat uit plaatjes (buttons), gewoon in HTML geschreven. Wanneer iemand met de muis over één van de buttons gaat veranderd hier de kleur van (plaatje2), ga je weer met je muis van dit plaatje af dan wordt het weer de normale kleur (plaatje1). Wat ik nu wil is dat het plaatje2 blijft staan als je op de button geklikt hebt. Zodat de bezoeker ziet op welke pagina hij zich bevind. Wat ik dan wil is dat wanneer je nu naar een andere pagina gaat, en daar dus plaatje1 in plaatje2 veranderd... dat het plaatje van de andere pagina waar de bezoeker zich hiervoor bevond, weer automatisch plaatje1 wordt. Met andere woorden: Er kan maar één plaatje blijvend veranderen in plaatje2, en klik je dus een ander plaatje aan, dan moet het vorige plaatje weer plaatje1 worden.

Lastig om dit uit te leggen maar neem aan dat dit zo wel duidelijk is

Momenteel gebruik ik gewoon de simpelste code in de <a href""> tag:

<SCRIPT>
<!--
function RollOver()
{
document.i.src = "i2.gif";
} 

function RollOut()
{
document.i.src = "i1.gif";
}
// -->
</SCRIPT>

<div style="position: absolute; top: 35; left: 40">
<a href="/pages/main.html" target="main">
<img name="home" src="/images/home.PNG" border="0" onmouseover="home.src='/images/home_2.PNG';" onmouseout="home.src='/images/home.PNG';">
</a>
</div>

<div style="position: absolute; top: 82; left: 40">
<a href="/pages/waarom.html" target="main">
<img name="waarom" src="/images/waarom.PNG" border="0" onmouseover="waarom.src='/images/waarom_2.PNG';" onmouseout="waarom.src='/images/waarom.PNG';">
</a></div>

Hopelijk kunnen jullie mij op weg helpen of naar een pagina met meer info helpen?

Alvast bedankt!

 

[Egel]

Het hover feedback menu script.

In je index zet je twee onloads:

 <frameset cols="200,*" onload="menu.isLoaded=true; menu.feedback();">
  <frame name="menu" src="menu.html">
  <frame name="main" src="pages/main.html" onload="menu.feedback();">
 </frameset>

en in je menu dit script:

<script type="text/javascript">
 <!--
  // Egel 070407 ;)

  var isLoaded = false, current = '';

  function feedback() {
   if (isLoaded) {
    current = '';
    var hr = parent.main.document.location.href;
    for (var i = 0; i < document.links.length; i++) if (hr.indexOf(document.links[i]) > -1) current = document.images[i].name;
    show();
    };
   };

  function show(name) {
   if (!name) name = current;
   for (var i = 0; i < document.links.length; i++) {
    var im = document.images[i];
    im.src = 'images/' + im.name + (im.name == name ? '_2' : '') + '.PNG';
    };
   };

 // -->
</script>


<div style="position: absolute; top: 35; left: 40">
<a href="pages/main.html" target="main">
<img name="home" src="images/home.PNG" border="0" onmouseover="show(this.name);" onmouseout="show();">
</a>
</div>

<div style="position: absolute; top: 82; left: 40">
<a href="pages/waarom.html" target="main">
<img name="waarom" src="images/waarom.PNG" border="0" onmouseover="show(this.name);" onmouseout="show();">
</a></div>

<div style="position: absolute; top: 129; left: 40">
<a href="pages/derde.html" target="main">
<img name="derde" src="images/derde.PNG" border="0" onmouseover="show(this.name);" onmouseout="show();">
</a></div>

de onmouseover en out's zijn voor alle afbeeldingen gelijk.

Ik heb wel de rootslash voor de href en de src weggehaald omdat ik het anders lastig kon testen.

Het werkt ook met de terug button van de browser. Bijlage is een werkend voorbeeld.


Vr.Gr. Egel.

 

[justinos]

Ontzettend bedankt voor de hulp.

Ben druk bezig geweest dit script toe te passen op mijn website maar dit lukt me niet. Waarom niet: in het index.html bestand staat bij mij het menu ook al, er is wel een frame voor de pagina's (main dus). Nu heb ik het menu dan ook in een frame gestopt (name="menu"). Dan krijg je dus hetzelfde effect als in jou script.

Echter is mijn index in tabellen gemaakt en staan de frames niet zo simpel naast elkaar als in jou index bestand:

<frameset cols="200,*" onload="menu.isLoaded=true; menu.feedback();"> 
  <frame name="menu" src="menu.html"> 
  <frame name="main" src="pages/main.html" onload="menu.feedback();"> 
 </frameset>

Zo ziet een deel van mijn index eruit waar de twee frames naar het menu en de main in staan:

 <table border="0" cellspacing="0" width="917" height="376" id="table1" >
 <tr>
  <td width="81" bgcolor="#000000" height="355">
&nbsp;
  </td>
   <td width="162" bgcolor="#FE2B05" height="355">
  <iframe name="menu" src="pages/menu.html" width="162" height="353">

</td>
<td width="489" background="/images/bgframe.PNG" height="355">



  <iframe name="home" src="pages/home.html" width="479" height="353">



</td>
</table>

Hoe verwerk in hier dan die twee onloads in?? Heb al vanalles geprobeerd maar helaas werkt het script dan niet. Heel raar.

 

[Egel]

Met twee iframe's in de index gaat het zo:

 <body onload="menu.isLoaded=true; menu.feedback();">
  <iframe name="menu" src="menu.html" width="200" height="480"></iframe>
  <iframe name="main" src="pages/main.html" onload="menu.feedback();" width="480" height="480">
 </body>

Maar het kan ook met het menu in de index:

<script type="text/javascript">
 <!--
  // Egel 070411 ;)

  var isLoaded = false, current = '';

  function feedback() {
   if (isLoaded) {
    current = '';
    var hr = parent.main.document.location.href;
    for (var i = 0; i < document.links.length; i++) if (hr.indexOf(document.links[i]) > -1) current = document.images[i].name;
    show();
    };
   };

  function show(name) {
   if (!name) name = current;
   for (var i = 0; i < document.links.length; i++) {
    var im = document.images[i];
    im.src = 'images/' + im.name + (im.name == name ? '_2' : '') + '.PNG';
    };
   };

 // -->
</script>


<body onload="isLoaded=true; feedback();">
<iframe name="main" src="pages/main.html" onload="feedback();" width="480" height="480"></iframe>


<div style="position: absolute; top: 35; left: 40">
<a href="pages/main.html" target="main">
<img name="home" src="images/home.PNG" border="0" onmouseover="show(this.name);" onmouseout="show();">
</a>
</div>

<div style="position: absolute; top: 82; left: 40">
<a href="pages/waarom.html" target="main">
<img name="waarom" src="images/waarom.PNG" border="0" onmouseover="show(this.name);" onmouseout="show();">
</a></div>

<div style="position: absolute; top: 129; left: 40">
<a href="pages/derde.html" target="main">
<img name="derde" src="images/derde.PNG" border="0" onmouseover="show(this.name);" onmouseout="show();">
</a></div>

</body>

als je maar wel iframe name="main" gebruikt, dat is nl ook de target van de links en het wordt in het javascript gebruikt.


Vr.Gr. Egel.