Jan: Bildwechsel mit Mouseover und onClick (mehrere Grafiken)

SELF-Forum

Bildwechsel mit Mouseover und onClick (mehrere Grafiken)

Jan
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich hab folgendes Problem:

Ich habe eine Bannergrafik und mehrere Menüpunkte. Wenn ich mit der Maus über einen Menüpunkt fahre, ändert sich die Bannergrafik. Nun möchte ich aber gerne, dass beim anklicken eines Menüpunktes die dazugehörige Bannergrafik stehen bleibt. Allerdings sollten die anderen weiterhun hoverbar bleiben. Im Menü ist ebenfalls ein Rollover-Effekt enthalten. Kurz: Die Menüpunkte sind mit einem Rollover Effekt versehen, der den Punkt UND den Banner ändert.
Ich verwende keine Frames sondern nur Tabellen.

Das ganze sieht so aus:

----------------------------
|Logo|       Banner        |
----------------------------
|          Menü            |
----------------------------
           Inhalte

Mein Script:

<HEAD>
<SCRIPT language=JavaScript>
<!--
//Banner
b01 = new Image();
b01.src = "images/banner.jpg";  /* Sart-Banner */
//Kueche
bk01 = new Image();
bk01.src = "images/a.gif";  /* Menuepunkt */
bk02 = new Image();
bk02.src = "images/a_over.gif"; /* Menüpkt. Rollover */
bk03 = new Image();
bk03.src = "images/a-b.jpg";  /* Rollover-Banner */
bk04 = new Image();
//Baeder
bb01 = new Image();
bb01.src = "images/b.gif";   /* Menuepunkt */
bb02 = new Image();
bb02.src = "images/b_over.gif";  /* Menüpkt.Rollover */
bb03 = new Image();
bb03.src = "images/b-b.jpg";  /* Rollover-Banner */
bb04 = new Image();

....

function over(imgID,imgObjName) {
// imgID - Name des auszutauschenden Bildes
// imgObjName - Name des Bildes mit dem ausgetauscht wird
document.images[imgID].src = eval(imgObjName + ".src")
}
//-->

</SCRIPT>
</HEAD>
<BODY>
<a onmouseover="over('a','bk02');over('banner','bk03')"
onmouseout="over('a','bk01'),over('banner','b01')" onClick=""
href="a.htm">img name="a" src="images/a.gif" width="47" height="15" border="0" alt=""></a>

<a onmouseover="over('b','bb02');over('banner','bb03')"
onmouseout="over('b','bb01'),over('banner','b01')"
href="content/b.htm"><img name="b" src="images/b.gif" width="40" height="15" border="0" alt=""></a>

....

</BODY>

Ich geb zu, ich bin ein absoluter Neuling. Habt also Geduld mit mir :-)

Vielen Dank für die Hilfe schon mal im vorraus.

Gruß, Jan

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bildwechsel mit Mouseover und onClick (mehrere Grafiken)

    BananaBoy
    – Informationen zu den Bewertungsregeln

    Ich würde es so versuchen:

    Das angeklickte Bild, was ja stehenbleiben soll, speicherst du einfach zwischen mittels "current= new Image();" .
    Beim onclick wird dann ins current das bild reingeladen, was dauerhaft angezeigt werden soll und du lässt es anzeigen. natürlcih musst du dann bei dem "over('a','bk01')" das eintragen "over('a','current')", wodurch dann immer das letzte bild "feste" bild beim mouseout angezeigt wird.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bildwechsel mit Mouseover und onClick (mehrere Grafiken)

      BananaBoy
      – Informationen zu den Bewertungsregeln

      Habe gerade erst gelesen, dass du Anfänger bist, deswegen will ich mal nicht so sein, hier ein kompletter Beispielcode. Ich hab mich dabei auf deinen Code gestützt:

      <html>
      <head>
      <title></title>

      <script language="JavaScript">
      <!--

      current = new Image();
      current.src = "standard.png";

      over1 = new Image();
      over1.src = "over1.png";

      over2 = new Image();
      over2.src = "over2.png";

      function over(imgID,imgObjName) {
       document.images[imgID].src = eval(imgObjName + ".src")
      }

      //-->
      </script>

      </head>

      <body>

      <img src="standard.png" width="167" height="49" border="0" alt="" id="banner"><br /><br />

      <a href="#" onmouseover="over('banner','over1');" onmouseout="over('banner','current')" onClick="current.src=over1.src;over('banner','over1')">Over 1</a><br />

      <a href="#" onmouseover="over('banner','over2');" onmouseout="over('banner','current')" onClick="current.src=over2.src;over('banner','over2');">Over 2</a>

      </body>
      </html>

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln