André Kunert: Textfarbe ändern bei mouseover über einer anderen Grafik?

SELF-Forum

Textfarbe ändern bei mouseover über einer anderen Grafik?

André Kunert
– Informationen zu den Bewertungsregeln

Hallo,

folgendes Problem: Ich habe einen Button, der sich mittels "mouseover" in der Farbe ändert. Gleichzeitig hab ich auch noch einen (Link)Text der dahinter steht. Wenn ich über den Text mit der Maus fahre, ändert sich die Textfarbe und auch die Buttonfarbe. Nun möchte ich, das sich die Textfarbe auch ändert, wenn ich nur über den Button fahre. Gibt es da eine Möglichkeit, wie ich das mache, ohne die beiden Objekte in einer Grafikdatei zusammenzufassen?
Wie muss ich dabei dann vorgehen

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Textfarbe ändern bei mouseover über einer anderen Grafik?

    Ingo Turski Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    definiere für a {display:block;} - und für den IE auch noch eine passende Weite.

    freundliche Grüße
    Ingo

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Textfarbe ändern bei mouseover über einer anderen Grafik?

    Yeti
    – Informationen zu den Bewertungsregeln

    Du gibst dem Text ein <span> drum herum (wenn es nicht ohnehin schon von einem Element eingeschlossen ist), gibst diesem eine ID und machst dann im mouseover etwas in der Art:
    document.getElementByID("linktext").style.color = '#neuefarbe';
    Der Yeti

    --
    Habe nun, ach! WInfo, BWL, und Mathe, Und leider auch Info!
    Durchaus studiert, mit heißem Bemühn. Da steh' ich nun, ich armer Thor!
    Und bin so klug als wie zuvor!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Textfarbe ändern bei mouseover über einer anderen Grafik?

    stevie
    – Informationen zu den Bewertungsregeln

    Hi,

    du kannst den linktext mit 'nem name-teil versehen und dann sagen wenn der über den button fährt this.color=#444444; link.color=#444444
    also gesamt:

    <input type="button" value="button" onMouseOver="this.style.color='#FFFFFF'; text.style.color='#FFFFFF'" onMOuseOut="this.style.color='#000000'; text.style.color='#000000'"><a name="text">text</a>

    so in etwa würd ich's machen
    mfg stevie

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Textfarbe ändern bei mouseover über einer anderen Grafik?

      wahsaga Homepage des Autors
      – Informationen zu den Bewertungsregeln

      hi,

      text.style.color='#FFFFFF'"
      <a name="text">text</a>

      wie kommst du zu dem trugschluss, dass du in test eine javascript-objektreferenz auf diesen link hättest, nur weil dieser den namen test hast?

      gruß,
      wahsaga

      --
      "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  4. Textfarbe ändern bei mouseover über einer anderen Grafik?

    André
    – Informationen zu den Bewertungsregeln

    Vielen Dank für die raschen Antworten, allerdings verstehe ich ehrlich gesagt, nicht allzu viel, was man mir hier versucht zu erklären. Aus diesem Grund habe ich mal den htm-code drangehangen. Vielleicht finden sich jemand, der mir das kurz erläutert und mir es bitte mit einfügen kann. Speziell geht es um die ID=Menuetext 1 und ID=Menuebutton 1.

    Mfg Andre

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Unbenanntes Dokument</title>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);

    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    <link href="POI.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    <!--
    body {
     background-color: #E6F3E6;
    }
    a:link {
     text-decoration: none;
    }
    a:visited {
     text-decoration: none;
    }
    a:hover { color:#007C3E; ;
    }
    a:active {
     text-decoration: none;
    }
    -->
    </style></head>

    <body onLoad="MM_preloadImages('Grafiken/BTN-Gr&#252;n.gif')">
    <div id="BTN-Weiterfliegen" style="position:absolute; width:333px; height:81px; z-index:1; left: 438px; top: 497px;"><img src="Grafiken/BTN-Weiterfliegen.gif" width="333" height="81"></div>
    <div id="NP-LOGO" style="position:absolute; width:225px; height:137px; z-index:2; top: 10px"><img src="Grafiken/NP-Logo.gif" width="225" height="137"></div>
    <div id="POI-NAME" style="position:absolute; width:300px; height:78px; z-index:3; left: 288px; top: 62px;" class="POI-&Uuml;BERSCHRIFT">Sulzkaralm</div>
    <div id="Menubutton1" style="position:absolute; width:32px; height:32px; z-index:4; left: 23px; top: 210px;"><a href="javascript:;" onMouseOver="MM_swapImage('Men&uuml;button_1','','Grafiken/BTN-Gr&#252;n.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Grafiken/BTN-Grau.gif" alt="Menu" name="Men&uuml;button_1" width="31" height="31" border="0" id="Men&uuml;button_1"></a></div>
    <div id="Menubutton2" style="position:absolute; width:32px; height:32px; z-index:4; left: 23px; top: 267px;"><a href="javascript:;" onMouseOver="MM_swapImage('Men&uuml;button_2','','Grafiken/BTN-Gr&#252;n.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Grafiken/BTN-Grau.gif" alt="Menu" name="Men&uuml;button_2" width="31" height="31" border="0" id="Men&uuml;button_2"></a></div>
    <div id="Menubutton3" style="position:absolute; width:32px; height:32px; z-index:4; left: 23px; top: 324px;"><a href="javascript:;" onMouseOver="MM_swapImage('Men&uuml;button_3','','Grafiken/BTN-Gr&#252;n.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Grafiken/BTN-Grau.gif" alt="Menu" name="Men&uuml;button_3" width="31" height="31" border="0" id="Men&uuml;button_3"></a></div>
    <div id="Menubutton4" style="position:absolute; width:32px; height:32px; z-index:4; left: 23px; top: 381px;"><a href="javascript:;" onMouseOver="MM_swapImage('Men&uuml;button_4','','Grafiken/BTN-Gr&#252;n.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Grafiken/BTN-Grau.gif" alt="Menu" name="Men&uuml;button_4" width="31" height="31" border="0" id="Men&uuml;button_4"></a></div>
    <div id="Men&uuml;text1" style="position:absolute; width:468px; height:48px; z-index:5; left: 71px; top: 194px;" class="Menuepunkt"><a href="javascript:;" class="Menuepunkt" onMouseOver="MM_swapImage('Men&uuml;button_1','','Grafiken/BTN-Gr&#252;n.gif',1)" onMouseOut="MM_swapImgRestore()">Men&uuml;punkt 1</a></div>
    <div id="Men&uuml;text2" style="position:absolute; width:468px; height:48px; z-index:5; left: 70px; top: 251px;" class="Menuepunkt"><a href="javascript:;" class="Menuepunkt" onMouseOver="MM_swapImage('Men&uuml;button_2','','Grafiken/BTN-Gr&#252;n.gif',1)" onMouseOut="MM_swapImgRestore()">Men&uuml;punkt 2</a> </div>
    <div id="Men&uuml;text3" style="position:absolute; width:468px; height:48px; z-index:5; left: 70px; top: 308px;" class="Menuepunkt"><a href="javascript:;" class="Menuepunkt" onMouseOver="MM_swapImage('Men&uuml;button_3','','Grafiken/BTN-Gr&#252;n.gif',1)" onMouseOut="MM_swapImgRestore()">Men&uuml;punkt 3</a> </div>
    <div id="Men&uuml;text4" style="position:absolute; width:468px; height:48px; z-index:5; left: 70px; top: 365px;" class="Menuepunkt"><a href="javascript:;" class="Menuepunkt" onMouseOver="MM_swapImage('Men&uuml;button_4','','Grafiken/BTN-Gr&#252;n.gif',1)" onMouseOut="MM_swapImgRestore()">Men&uuml;punkt 4</a> </div>
    </body>
    </html>

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Textfarbe ändern bei mouseover über einer anderen Grafik?

      wahsaga Homepage des Autors
      – Informationen zu den Bewertungsregeln

      hi,

      Vielen Dank für die raschen Antworten, allerdings verstehe ich ehrlich gesagt, nicht allzu viel, was man mir hier versucht zu erklären.

      dann solltest du dir etwas mehr mühe geben.

      "danke für eure mühe, aber ich kapier nix, macht ihr das bitte mal" - sorry, so läuft's hier nicht.
      hier werden grundkenntisse vorausgesetzt - wenn dir diese fehlen, eigne sie dir bitte an.

      Aus diesem Grund habe ich mal den htm-code drangehangen.

      ich glaube nicht wirklich, dass irgend jemand lust hat, sich durch dieses chaos durchzuwühlen.

      gruß,
      wahsaga

      --
      "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Textfarbe ändern bei mouseover über einer anderen Grafik?

      Ingo Turski Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hi,

      Aus diesem Grund habe ich mal den htm-code drangehangen.

      sorry, aber da wühle ich mich jetzt nicht für Dich durch. Aufgefallen ist mir allerdings sofort:

      <div id="Men&uuml;text1"

      Du verwendest hier ein ungültiges Sonderzeichen (nicht das "ü" - auch das wäre falsch).

      Vielleicht suchst Du aber selbst nach einer Lösung und vielleicht hilft Dir http://www.1ngo.de/web/buttons.html auch dabei.

      freundliche Grüße
      Ingo

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln