Christoph: zwei Images gleichzeitig wechseln mit mousover socks

Hallo Leute,
schreib hier grad eine kleine Seite und will zwei Images gleichzeitig mit mouseover ansprechen, aber irgendwas hab ich wohl übersehen, weiss irgendwer, was das ist?

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
i01 = new Image();
i02 = new Image();
i03 = new Image();
i04 = new Image();
i05 = new Image();
i06 = new Image();

i01.src = "welcome.gif";
i02.src = "portrait.jpg";
i03.src = "contact.jpg";
i04.src = "person.jpg";
i05.src = "hallohead.jpg";
i06.src = "contacthead.jpg"

function hiLite(imgID,imgobjName,imgID,imgobjName)
{
  document.images[imgID].src = eval(imgobjName + ".src")
}
//-->
</SCRIPT>
<TITLE>Christoph Röll</TITLE>
<BODY BACKGROUND="kachel3.gif">
<DIV STYLE="position:absolute; left:120px; top:80px">
  <IMG SRC="singelrot.gif" WIDTH="20" HEIGHT="20">
</DIV>
<DIV STYLE="position:absolute; left:20px; top:200px">
  <A HREF="index.html" onMouseOver="hiLite('i01','i03','i05','i06')" onMouseOut="hiLite('i01','i01','i05','i05')">Contact</A>

</DIV>
<DIV STYLE="position:absolute; left:160px; top:60px">
  <A HREF="index.html" onMouseOver="hiLite('i01','i04')" onMouseOut="hiLite('i01','i01')">Person</A>
</DIV>
<!>
<DIV STYLE="position:absolute; left:440px; top:60px">
  <A HREF="index.html" onMouseOver="hiLite('i01','i02')" onMouseOut="hiLite('i01','i01')">Portrait</A>
</DIV>
<DIV STYLE="position:absolute; left:5px; top:450px">
  Best viewed with<br>
  Opera Browser<br>
  Turn JavaScript on<br>
  500@christoph-roell.de
</DIV>
<CENTER>
<TABLE CELLSPACING=0 BORDER=0>
  <TR>
    <TD HEIGHT=170>
  </TR>
  <TR>
    <TD WIDTH=60></TD>
    <TD BGCOLOR="#FF2400" WIDTH=30px HEIGHT=30px></TD>
    <TD BGCOLOR="Khaki" WIDTH=200px><IMG name="i05" SRC="hallohead.jpg"></TD>
    <TD></TD>
  </TR>
  <TR>
    <TD></TD>
    <TD BGCOLOR="Khaki" HEIGHT=280px></TD>
    <TD BGCOLOR="Khaki" VALIGN="top"><IMG name="i01" SRC="welcome.gif"></TD>
    <TD><IMG SRC="singeltransrot.png" WIDTH=30px HEIGHT=280px></TD>
  </TR>
  <TR>
    <TD></TD>
    <TD></TD>
    <TD><IMG SRC="singeltransrot.png" WIDTH=200px HEIGHT=30px></TD>
    <TD><IMG SRC="singeltransrot.png" WIDTH=30px HEIGHT=30px></TD>
  </TR>

</CENTER>

  1. hi,

    schreib hier grad eine kleine Seite und will zwei Images gleichzeitig mit mouseover ansprechen, aber irgendwas hab ich wohl übersehen, weiss irgendwer, was das ist?

    Also, dein "Script" sieht auf den ersten Blick "ordentlich" aus und müßte eigentlich funktionieren. Ein Problem könnte lediglich sein, daß du im Script selbst mit
    function hiLite(imgID,imgobjName,imgID,imgobjName)
    vier Attribute setzt, im BODY werden dann aber mit
    <A HREF="index.html" onMouseOver="hiLite('i01','i04')" >
    nur zwei übergeben.

    Was außerdem in deinem HTML-Code steht, ist stellenweise arg fragwürdig. Zum Beispiel hast du den Headerbereich nicht mit </HEAD> geschlossen, und das kanns unter Umständen bereits sein. Selbst der IE verzeiht solche Nachlässigkeiten dann nicht, wenn Scripts abgearbeitet werden wollen. Und dann hast du noch sehr eigenwqillige tags eingebaut: <!> gibts eigentlich nicht
    usw.

    Christoph S.

    1. hi,

      schreib hier grad eine kleine Seite und will zwei Images gleichzeitig mit mouseover ansprechen, aber irgendwas hab ich wohl übersehen, weiss irgendwer, was das ist?
      Also, dein "Script" sieht auf den ersten Blick "ordentlich" aus und müßte eigentlich funktionieren. Ein Problem könnte lediglich sein, daß du im Script selbst mit
      function hiLite(imgID,imgobjName,imgID,imgobjName)
      vier Attribute setzt, im BODY werden dann aber mit
      <A HREF="index.html" onMouseOver="hiLite('i01','i04')" >
      nur zwei übergeben.

      Was außerdem in deinem HTML-Code steht, ist stellenweise arg fragwürdig. Zum Beispiel hast du den Headerbereich nicht mit </HEAD> geschlossen, und das kanns unter Umständen bereits sein. Selbst der IE verzeiht solche Nachlässigkeiten dann nicht, wenn Scripts abgearbeitet werden wollen. Und dann hast du noch sehr eigenwqillige tags eingebaut: <!> gibts eigentlich nicht
      usw.

      Christoph S.

      Oh, danke, sorry für den unsauberen Code, ist meine erste Seite völlig ohne WYSIWYG. Hab n bisschen gesäubert und vervollständigt. Aber auch wenn ich vier Werte übergeb, klappts nicht.

  2. Hi!

    Wie Christoph S. bereits andeutete solltest du bevor du ne Frage hier postest erstmal deinen Code nach fehlerhaftem Syntax passiert. Ich schreib meine Seiten komplett mit dem Windows-Notepad und weiß daher, wie leicht man mal was vergisst...

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

    Aber schaue dir mal die Funktion an...
    du hast beide Variable zweimal - im Endeffekt arbeitet die Funktion so, das die ersten beiden Variablen -wenn mich nicht alles täuscht- von den letzten beiden einfach überschrieben und daher nicht ausgwertet werden!

    Machs einfach so:

    function hiLite(imgID1,imgobjName1,imgID2,imgobjName2)
      {
       document.images[imgID1].src = eval(imgobjName1 + ".src")
       document.images[imgID2].src = eval(imgobjName2 + ".src")
      }

    CU, DU

  3. hi

    <HEAD>
    <SCRIPT LANGUAGE="JavaScript">

    function hiLite(imgID,imgobjName,imgID,imgobjName)
    {
      document.images[imgID].src = eval(imgobjName + ".src")
    }
    </SCRIPT>
    <TITLE>Christoph Röll</TITLE>
    <BODY BACKGROUND="kachel3.gif">
    <DIV STYLE="position:absolute; left:20px; top:200px">
      <A HREF="index.html" onMouseOver="hiLite('i01','i03','i05','i06')" onMouseOut="hiLite('i01','i01','i05','i05')">Contact</A>

    </DIV>

    ich hab mal alle für's weitere nicht relevanten Dinge gesagt. Dazu kommt: das da ist kein HTML, das ist Quatsch.
    Es ist kein DOCTYPE angegeben außerdem hat <body> im <head> nichts zu suchen. Das dahinter ebensowenig. Oder hattest du nur vergessen <head> zu schließen? ;)
    <body> geht's aber kein Stück besser...

    Ein paar Tipps für dieses und ähnliche Problem(e):

    </p> ?
    Fast jedes HTML-Tag kann oder muss abgeschlossen werden. Das kann vergiss gleich und mach gedanklich "muss" draus, zumal sich einige Browser verschlucken, wenn man mal was vergisst. Der IE setzt dann Formatierungen bis sonstwohin fort und Netscape 4 verweigert die Anzeigen auch gerne mal komplett.

    border="0" oder border=0
    Dann die Frage, wo Anführungszeichen hingehören: gewöhn dir _überall_ an, verboten sind sie eh nie und in Zukunft werden sie eh überall Pflicht sein.

    <a> oder <A> ?
    ist dem Browser egal solange du konsequent bleibst, also nicht öffnende groß, schließende Klein oder ähnliche Scherze. Klein hat den Vorteil, dass sich die Sache besser komprimiert. In Zukunkt wird klein eh Pflicht sein.

    <center>, <font> und co..
    vergiss das Zeug, oder besser: lern es gar nicht erst. In SelfHTML gibt's ein riesiges Kapitel CSS. Und damit kannste das eh alles viel genauer und auch konsistenter formatieren - "welche Tags haben jetzt nochmal ein 'background'?".

    DOCTYPE
    Das ist keine Bandbreitenverschwendung am Anfang, sondern hat einen Sinn. Damit erkennen XML-Basierende Browser (u.a. auch schon IE6 und Mozilla/Netscape 6), was für eine Art Dokument das eigentlich ist was sie da vor der Nase haben. Beide können sich das zwar teilweise auch so zusammenreimen, aber das was Da rauskommt macht nicht glücklich.

    Wie das ganze Prüfen?
    http://validator.w3.org