Christian: onSelect bei Grafiken?

SELF-Forum

onSelect bei Grafiken?

Christian
– Informationen zu den Bewertungsregeln

Ich möchte ein paar Bilder mit Highlight versehen - das ist nicht das problem -
ich möchte erreichen, dass nach dem anklicken des jeweiligen Bildes der Rollover-Status beibehalten wird - und zwar solange bis ich über das nächste Bild mit der Maus fahre oder es anklicke...

Kann mir dabei vielleicht jemand helfen?

Danke,
Christian

Ich füge hier mal mein Quelltext ein:
<html>
<head>
<title></title>
<meta name="author" content="christian">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">

<script type="text/javascript">
<!--
Normal1 = new Image();
Normal1.src = "Bilder/01.jpg"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "Bilder/01_over.jpg"; /* erste Highlight-Grafik */

Normal2 = new Image();
Normal2.src = "button2.gif"; /* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "button2h.gif"; /* zweite Highlight-Grafik */

Normal3 = new Image();
Normal3.src = "button3.gif"; /* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "button3h.gif"; /* dritte Highlight-Grafik */

/* usw. fuer alle weiteren zu benutzenden Grafiken */

function Bildwechsel(Bildnr,Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;
}
//-->
</script>

</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<a target="blank" href="../../../index.htm"
onMouseOver="Bildwechsel(0,Highlight1)"
onMouseOut="Bildwechsel(0,Normal1)">
<img src="Bilder/01.jpg" width="127" height="140" border="0" alt="">
</a><br>

<img src="Bilder/02.jpg" width="138" height="140" border="0" alt="">
<img src="Bilder/03.jpg" width="138" height="140" border="0" alt="">
<img src="Bilder/04.jpg" width="139" height="140" border="0" alt="">
<img src="Bilder/05.jpg" width="137" height="140" border="0" alt="">
<img src="Bilder/06.jpg" width="135" height="140" border="0" alt="">
<img src="Bilder/07.jpg" width="137" height="140" border="0" alt="">
<img src="Bilder/08.jpg" width="141" height="140" border="0" alt="">
<img src="Bilder/09.jpg" width="137" height="140" border="0" alt="">
<img src="Bilder/10.jpg" width="140" height="140" border="0" alt="">
<img src="Bilder/11.jpg" width="145" height="140" border="0" alt="">

</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. onSelect bei Grafiken?

    joMakaroni Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    am besten machst du eine globale variable:

    1-> var lastImg;

    2-> dann fügt noch in deinem link onClick="saveLast(1,Highlight1);" mit der entsprechenden bildnummer hinzu

    3-> in deiner funktion schreibst du folgendes:
    function saveLast(Bildnr,Bildobjekt)
    {
    lastImg=Bildnr;
    window.document.images[Bildnr].src = Bildobjekt.src;
    }

    4-> jetzt mußt du noch deine function anpassen:

    function Bildwechsel(Bildnr,Bildobjekt)
    {
    if(Bildnr==lastImg) { return; }
    window.document.images[Bildnr].src = Bildobjekt.src;
    }

    normalerweise müßte nun die funktion mit return verlassen werden und dein button behält den status.

    Versuchs mal so, muß so ungefähr funktionieren

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. onSelect bei Grafiken?

      Christian
      – Informationen zu den Bewertungsregeln

      ...sehr schön - Danke funktioniert super!
      musste nur dieses ändern:

      onClick="saveLast(1,Highlight1);">

      in:
      onClick="saveLast(0,Highlight1);">
      damit der Status beim ersten Bild festgehalten wird!

      vielleicht kannst du mir nochmal helfen:
      Und zwar möchte ich wenn ich über das nächste Bild mit der Maus fahre, den Status der anderen Bilder wieder in den Urzustand ("Normal")bringen - so dass immer nur das gerade eben angklickte Bild den Status "Highlight" behält - solange bis ich das nächste anklicke.

      Momentan ist das so, das jedes Bild, welches ich angeklickt habe
      den Status Over behält!

      Gruß
      christian

      P.S. : Ich hoffe du verstehst noch was ich meine !?
      Kann dir sonst mal die Datei auf einen Server legen!

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. onSelect bei Grafiken?

        Bernd
        – Informationen zu den Bewertungsregeln

        Mach bei Rollover 'ne Schleife, die alle bis auf das aktuelle Bild wieder zurück schickt.

        Bernd

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. onSelect bei Grafiken?

          Christian
          – Informationen zu den Bewertungsregeln

          Mach bei Rollover 'ne Schleife, die alle bis auf das aktuelle Bild wieder zurück schickt.

          Bernd

          ...bin leider nicht sonderlich gut in java script - kannst du mir vielleicht bei der syntax helfen - weiss jetzt leider nicht wie
          ich die schleife richtig in das mouseover einfüge!

          mein quelltext bisher:

          <html>
          <head>
          <title></title>
          <meta name="author" content="christian">
          <meta name="generator" content="Ulli Meybohms HTML EDITOR">

          <script type="text/javascript">
          <!--
          var lastImg;
          Normal1 = new Image();

          function saveLast(Bildnr,Bildobjekt)
          {
          lastImg=Bildnr;
          window.document.images[Bildnr].src = Bildobjekt.src;
          }

          Normal1.src = "Bilder/01.jpg";     /* erste Standard-Grafik */
          Highlight1 = new Image();
          Highlight1.src = "Bilder/01_over.jpg"; /* erste Highlight-Grafik */

          Normal2 = new Image();
          Normal2.src = "Bilder/02.jpg";     /* zweite Standard-Grafik */
          Highlight2 = new Image();
          Highlight2.src = "Bilder/02_over.jpg"; /* zweite Highlight-Grafik */

          Normal3 = new Image();
          Normal3.src = "button3.gif";     /* dritte Standard-Grafik */
          Highlight3 = new Image();
          Highlight3.src = "button3h.gif"; /* dritte Highlight-Grafik */

          /* usw. fuer alle weiteren zu benutzenden Grafiken */

          function Bildwechsel(Bildnr,Bildobjekt)
          {
          if(Bildnr==lastImg) { return; }
          window.document.images[Bildnr].src = Bildobjekt.src;
          }
          //-->
          </script>

          </head>
          <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
          <a target="blank" href="../../../index.htm"
             onMouseOver="Bildwechsel(0,Highlight1)"
             onMouseOut="Bildwechsel(0,Normal1)"
             onClick="saveLast(0,Highlight1);">
          <img src="Bilder/01.jpg" width="127" height="140" border="0" alt="">
          </a><br>

          Gruß
          Christian

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. onSelect bei Grafiken?

            joMakaroni
            – Informationen zu den Bewertungsregeln

            mit schleifen is hier nicht viel, die funktionen und objekte sind nicht logisch benannt, aber egel.
            du mußt in der function saveLast als erstes alle bilder in den normal zustand bringen:

            function saveLast(Bildnr,Bildobjekt)
            {
            //init pic1
            window.document.images[1].src = Normal1.src;
            //init pic2
            window.document.images[2].src = Normal2.src;
            //init pic3
            window.document.images[3].src = Normal3.src;

            lastImg=Bildnr;
            window.document.images[Bildnr].src = Bildobjekt.src;
            }

            ===========================================================

            kleiner tip am rande wenn du deine bilder logisch durchnummerieren würdest, könntest du dir viel code und zeit sparen (und mir auch:-))

            ZB:

            //loop
            var picPath="../images/";
            for(var i=1; i<7; i++)
             {
             picActive[i]=new Image();
             picActive[i].src=picPath+i+"_active.gif";
             picOver[i]=new Image();
             picOver[i].src=picPath+i+"_over.gif";
             picOut[i]=new Image();
             picOut[i].src=picPath+i+"_out.gif";
             }

            //Event onMouseOver
            function rollOver(nr)
             {
             document.getElementById(nr).src=picOver[nr].src;
             }

            //Event onMouseOut
            function rollOut(nr)
             {
             document.getElementById(nr).src=picOut[nr].src;
             }

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln