Rufinus: Javascript + CSS

Morgääähhn :)

Ich weiß das es eigentlich nicht üblich ist zuviel source zu posten..aber hier geht es nciht anders :(

Folgendes Problem... wenn ihr die seite http://winampskins.ml.org/cwd aufruft, dann ist auf der linken seite eine ImageMAP, in der ich unter zuhilfe name von http://www.webreference.com/dhtml/column2/index.html eine Onmouseover funktion eingebaut habe, dort wird es anhand einer Horizontalen Imagemap beschrieben, mein "navbar" ist vertikal..was mich zu meinem eigentlichen Problem führt :) die links funktionieren (jedenfalls werden sie in der Statusleiste angezeigt, die seiten gibt es nämlich noch nicht :) aber nur beim oberen link sieht man die onmouseover funktion, aber leider bei allen und auch nur am rand..ich finde keinen erklärung mehr...ich suche jetzt seit ca. 2 Stunden, vielleicht könnt ihr was endtecken, oder ich bin einfach schon zu müde :)

-----------------CUT SOURCE-------------------------------
.
.
.
.
.
.
<STYLE TYPE="text/css">
     <!--

#elMenu { position: relative }

#elMenuUp {
             position: absolute;
             top: 0;
             left: 0
         }

#elMenuOver {
             position: absolute;
             visibility: hidden;
             top: 0;
             left: 0
         }

-->
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
     <!--

IE4 = (document.all) ? 1 : 0;
         NS4 = (document.layers) ? 1 : 0;
         ver4 = (IE4 || NS4) ? 1 : 0;

if (ver4) {
             secondIm = "<IMG SRC='images/test2.gif' USEMAP='#mpMenu' WIDTH=168 HEIGHT=428 BORDER=0>";
             arPopups = new Array()
         }
         else { secondIm = "" }

function setBeginEnd(which,from,to) {
             arPopups[which] = new Array();
             arPopups[which][0] = from;
             arPopups[which][1] = to;
         }

if (ver4) {
             setBeginEnd(1,60,99);
             setBeginEnd(2,100,159);
             setBeginEnd(3,160,209);
             setBeginEnd(4,210,259);
             setBeginEnd(5,260,319);
             setBeginEnd(6,320,359);
         }

clTop = 0;
         clBot = 428;

function mapOver(which,on) {
             if (!ver4) { return }
             if (IE4) { whichEl = document.all.elMenuOver.style }
                 else { whichEl = document.elMenu.document.elMenuOver };

if (!on) { whichEl.visibility = "hidden"; return }

clLeft = arPopups[which][0];
             clRight = arPopups[which][1];

if (NS4) {
                 whichEl.clip.left = clLeft;
                 whichEl.clip.right = clRight;
             }
             else {
                 whichEl.clip = "rect(" + clTop + " " + clRight + " " + clBot + " " + clLeft + ")";
             }

whichEl.visibility = "visible"
         }

//-->
</SCRIPT>
.
.
.
.
.
.
<DIV ID="elMenu">
         <DIV ID="elMenuUp">
             <IMG SRC="images/test.gif" USEMAP="#mpMenu" WIDTH=168 HEIGHT=428 BORDER=0>
         </DIV>
         <DIV ID="elMenuOver">
             <SCRIPT LANGUAGE="JavaScript">document.write(secondIm)</SCRIPT>
         </DIV>
      </DIV>
    
      <MAP NAME="mpMenu">
       <AREA SHAPE="RECT" COORDS="0,60 120,99" HREF="design.html"
         onMouseOver="mapOver(1,true)" onMouseOut="mapOver(1,false)">
       <AREA SHAPE="RECT" COORDS="0,100 120,159" HREF="preise.html"
         onMouseOver="mapOver(2,true)" onMouseOut="mapOver(2,false)">
       <AREA SHAPE="RECT" COORDS="0,160 120,209" HREF="referenz.html"
         onMouseOver="mapOver(3,true)" onMouseOut="mapOver(3,false)">
       <AREA SHAPE="RECT" COORDS="0,210 120,259" HREF="kontakt.html"
         onMouseOver="mapOver(4,true)" onMouseOut="mapOver(4,false)">
       <AREA SHAPE="RECT" COORDS="0,260 120,319" HREF="uber.html"
         onMouseOver="mapOver(5,true)" onMouseOut="mapOver(5,false)">
       <AREA SHAPE="RECT" COORDS="0,320 120,359" HREF="Copyright.html"
         onMouseOver="mapOver(6,true)" onMouseOut="mapOver(6,false)">
      </MAP>
      
.
.
.

---------------------------CUT--------------------------------
Danke im Voraus :)

mfg
Rufinus

  1. Hi,

    function mapOver(which,on) {
                 clLeft = arPopups[which][0];
                 clRight = arPopups[which][1];

    if (NS4) {
                     whichEl.clip.left = clLeft;
                     whichEl.clip.right = clRight;
                 }
             }

    hast Du hier mal die "left"'s durch "top"'s und die "right"'s durch "bottom"'s ausgetauscht? Meiner Ansicht nach ist das der Fehler, weil die rote Schrift beim ersten Link von x=60 bis x=99 zu gehen scheint... es müßten aber y-Koordinaten sein!

    Cheatah

    P.S.: Abgesehen davon daß der Text nicht unter der Grafik stehen sollte, ist das Design schlicht und gut, eben ansprechend. Du solltest aber auch als Schriftart Arial(?) wählen, nicht nur innerhalb der Grafiken.

    1. Hallo Cheatah

      P.S.: Abgesehen davon daß der Text nicht unter der Grafik stehen sollte, ist das Design schlicht und gut, eben ansprechend. Du solltest aber auch als Schriftart Arial(?) wählen, nicht nur innerhalb der Grafiken.

      Danke, das war es :) jetzt funktioniert es :)

      Der Text ist nur als beispiel gedacht...ich bau das ganze später in frames ein :)

      CU
      Rufinus

  2. Morgääähhn :)

    Ich weiß das es eigentlich nicht üblich ist zuviel source zu posten..aber hier geht es nciht anders :(

    Folgendes Problem... wenn ihr die seite http://winampskins.ml.org/cwd aufruft, dann ist auf der linken seite eine ImageMAP, in der ich unter zuhilfe name von http://www.webreference.com/dhtml/column2/index.html eine Onmouseover funktion eingebaut habe, dort wird es anhand einer Horizontalen Imagemap beschrieben, mein "navbar" ist vertikal..was mich zu meinem eigentlichen Problem führt :) die links funktionieren (jedenfalls werden sie in der Statusleiste angezeigt, die seiten gibt es nämlich noch nicht :) aber nur beim oberen link sieht man die onmouseover funktion, aber leider bei allen und auch nur am rand..ich finde keinen erklärung mehr...ich suche jetzt seit ca. 2 Stunden, vielleicht könnt ihr was endtecken, oder ich bin einfach schon zu müde :)

    -----------------CUT SOURCE-------------------------------
    .
    .
    .
    .
    .
    .
    <STYLE TYPE="text/css">
         <!--

    #elMenu { position: relative }

    #elMenuUp {
                 position: absolute;
                 top: 0;
                 left: 0
             }

    #elMenuOver {
                 position: absolute;
                 visibility: hidden;
                 top: 0;
                 left: 0
             }

    -->
    </STYLE>

    <SCRIPT LANGUAGE="JavaScript">
         <!--

    IE4 = (document.all) ? 1 : 0;
             NS4 = (document.layers) ? 1 : 0;
             ver4 = (IE4 || NS4) ? 1 : 0;

    if (ver4) {
                 secondIm = "<IMG SRC='images/test2.gif' USEMAP='#mpMenu' WIDTH=168 HEIGHT=428 BORDER=0>";
                 arPopups = new Array()
             }
             else { secondIm = "" }

    function setBeginEnd(which,from,to) {
                 arPopups[which] = new Array();
                 arPopups[which][0] = from;
                 arPopups[which][1] = to;
             }

    if (ver4) {
                 setBeginEnd(1,60,99);
                 setBeginEnd(2,100,159);
                 setBeginEnd(3,160,209);
                 setBeginEnd(4,210,259);
                 setBeginEnd(5,260,319);
                 setBeginEnd(6,320,359);
             }

    clTop = 0;
             clBot = 428;

    function mapOver(which,on) {
                 if (!ver4) { return }
                 if (IE4) { whichEl = document.all.elMenuOver.style }
                     else { whichEl = document.elMenu.document.elMenuOver };

    if (!on) { whichEl.visibility = "hidden"; return }

    clLeft = arPopups[which][0];
                 clRight = arPopups[which][1];

    if (NS4) {
                     whichEl.clip.left = clLeft;
                     whichEl.clip.right = clRight;
                 }
                 else {
                     whichEl.clip = "rect(" + clTop + " " + clRight + " " + clBot + " " + clLeft + ")";
                 }

    whichEl.visibility = "visible"
             }

    //-->
    </SCRIPT>
    .
    .
    .
    .
    .
    .
    <DIV ID="elMenu">
             <DIV ID="elMenuUp">
                 <IMG SRC="images/test.gif" USEMAP="#mpMenu" WIDTH=168 HEIGHT=428 BORDER=0>
             </DIV>
             <DIV ID="elMenuOver">
                 <SCRIPT LANGUAGE="JavaScript">document.write(secondIm)</SCRIPT>
             </DIV>
          </DIV>
        
          <MAP NAME="mpMenu">
           <AREA SHAPE="RECT" COORDS="0,60 120,99" HREF="design.html"
             onMouseOver="mapOver(1,true)" onMouseOut="mapOver(1,false)">
           <AREA SHAPE="RECT" COORDS="0,100 120,159" HREF="preise.html"
             onMouseOver="mapOver(2,true)" onMouseOut="mapOver(2,false)">
           <AREA SHAPE="RECT" COORDS="0,160 120,209" HREF="referenz.html"
             onMouseOver="mapOver(3,true)" onMouseOut="mapOver(3,false)">
           <AREA SHAPE="RECT" COORDS="0,210 120,259" HREF="kontakt.html"
             onMouseOver="mapOver(4,true)" onMouseOut="mapOver(4,false)">
           <AREA SHAPE="RECT" COORDS="0,260 120,319" HREF="uber.html"
             onMouseOver="mapOver(5,true)" onMouseOut="mapOver(5,false)">
           <AREA SHAPE="RECT" COORDS="0,320 120,359" HREF="Copyright.html"
             onMouseOver="mapOver(6,true)" onMouseOut="mapOver(6,false)">
          </MAP>
          
    .
    .
    .

    ---------------------------CUT--------------------------------
    Danke im Voraus :)

    mfg
    Rufinus

    Hallo,

    warum machst du es so kompliziert. Wieso nimmst du nicht einfach das Bild zerschneidest es und setzt es wieder als Tabelle zusammen. Dann hast du keine Probleme mit dem onMouseOver- Effekt. Und in den zwei Stunden, die du zur Fehlersuche gebraucht hast oder noch brauchen wirst hättest du alles fertig.  Außerdem würde es dann auch im NS 3 laufen.

    bis dann......

    1. Hallo

      warum machst du es so kompliziert. Wieso nimmst du nicht einfach das Bild zerschneidest es und setzt es wieder als Tabelle zusammen. Dann hast du keine Probleme mit dem onMouseOver- Effekt. Und in den zwei Stunden, die du zur Fehlersuche gebraucht hast oder noch brauchen wirst hättest du alles fertig.  Außerdem würde es dann auch im NS 3 laufen.

      bis dann......

      wenn du dir den source ansiehst ist oben ein javascript das die browser abfrägt ....ich hatte diese version vorher auch, hat mir aber nicht gefallen :) http://winampskins.ml.org/cwd/ieindex.html

      CU
      Rufinus

      1. hi!

        ich hatte diese version vorher auch, hat mir aber nicht gefallen :)
        http://winampskins.ml.org/cwd/ieindex.html

        Kann ich durchaus nachvollziehen. Es ist auch etwas ungewöhnlich, dass mir ein Menüpunkt einen halben Meter entgegenspringt, wenn ich darüber fahre.

        bye, Frank

  3. hi!

    Folgendes Problem... wenn ihr die seite http://winampskins.ml.org/cwd aufruft, dann ist
    auf der linken seite eine ImageMAP, in der ich unter zuhilfe name von
    http://www.webreference.com/dhtml/column2/index.html eine Onmouseover funktion
    eingebaut habe,

    Einfacher Ausweg: zerschneide die Menügrafik einfach in mehrere Einzel-Grafiken. Dann hast du keines von diesen Problemen.

    bye, Frank!

    1. Hallo Frank

      Einfacher Ausweg: zerschneide die Menügrafik einfach in mehrere Einzel-Grafiken. Dann hast du keines von diesen Problemen.

      bye, Frank!

      Unsportlich!!! wo bleibt die herausforderung :)